search

taitems / jQuery.Gantt

jQuery Gantt Chart
http://taitems.github.io/jQuery.Gantt/
MIT License
953 stars 304 forks source link

How to customize Display of rows #120

Open Girish31it opened 10 years ago

Girish31it commented 10 years ago

I want to make a tree like display of left panel. So that the sub tasks can be included and show/hide kind functionality can be given. can you please help to customize it

usmonster commented 10 years ago

Hi @Girish31it , thanks for asking. Right now, that kind of customization can be achieved with a bit of work.

Actually, I was just skimming the source, and it looks like there's some undocumented feature around these lines. Apparently you can specify a key called cssClass on each of the objects in your source, which would be attached to the corresponding rows of the left panel. Then you can make your own CSS rules to manage the display of the row labels based on class name and achieve the nesting/tree effect you're looking for.

That, combined with either passing a custom function to onRender or attaching click handlers to the rows (probably using event delegation) should allow you to show/hide subtasks at will.

Hopefully future versions of the plugin will make this much easier to do (in the meantime, you may want to check out #59 and/or #110), though I agree that this "hidden" feature should at least be documented.

Girish31it commented 10 years ago

Thank you for replying, we have already implemeneted the workaround you have mentioned. Honestly saying, i'm not a front end developer. So i found it dificult to do RnD for the Show/ Hide feature in your work. :( I'll love to see how that can be embeded in you code. :) thanx again for great component and design.

Happy Coding , Girish M

On Tue, Feb 18, 2014 at 9:20 PM, usmonster notifications@github.com wrote:

Hi @Girish31it https://github.com/Girish31it , thanks for asking. Right now, that kind of customization can be achieved with a bit of work.

Actually, I was just skimming the source, and it looks like there's some undocumented feature around these lineshttps://github.com/taitems/jQuery.Gantt/blob/7fedcc1821b3e9bcc524ad598710d20915db07b6/js/jquery.fn.gantt.js#L335-339. Apparently you can specify a key called cssClass on each of the objects your source, which would be attached to the corresponding rows of the left panel. In this way, you can make your own CSS rules to change the display of the row labels based on class name.

That, combined with either passing a custom function to onRender or attaching click handlers to the rows (probably using event delegation) should allow you to show/hide elements at will.

Hopefully future versions of the plugin will make this much easier to do (in the meantime, you may want to check out #59https://github.com/taitems/jQuery.Gantt/issues/59), though I agree that this "hidden" feature should at least be documented.

Reply to this email directly or view it on GitHubhttps://github.com/taitems/jQuery.Gantt/issues/120#issuecomment-35397546 .

Thank you and have a nice day...

Regards..

Girish Menghani Contact No: +919595922488 Location: Pune

usmonster commented 10 years ago

Yeah, lots of stuff isn't documented, and the code could use a bunch of cleanup and updated user documentation (it's the result of many developers' work).

I just added the "maintenance" label to this for the documentation part.