Proper way to re-use kendo client grid templates?

2 posts, 0 answers
  1. Scott
    Scott avatar
    2 posts
    Member since:
    Mar 2011

    Posted 09 Jul 2013 Link to this post

    On my current project, we make extensive use of the kendo grids. However, I'm not happy with our re-use strategy, which consists of cutting and pasting known-good templates into each view that needs them. Is there documentation that describes how to, for instance, turn a template into a partial view? The trick is that, since these are client grids, I need to pass selection data into them somehow as well.

    Here's a code example of what we're doing:
    <script id="feedbackFormTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Intranet.Data.Review.Info.FeedbackFormInfo>()
            .Name("CRTFeedbackForm_#=Pernr#")
            .Columns(columns =>
            {
               columns.Template(@<text></text>).ClientTemplate("<div>CRT Reviewed Date : \\#=SubmissionDateString\\# | \\#=CorrectiveActionName\\# | \\#=SectionName\\# </div>");
         
        })
            .ClientDetailTemplateId("crtReasonTemplate")
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("CRTGetByInvestigatorAndCaseNumber", "FeedbackForm", new { pernr = "#=Pernr#", caseNumber=@Model.Case.CaseNumber }))
            )
            .Events(e => e
                .DataBound("hideHeader")
            )
            .ToClientTemplate()
                )  
    </script>

    <script id="crtReasonTemplate" type="text/kendo-tmpl">
         @(Html.Kendo().Grid<Intranet.Data.Review.Info.FeedbackFormReasonInfo>()
            .Name("reason_#=FeedbackFormId#")      
            .TableHtmlAttributes(new { @class = "noHideHeader" })   
            .Columns(columns =>
            {
                columns.Bound(p => p.ItemNumber).HtmlAttributes(new { style="width: 8%"});
                columns.Bound(p => p.ItemType).HtmlAttributes(new { style = "width: 8%" });
                columns.Bound(p => p.ItemOrg).HtmlAttributes(new { style = "width: 8%" });
                columns.Bound(p => p.ItemEventDateString).HtmlAttributes(new { style = "width: 8%" });
               
                columns.Bound(p => p.FeedbackReasonName).HtmlAttributes(new { style = "width: 45%" });
                columns.Bound(p => p.RebuttalStatus).HtmlAttributes(new { style = "width: 15%" });
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("GetReasonsByFeedbackFormId", "FeedbackForm", new { feedbackFormId = "#=FeedbackFormId#" }))
            )
            .ToClientTemplate()
        )
    </script>

    The bottom template in particular is re-used verbatim in many different places. I  tried doing this:

    <script id="crtReasonTemplate" type="text/kendo-tmpl">
        @{ Html.RenderPartial("_CustomerReworkFeedbackReasonTemplate", new Intranet.Web.Areas.QTrack.ViewModels.CustomerReworkReasonTemplateViewModel { FeedbackFormId = feedbackFormId}); }
    </script>

    But it doesn't like the way I'm trying to transmit the feedbackFormId variable.

    Thanks in advance for any assistance you can provide.
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 11 Jul 2013 Link to this post

    Hello Scott,

    You do not have to pass any route data to the partial view. After all that rendering of the partial view is happening on the server, and you just need to return simple string with the client expressions inside.

    To demonstrate an easy way re-use the detail template of the Grid I created a demo project which I hope will help.

    Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top