ejSchedule - Remove resource group style when open

[Brian]

Is there a way to remove the resource header row background color when the group is not open. I only want the color to appear when the group is open. See the attached image.

I've tried using a template and queryCellInfo but still can't find a way.

Attachment: resourceHeaderStyle_345ddf69.zip

[Karthigeyan Krishnamurthi]

Hi Brian, 

 

Thank you for contacting Syncfusion support. 

 

We have prepared the sample to remove the resource group row color when it is open which can be viewed from the below link. 

http://jsplayground.syncfusion.com/sylgmwzu 

Kindly refer the below code example used in the sample. 

<Code> 

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

            this._on(this.element, "click", ".e-parentnodecategory", hide); 

            hide(); 

        } 

        function hide() { // this function will be called when the group is clicked 

            for (var i = 0; i < $(".e-parentnodecategory").length; i++) { 

                index = $($(".e-parentnodecategory")[i]).closest("tr").index(); 

                if ($($(".e-parentnodecategory")[i]).hasClass('e-resourcecollapse')) 

                    $($(".e-workcellstab tr")[index]).find(".e-categorybar").css("visibility", "hidden") 

                else 

                    $($(".e-workcellstab tr")[index]).find(".e-categorybar").css("visibility", "") 

            } 

        } 

</Code> 

Regards, 

Karthigeyan 

[Brian]

This is working great, but there is one issue I found. When navigating to a different view the feature is lost until you click the group to collapse it. I tried applying the hide function to the navigate event but that didn't fix it. Any suggestions.

[Karthigeyan Krishnamurthi]

Hi Brian,  

 

Thanks for your update. 

 

We have prepared the sample to hide the resource group color both on initial load and view change which can be viewed from the below link. 

http://jsplayground.syncfusion.com/2u420lv1 

Kindly refer the below code example used in the sample. 

<Code> 

function onComplete(args) { // this function will be when the view is navigated 

            if(args.requestType=="dateNavigate" || args.requestType=="viewNavigate") 

            hide(); 

        } 

</Code> 

Regards, 

Karthigeyan