ResourceHeaderTemplate not working in agendaview

5 posts, 1 answers
  1. ManniAT
    ManniAT avatar
    885 posts
    Member since:
    Nov 2003

    Posted 05 Aug 2014 Link to this post

    Hi,

    the default of GroupingDirection in AgendaView is Horizontal, which is fine.
    But in this case it ignores the ResourceHeaderTemplate.
    Is there a way to change the look of it?

    Manfred
  2.
  3. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 07 Aug 2014 Link to this post

    Hi Manfred,

    The issue with the ResourceHeadeTemplate in AgendaView is logged for fixing. In the public Ideas & Feedback Portal of Telerik UI for ASP.NET AJAX, you can track its status, comment and vote for it.
    You can use .rsResourceHeader class of the <th> element to change the look of the resource header.

    Regards,
    Aneliya Petkova
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. ManniAT
    ManniAT avatar
    885 posts
    Member since:
    Nov 2003

    Posted 07 Aug 2014 in reply to Aneliya Petkova Link to this post

    Thank you Aneliya,

    changing via css doesn't help since I want to color the header different depending on the Resource group.

    <ResourceHeaderTemplate>
            <div class='<%# Eval("Text") %>'>
                <%# Eval("Text") %>
            </div>
        </ResourceHeaderTemplate>


    Which works fine for other views except AgendaView.

    Manfred
  7. Answer
    Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 07 Aug 2014 Link to this post

    Hi Manfred,

    Using the .rsResourceHeader class, you could achieve your scenario. Please watch this video showing how the groups look at my side. Attached you can find the page I made for testing. I used the following JavaScript code for the workaround:
    <script type="text/javascript">
        var $ = $telerik.$;
     
        function pageLoad() {
     
            var scheduler = $find("<%=RadScheduler1.ClientID %>").get_element();
            var rsResourceHeader = $(scheduler).find('.rsResourceHeader');
     
            for (var i = 0; i < rsResourceHeader.length; i++) {
                if (rsResourceHeader[i].textContent == 'Development') {
                    $(rsResourceHeader[i]).addClass("development");
                }
                else if (rsResourceHeader[i].textContent == 'Marketing') {
                    $(rsResourceHeader[i]).addClass("marketing");
                }
            }
        }
    </script>

    Please try this approach and let me know if this works for you.

    Regards,
    Aneliya Petkova
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8.
  9. ManniAT
    ManniAT avatar
    885 posts
    Member since:
    Nov 2003

    Posted 08 Aug 2014 in reply to Aneliya Petkova Link to this post

    Hi Aneliya,

    thank you for this solution - works perfect - and in my case with even less code.
    ...
     
        for (var i = 0; i < rsResourceHeader.length; i++) {
            $(rsResourceHeader[i]).addClass(rsResourceHeader[i].textContent);              
        }


    Manfred
Back to Top