We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

How to change row background color?

Thread ID:

Created:

Updated:

Platform:

Replies:

126137 Sep 26,2016 03:00 PM Oct 4,2016 03:24 AM ASP.NET Web Forms 7
loading
Tags: Schedule
Jeswin Raj
Asked On September 26, 2016 03:00 PM

Hi - I'm trying to create time windows and assign a background color for each time window (it could be a 2 hour or 3 hour time windows). Can you please let me know or point me to a tutorial on how to specify the background color? Thanks. 
Background Color

Karthigeyan Krishnamurthi [Syncfusion]
Replied On September 27, 2016 06:38 AM

Hi Jeswin,   
   
Thank you for contacting Syncfusion support.   
   
We were unclear about your requirement, kindly share the following information with us to proceed further.   
  
1.       Is quick window is mentioned as time window whose background color wants to be changed?   
2.       More information like image/video demo which clearly depicts your requirement about time window.   
  
Regards,   
Karthigeyan   


Jeswin Raj
Replied On September 28, 2016 04:38 PM

Hi Karthigeyan,

The screenshot in this thread is just an image to show how the cells should have a horizontal background color. Our requirement is - the dispatcher creates 'job windows' which is a 2 or 3 hour time frames. When a customer calls in to schedule appointment, the dispatcher will ask which time-frame you need based on the availability. For example - there can be a job window named "Early AM" (7:00 - 9:00am) or "Late Evening" (5:00 - 7:00PM). We need to distinguish these job windows and display them in a different background color. These backgrounds needs to be spread horizontally across. Hope I made it clear. Please let me know if you need any further clarifications.  

Also I have one more issue - not sure if I can post it in this thread or create a new one. I have a custom popup window. I am able to create an appointment with it. However I am not able to 'Edit' or 'Update' an appointment using the custom schedule window. The data that is being edited is not equivalent to the corresponding scheduling ID and the updated data is not saving with the proper ID. How do I overcome this issue?

Thanks for the help,
Jeswin

Karthigeyan Krishnamurthi [Syncfusion]
Replied On September 29, 2016 05:55 AM

   
Thanks for your update.   
   
We have prepared a sample for your requirement “background color  for row“ which can be download from the below location:   
   
By default, cell(s) can be customized using QueryCellInfo feature, kindly visit the below link to know more about the feature. In the above sample initially cells background colors are changed using QueryCellInfoevent.    
When an appointment/cell is clicked, particular cell’s background color is applied to an appointment window’s background. Kindly refer to the following code example used in the above sample.   
 
<Code> 
function bgColor() { // this function will be called when the appointment/cell is clicked/double clicked             
            if (StartTime.getHours() >= 9 && StartTime.getHours() < 12) { 
                $("#customWindow_wrapper").children().css("background-color", "#ffe9cc"); 
                $("#customWindow").css("background-color", "#ffe9cc"); 
                $("#Schedule1AppointmentQuickWindow_wrapper").css("background-color", "#ffe9cc"); 
                $("#Schedule1AppDetailsWindow_wrapper").css("background-color", "#ffe9cc"); 
            } 
            else if (StartTime.getHours() >= 12 && StartTime.getHours() < 15) { 
                $("#customWindow_wrapper").children().css("background-color", "#ebf1c4"); 
                $("#customWindow").css("background-color", "#ebf1c4"); 
                $("#Schedule1AppointmentQuickWindow_wrapper").css("background-color", "#ebf1c4"); 
                $("#Schedule1AppDetailsWindow_wrapper").css("background-color", "#ebf1c4"); 
            } 
            else if (StartTime.getHours() >= 15 && StartTime.getHours() < 18) { 
                $("#customWindow_wrapper").children().css("background-color", "#dcf1f8"); 
                $("#customWindow").css("background-color", "#dcf1f8"); 
                $("#Schedule1AppointmentQuickWindow_wrapper").css("background-color", "#dcf1f8"); 
                $("#Schedule1AppDetailsWindow_wrapper").css("background-color", "#dcf1f8"); 
            } 
            else { 
                $("#customWindow_wrapper").children().css("background-color", ""); 
                $("#customWindow").css("background-color", ""); 
                $("#Schedule1AppointmentQuickWindow_wrapper").css("background-color", ""); 
                $("#Schedule1AppDetailsWindow_wrapper").css("background-color", ""); 
            } 
        } 
</Code> 

If we have misunderstood your requirement or else if the above sample doesn’t satisfy your requirement, kindly share the image/video demo/code example which clearly depicts your requirement.   
   
Regards,   
Karthigeyan   


Jeswin Raj
Replied On September 29, 2016 03:45 PM

Hi Karthigeyan - appreciate your detailed response.    

Not sure if I should be posting the below question in this thread or create a new one - 

Also I have one more issue regarding custom popup window. I am able to create an appointment with it. However I am not able to 'Edit' or 'Update' an appointment using the custom schedule window. The data that is being edited is not equivalent to the corresponding scheduling ID and the updated data is not saving with the proper ID. How do I overcome this issue? Please let me know.

Thanks

Karthigeyan Krishnamurthi [Syncfusion]
Replied On September 30, 2016 02:44 AM

    
Thanks for your update.   

Sample provided in the previous update uses custom window, where an appointment is correctly saved, edited and updated. In custom window when the submit button is clicked, appointment will be saved using public saveAppointment function and kindly ensure whether an appointment object is formed correctly with the updated information before calling the public function with an appointment object as shown below. 

<Code> 
function save() { 
            --------- 
            --------- 
            var obj = {}; 
            // forming appointment object with the required information 
            obj["Id"] = $("#customId").val() == "" ? $("#customId").val() : parseInt($("#customId").val()); 
            obj["Subject"] = $("#subject")[0].value; 
            obj["Description"] = $("#customdescription")[0].value; 
            obj["StartTime"] = new Date($("#StartTime")[0].value); 
            obj["EndTime"] = new Date($("#EndTime")[0].value); 
            --------- 
            --------- 
            $("#customWindow").ejDialog("close"); 
            var object = $("#Schedule1").data("ejSchedule"); 
            object.saveAppointment(obj); // calling public save function with the appointment object 
            clearFields(); 
        } 
</Code> 

Kindly try the above suggestion and if still issue persist at your end, share the code example/ sample (if possible) to proceed further. 

Regards, 
Karthigeyan 


Jeswin Raj
Replied On October 3, 2016 11:55 AM

Hi Karthigeyan - deeply appreciate the sample and your awesome support. Regarding the background color - for the JavaScript Schedule component - would it be the same 'QueryCellInfo' to change the background row color or is it done through CSS? Please let me know. Would be great if you have a link or a sample for it. Thanks.  

Karthigeyan Krishnamurthi [Syncfusion]
Replied On October 4, 2016 03:24 AM

Hi Jeswin,       
       
Thanks for your update.    
   
Suggested work around to customize the cell in our pervious update can be used same for JavaScript platform with the help of queryCellInfo event. Kindly visit the below links to know more about the event.   
  
   
Regards,   
Karthigeyan   
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;