resources extra column

[David Barrett]

I am using the schedule with a single layer of resources, and I am trying to style the resources a bit and there is an extra <td> in front of the names I want to remove or shrink to nothing. I assumed it was for a caret drop down if needed but I tried setting up grouped resources and that column is still there before the row. 

it is the <td style="width:25px;height:50px"></td> setting just after each <tr class="e-horizontresheaderdiv"> and before the <td> that holds the name of the resource (the height is set for my cell height)

I tried to run a jquery statement  $('.e-horizontresheaderdiv',"#calendar-area").each(function(){$(this).find('td:first').remove();}); after the schedule was created to remove them but there is no method I can find that runs after the schedule is completely loaded. I tried create (which was not even in docs) which happens apparently too early. 

Is there a event that I can use after the schedule is created or another way that I can remove or  adjust that column

Thanks

[Karthigeyan Krishnamurthi]

Hi David,   

   

Thank you for contacting Syncfusion support.   

   

We recommend not to remove any default td(s) as it will result in CSS alignment problem. To customize the resource name, you can use the default Resource header template feature. We have prepared a sample for your requirement which can be viewed from the below link:   

http://jsplayground.syncfusion.com/t0qlytp3   

   

Please visit the below link to know more about the feature.   

http://help.syncfusion.com/js/schedule/templates#resource-header-template   

  

Regards,   

Karthigeyan   

 

[David Barrett]

Thank you for the advice but nothing I can do in the template will remove the 25px from the left which makes all my resources fall onto the next line because they are too long for the box with the extra 25px. And yes I know that I could make the box bigger but its already bigger than I want since there are so many resources I have to load and all the appointments they have.

It will cause no alignment issues as it is an enclosed table inside a td from above so the only thing it does is remove the 25px from the left which appear to do absolutely nothing for anything, since you never use that column for anything. I thought you might use it with grouped resources but no you don't you add the dropdown caret inside the resource box. 

So I will put a 5 second timer on the  create and take out those columns after the schedule loads and I will just have to adjust timer to make sure that calendar is actually created and on the page before it runs. 

[Karthigeyan Krishnamurthi]

Hi David,   

  

Thanks for your update.   

  

We have prepared the sample for your requirement “Need to shrink the td(s) width” which can be download from the following location:   

http://www.syncfusion.com/downloads/support/forum/124877/ze/horizontalmultipleresource-1765424995   

  

Create event will trigger during the initial load of the Scheduler. In that event function we have set the td’s width as 0px. Kindly refer to the following code example used in the above sample. 

<Code> 

function onCreate() { //this function will be called during the initial load of the Scheduler 

            $(".resemptytd").css("width", "0px"); // here td’s width is shrunk 

        } 

</Code> 

Regards, 

Karthigeyan 

[David Barrett]

Thanks for the reply.

Im kinda confused with that answer for a couple reasons

1. The TD im trying to (remove or set to 0px) has no class assigned to it so Im not sure how I would get there using the jQuery command for that class? 

2. I have already tried to use the create function to remove that TD and that event happens before the schedule is shown on the page, so no jquery functions on the schedule yet, Which is why I was asking if there was a function that happens after the schedule is shown on the page or if create is the last event to happen. 

[Sellakumar]

Hi David, 

We have prepared the sample for your requirement “Need to shrink the td(s) width” which can be download from the following location:  

http://www.syncfusion.com/downloads/support/forum/124877/ze/horizontalresource-12487795145671 

Kindly refer to the following code example used in the above sample.  

<Code>  

     function onCreate() { //this function will be called during the initial load of the Scheduler  

          $('.e-horizontresheaderdiv').find('td:first-child').remove(); // here td’s is removed. 

     }  

</Code>  

Regards,  

Sellakumar

[David Barrett]

   Thanks for the reply. 

Did you run that sample you provided? Because it won't work. The theory of what your jquery command (from both replies) will work, but it will only work on a visible object. And at the time of the create function running, the scheduler is not visible on the page and therefore any jquery will not work on the object. Which comes back to the first question that I asked. 

Is there another function that runs later than create? 

I know how to remove or shirk the column, that is not the issue. It is getting it to run after the schedule is on the screen. I have been trying to find a function that runs late enough, otherwise I will have to setup a timer off the create function to run the jquery after 5 secs or something

Thanks for trying to help

[Mahesh Palanisamy]

Hi David, 

Thanks for your update. 

We regret to let you know that we are unable to reproduce the reported problem with “create” event and would like to let you know that the `create` event gets triggered commonly, after any of the control initially renders on the page. Likewise, the scheduler control too will render and become visible on the page – before this event triggers. Please check it here in the JS playground link –  

http://jsplayground.syncfusion.com/ufdi1rkl  

Please refer the screenshot below –  

 

If still the issue persists on your end, kindly try to reproduce the issue in the above mentioned JS playground link and revert back to us – so that we will check on this. 

Also, if the style doesn’t works within the “create” event – try with the following CSS,  

<Code> 

 

    <style type="text/css"> 

        .e-schedule .e-horizontresheaderdiv td:first-child 

        { 

            display: none; 

        } 

    </style> 

 

</Code> 

 

Kindly reproduce the issue in the provided link or else share the sample or code block, if the issue still persists on your end. 

Regards, 

Mahesh

[David Barrett]

Thanks for the reply,

  I think it is strictly a timing issue for the create event on my side, I unloaded all the appointments/resources from my calendar and it does indeed do the function like your example provides, but as I add in more appointments/resources then there is a timing delay that allows the jquery to run before the schedule is fully put to page. However that said I think the css solution (which I had not really thought of till you mentioned it) since that column reappears with every refresh of the view anyways so the create function I was using also needs to be added to the onActionComplete function as well, in order to ensure that your scripts don't add them back in there after I remove (or hide them). So I think my solution will be to go with the css solution that you sent as that seems to be the most complete and least destructive. 

If I have any issues with that solution I will let you know but thank you for the help and effort to solve the problem, it is very easy to work through issues with your staff.

[Sellakumar]

Hi David,  

 

Thanks for your update.  

 

We are glad to hear that your reported problem got resolved. Please let us know, if you need any other assistance on this. 

 

Regards, 

Sellakumar K