This is a migrated thread and some comments may be shown as answers.

Column Template Not Working for Boolean Field

5 Answers 153 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 11 Apr 2018, 08:20 PM

     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 />" +
                  "# } #"
                  );
          }))

5 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 13 Apr 2018, 10:58 AM
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.
0
David
Top achievements
Rank 1
answered on 16 Apr 2018, 10:06 PM

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

0
David
Top achievements
Rank 1
answered on 18 Apr 2018, 01:21 PM
Here's the solution..
0
David
Top achievements
Rank 1
answered on 18 Apr 2018, 01:23 PM
I'm unable to attach the zip file, it's a little less than 5MB but it says it is too large.  
0
Konstantin Dikov
Telerik team
answered on 18 Apr 2018, 01:55 PM
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.
Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Preslav
Telerik team
David
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or