Custom Columns in Timeline View

[Navaneeth Kumar]

Hi,

I am using Rad Scheduler in timeline view by grouping vertically on a particular resource (ID). However each resource (ID) has a list of attributes that is residing in another data set. Currently I am using a Rad Grid to the left side of the Rad Scheduler to display the different attributes (please check the attached screenshot). But they are two different controls. How can I display the attributes as custom columns inside the Rad Scheduler Control?

Thanks in advance.

Regards,
Navaneeth

[Plamen]

Hi Navaneeth,

 
In RadScheduler there is no inbuilt functionality of displaying attributes of the resources. The only workaround I could think of is to use Resource Header templates as in this on-line demo and add the appropriate attributed inside them.

Hope this will be helpful.

Regards,
Plamen
the Telerik team

[Navaneeth Kumar]

Hi Plamen,

Thanks for your response. Displaying the attributes via resource headers would not help in my case as the attributes are specific to an ID and they are not specific to any week or appointment. As the data has been grouped vertically by ID, the attributes need to appear corresponding to each row. Is there any other work around? Your help is appreciated.

Regards,
Navaneeth

[Plamen]

Hello Navaneeth,

 
Unfortunately there is no other way to initialize such resource within RadScheduler. Please excuse us for this limitation of the control.

Kind regards,
Plamen
the Telerik team

[Navaneeth Kumar]

Hi Plamen,

Thanks again for your reply. And now I have to go with the former approach of displaying a Rad Grid on the left of the Rad Scheduler. There are two questions I have with this approach.

1. Is it possible to hide the vertical resource column in the timeline view of Rad Scheduler?
2. What is the best way to adjust the height of the Rad Grid row to keep it inline with the Rad Scheduler row height? Note: The row height of the Rad Scheduler will change based on the actions performed by the user such as moving appointments, adding appointments.etc

Would be very helpful if this can be done in the client side.

Thanks in advance,
Navaneeth

[Plamen]

Hello Navaneeth,

 Straight to the points:
1. Unfortunately hiding the vertical resource column is to supported scenario in RadScheduler.Please excuse us for this limitation of the control.
2.You can resize the rows of the Grid according to the rows of RadScheduler as in the code below with the help of jQuery:

<script type="text/javascript">
            function pageLoad() {
                var $ = $telerik.$;
                var rsVerticalHeaderTableTh = $(".rsVerticalHeaderTable th");
                var gridTableTr = $(".rgMasterTable tbody tr");
                rsVerticalHeaderTableTh.each(function (index, elem) {

                    var h = $(elem).height() - 1;
                    gridTableTr[index].style.cssText = "height:" + h + "px";
                });
            }
</script>

I am attaching a sample test page where similar issue have been implemented. 

Hope this will lead you to the right direction. Regards,
Plamen
the Telerik team

[Marbry]

I got around that by writing formatted data out in the ResourceHeaderCreated event handler like Plamen mentioned, using the ResourceHeaderTemplate to create a placeholder.  I create a single composite ID in SQL from all the data that composes the resource and use that so that I can still have a single unique key.  This way you can use the built-in grouping functionality and not have to worry about trying to keep separate controls synced.

The "resourceheader header" or column names displayed for the resource header is generated as an HTML string on the server, written to divHidden, and inserted into the scheduler after it renders on load.

function WriteHeader()
{
GetCritValue();

var objRef = document.getElementById("divHidden");
var val = objRef.innerHTML;

if (val != "")
{
$telerik.$(".rsSpacerCell div").html(val);
}
}

Of course the interesting part is getting the column widths to match up.  tblRowHeader is the containing table written in the header template and tblHeaderHead is the containing table for the column titles written above.  Kind of hacky but it does work.

function ResizeHeaderColumns()
{
    var bodyRow = $telerik.$('.tblRowHeader tr')[0];
    var headRow = $telerik.$('.tblHeaderHead tr')[0];

    if (bodyRow != null && headRow != null)
    {
        $telerik.$.each(bodyRow.cells, function(index, item)
        {
            var w = bodyRow.cells[index].offsetWidth;
            headRow.cells[index].style.width = w + "px";
        });
    }
}

[Plamen]

Hello Marbry,

 
Thank you for sharing your solution with the community.

Greetings,
Plamen
the Telerik team

[shubhangi]

Hi,

 Could you tel me where we can call this function "function pageLoad() ",. I called in code behind on page load. But it is not showing after inserting record on calendar.

Thanks,

Shubh

 

[Plamen]

Hello,

You can call it from your aspx page as it is done in the RadGridWithRadscheduler.zip project attached in my answer from 19-Mar-2013 in this forum.

Regards,
Plamen
Telerik

[shubhangi]

Hi,

Not calling the function after inserting record on calendar. that via not able to see labels on calendar header.. Below are details:

I have added function below for showing jobstatus in different color as per requirement. for that i have added some html code and showing as i want. 
  function page_load() {
            var $ = $telerik.$;
            var $header = $(".rsHeader h2");
            var result = '';
            result += '<Span class ="tab">' + "<u>Job Status:</u> " + '<Span class ="clr1"> ' + "Success" + '</span>' + '<Span class ="clr2">' + " Runing " + '</span>' + '<Span class ="clr3">' + " Failed " + '<span>' + '<Span class ="clr4">' + " Deleted " + '</span>' + '</span>';
            $header.html($header.html() + result)
        }

 Code Behind:
   protected void Page_Load(object sender, EventArgs e)
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "page_load()", true);
        }
 But after inserting record on calendar . Label are not visible means page is not loading again. Please give me any idea where we can call this function Page_Load(). You can see implemented changes in attachment image.

Thanks,

Shubh

[Plamen]

Hello,

You don't have to register the script from the code behind- just refer to the sample attached. You can also check the RadGridWithRadscheduler.zip project attached in my answer from 19-Mar-2013 in this forum.

Regards,
Plamen
Telerik