Column Template Not Working for Boolean Field

6 posts, 0 answers
  1. David
    David avatar
    5 posts
    Member since:
    Dec 2015

    Posted 11 Apr 2018 Link to this post

         Has something changed in the latest version of the grid?  I have a column on my grid that is bound to a boolean field.  It has a template to display a checkmark icon for true and nothing for false.  However, the column is automatically displaying a checkbox and my template is being ignored.  I've used the same code in other projects so I'm not sure what I'm missing.  The only change is the version of telerik I'm using - 2018.1.22.1. 

    Any ideas?

    Here's my code:

     

        @(Html.Kendo().Grid<QuoteViewModel>()
              .Name("QuotesGrid")
              .BindTo(Model)
              .Resizable(resizable => resizable.Columns(true))
              .Columns(columns =>
              {
                  columns.Bound(x => x.Quote.Name).Width(100);
                  columns.Bound(x => x.Quote.Quote_Name__c).Width(300);
                  columns.Bound(x => x.Quote.Customer).Width(300);
                  columns.Bound(x => x.Quote.Project_Scope__c).Title("Project Scope");
                  columns.Bound(x => x.HasSubsOrRentals).Title("Has Sub or Rentals?").ClientTemplate(
                      "# if(HasSubsOrRentals) { #" +
                      "<span class='glyphicon glyphicon-ok text-success'/>" +
                      "# } else { #" +
                      "<span />" +
                      "# } #"
                      );
              }))

  2. Preslav
    Admin
    Preslav avatar
    579 posts

    Posted 13 Apr 2018 Link to this post

    Hi David,

    The provided code looks okay, and I believe it should be working as expected.

    Having said that, I created a test project by using the code and the 2018.1 221 version, it seems that the template looks okay on my side. Having said that, could you please check and modify the attached project so it clearly replicates the issue? After that, send it back with your next reply. This will help me to fully understand the case, and I will be able to provide further assistance to the best of my knowledge.

    I look forward to hearing from you.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. David
    David avatar
    5 posts
    Member since:
    Dec 2015

    Posted 16 Apr 2018 in reply to Preslav Link to this post

    Thanks for your reply, Preslav.  

    The problem happens when you bind the grid directly to the model, instead of using a datasource read method to retrieve the data from the server. This code below will reproduce my issue....

    GridController.cs

            public ActionResult Orders()
            {
                var result = Enumerable.Range(0, 50).Select(i => new OrderViewModel
                {
                    OrderID = i,
                    Freight = i * 10,
                    OrderDate = DateTime.Now.AddDays(i),
                    ShipName = "ShipName " + i,
                    ShipCity = "ShipCity " + i,
                    HasSubsOrRentals = i % 2 == 0 ? true : false
                });

                return View(result);
            }

    Orders.cshtml view:

     

    <h2>Orders</h2>

    @(Html.Kendo().Grid<TelerikMvcApp73.Models.OrderViewModel>()
          .Name("grid")
          .Columns(columns =>
          {
              columns.Bound(p => p.OrderID).Filterable(false);
              columns.Bound(p => p.Freight);
              columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
              columns.Bound(p => p.ShipName);
              columns.Bound(p => p.ShipCity);
              columns.Bound(p => p.HasSubsOrRentals).ClientTemplate(
                  "# if(HasSubsOrRentals) { #" +
                  "<span class='k-icon k-i-check'/>" +
                  "# } else { #" +
                  "<span />" +
                  "# } #"
                  );
          })
          .Pageable()
          .Sortable()
          .Scrollable()
          .Filterable()
          .HtmlAttributes(new { style = "height:550px;" })
          .BindTo(Model)
          )
          )

     

     

     

    Thanks,

    David

  4. David
    David avatar
    5 posts
    Member since:
    Dec 2015

    Posted 18 Apr 2018 Link to this post

    Here's the solution..
  5. David
    David avatar
    5 posts
    Member since:
    Dec 2015

    Posted 18 Apr 2018 in reply to David Link to this post

    I'm unable to attach the zip file, it's a little less than 5MB but it says it is too large.  
  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 18 Apr 2018 Link to this post

    Hello David,

    The ClientTemplate is used only with AJAX binding. With server binding you need to define the templates in the "Template" property of the column:
    If you mix server with AJAX binding you need to define both templates (Template and ClientTemplate), but such mixing is not recommended.

    Hope this helps.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top