Custom Columns in Timeline View

12 posts, 1 answers
  1. Navaneeth Kumar
    Navaneeth Kumar avatar
    9 posts
    Member since:
    Feb 2010

    Posted 14 Mar 2013 Link to this post

    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
  2. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 14 Mar 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Navaneeth Kumar
    Navaneeth Kumar avatar
    9 posts
    Member since:
    Feb 2010

    Posted 14 Mar 2013 Link to this post

    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
  5. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 14 Mar 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Navaneeth Kumar
    Navaneeth Kumar avatar
    9 posts
    Member since:
    Feb 2010

    Posted 14 Mar 2013 Link to this post

    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
  7. Answer
    Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 19 Mar 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Marbry
    Marbry avatar
    123 posts
    Member since:
    Aug 2012

    Posted 20 Mar 2013 Link to this post

    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";
            });
        }
    }
  9. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 21 Mar 2013 Link to this post

    Hello Marbry,

     
    Thank you for sharing your solution with the community.

    Greetings,
    Plamen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. shubhangi
    shubhangi avatar
    19 posts
    Member since:
    Aug 2015

    Posted 14 Sep 2015 in reply to Plamen Link to this post

    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

     

  11. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 15 Sep 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. shubhangi
    shubhangi avatar
    19 posts
    Member since:
    Aug 2015

    Posted 15 Sep 2015 in reply to Plamen Link to this post

    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

  13. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 17 Sep 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017