.ClientTemplate - Why is this not working?

11 posts, 0 answers
  1. Shawn
    Shawn avatar
    50 posts
    Member since:
    Jul 2016

    Posted 05 Jan 2017 Link to this post

    Hi,

     

    I have a Kendo.Grid being loaded into a Kendo.Window.  The Grid is showing up with the correct data, but the boolean column 'Printed' is displayed as a checkbox (see screenshot), when I want it to be either 'Y' or 'N'.  Ideally, I want to to be a green TICK or nothing, but I'm just trying to get anything to display other than the checkbox. I have found many examples on using the .ClientTemplate and have added this to the 'Printed' column according to the examples from Telerik, but it just is not working.

    Below is the Grid definition.

    @{ Layout = null; }
     
    @model IEnumerable<CBECloudBO2.ViewModels.LabelTypeForChangesViewModel>
    @(Html.Kendo().Grid(Model)
        .Name("plulabelsgrid")
        .HtmlAttributes(new { style = "height: 230px;" })
        .Columns(columns =>
        {
            columns.Bound(p => p.Id).Hidden();
            columns.Bound(p => p.ReportTemplate).Hidden();
            columns.Bound(p => p.Description).Title("Label");
            columns.Bound(p => p.LabelsCount).Title("Count").Width(70);
            columns.Bound(p => p.NumberLabelsOnPage).Title("Labels per Page").Width(120);
            columns.Bound(p => p.Printed).Title("Printed").Width(80).ClientTemplate("#= Printed ? 'Y' : 'N' #");
            columns.Command(command => command.Custom("Print").Click("printLabel")).Width(85);
        })
        .Scrollable()
        .DataSource(datasource => datasource
            .Ajax()
             )
    )

     

    Can anyone spot anything in the above code or offer me suggestions?

    Regards,

    Shawn

  2.
  3. Shawn
    Shawn avatar
    50 posts
    Member since:
    Jul 2016

    Posted 05 Jan 2017 Link to this post

    BTW

    I am using Visual Studio 2015 and the Kendo.Mvc version is 2016.3.1028.545

    Regards,

    Shawn

  5. Shawn
    Shawn avatar
    50 posts
    Member since:
    Jul 2016

    Posted 05 Jan 2017 Link to this post

    BTW

    I am developing in Visual Studio 2015 with Kendo.Mvc version 2016.3.1028.545

    Regards,

    Shawn

  7. Shawn
    Shawn avatar
    50 posts
    Member since:
    Jul 2016

    Posted 05 Jan 2017 Link to this post

    After further digging, I discovered that the ClientTemplate only works with Ajax binding, which I'm not doing for this grid implementation. I changed the column to use .Template and I was able to at least get a green tick mark in the column, but I need to display this based on the 'Printed' value being true.

    Here's my change:

    columns.Bound(p => p.Printed).Title("Printed").Width(80).Template(@<text><span style="color: green;">✔</span></text>);

     

    I could not find any examples on how to use a conditional within the .Template. Is this possible?

    Regards,

    Shawn

  8.
  9. Kostadin
    Admin
    Kostadin avatar
    1733 posts

    Posted 09 Jan 2017 Link to this post

    Hi Shawn,

    Please check out the following code snippet which demonstartes how to use an if-else statement in a server Template.
    columns.Bound(p => p.Printed).Template(@<text> @if (item.Printed)
    {
      <span style="color: green;">✔</span>
    }
    else
    {
      <span style="color: red;">✔</span>
     
    }</text>);

    I hope this information helps.

    Regards,
    Kostadin
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. Shawn
    Shawn avatar
    50 posts
    Member since:
    Jul 2016

    Posted 09 Jan 2017 in reply to Kostadin Link to this post

    Kostadin,

    Thank you so much.  That works perfect.  I could not for the life of me find an example of this.  Every search came up with examples for the ClientTemplate which uses the #= # syntax.

    Kindest Regards,

    Shawn

  13. Shawn
    Shawn avatar
    50 posts
    Member since:
    Jul 2016

    Posted 10 Jan 2017 Link to this post

    Kostadin,

    Well this was working until I implemented the 'printLabel' function.  Once I added the JavaScript function 'printLabel' to my script section, the green tick mark gets replaced by 'false' (see attached file).  If I remove the printLabel function, the green tick mark appears again. The printLabel function I have defined simply gets a value from the data and displays it in an alert.

    function printLabel(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        alert(dataItem.ReportTemplate);
    }

     

    Seeing that I need the printLabel function available to process the button .Click event for the Custom command, how can I get both working?

    Regards,

    Shawn

  14.
  15. Kostadin
    Admin
    Kostadin avatar
    1733 posts

    Posted 11 Jan 2017 Link to this post

    Hi Shawn,

    Please note that when server binding is used the data is rendered directly to the grid and no data is kept on the client side. That means you cannot access the dataitem by using the approach that you are currently using.
    A possible solution is to traverse the row element or use an Ajax binding.
    function printLabel(e) {
        e.preventDefault();
        var cells = $(e.currentTarget).closest("tr")[0].cells
        for (var i = 0; i < cells.length; i++) {
            alert(cells[i].innerHTML);
        }
    }

    I hope this information helps.

    Regards,
    Kostadin
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  17. Shawn
    Shawn avatar
    50 posts
    Member since:
    Jul 2016

    Posted 11 Jan 2017 in reply to Kostadin Link to this post

    Kostadin,

    I hear what you are saying about the Server Binding, but the JavaScript function I provided does retrieve the data from the dataItem variable as it is defined in the example above.

    My question was more towards why the existence of the JavaScript function 'printLabel' which is assigned to the custom action in the grid initialization would cause a different behavior in the .Template than when the function does not exist in the <script> section. When I added the function, the green tick mark was replaced by the word 'false'.  When I comment out the function from the <script> section, the green tick mark appears again. 

    Regards,

    Shawn

  19. Kostadin
    Admin
    Kostadin avatar
    1733 posts

    Posted 13 Jan 2017 Link to this post

    Hello Shawn,

    I assumed that the issue was caused by a JavaScript error which should be thrown when dataItem is null. However, I try to replicate the issue on my end but I am afraid I was unable to. Could you please check out the attached sample and let me know how it differs from your real setup? I would appreciate if you replicate the issue either in my sample or in a small runnable one in order to examine it further.

    Regards,
    Kostadin
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  21. Shawn
    Shawn avatar
    50 posts
    Member since:
    Jul 2016

    Posted 16 Jan 2017 in reply to Kostadin Link to this post

    Kostadin,

    Thank you for the example.  I compared it with what I was doing and I still had the datasource being defined even though I was not calling a Read function.

    .DataSource(datasource => datasource
        .Ajax()
         )

     

    Once I removed this, it behaved as you described.  I could no longer read the dataItem object from within the JavaScript function and I needed to get to the values using the [].Cells you had in your example.

    It's working as expected now.  Thanks for your help.

    Shawn

Back to Top