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

the ClientTemplate in kendo UI grid detailTemplate is not working

4 Answers 1840 Views
Checkbox
This is a migrated thread and some comments may be shown as answers.
Wassim
Top achievements
Rank 1
Veteran
Iron
Wassim asked on 13 Nov 2020, 05:47 PM

I have a kendo grid in an asp .net MVC application.

I Set a ClientDetailTemplateId in the grid that contains a one TabStrip HtmlHelper extension.

The Grid is showing up with the correct data.

but not when i want to display chekcbox column instead true/false.

I have a boolean columns in my two grids that i want to display as a checkbox instead true/false.

using 

 columns.Bound(p => p.isActif).Title("Actif").Width(60)..ClientTemplate("<input type='checkbox' disabled='disabled' #= isActif ? checked='checked': '' #  />"); // this is work in my principle grid but i'm trying to do the same in my grid view detailtemplate ..it generates errors !!

any help is greatly appreciated 

4 Answers, 1 is accepted

Sort by
2
Wassim
Top achievements
Rank 1
Veteran
Iron
answered on 17 Nov 2020, 08:28 AM

I resolve it by adding '\\' before '#' when calling ClientTemplate

 columns.Bound(p => p.isActif).Title("Actif").Width(60)..ClientTemplate("<input type='checkbox' disabled='disabled' \\#= isActif ? checked='checked': '' \\#  />"); 

2
Accepted
Petar
Telerik team
answered on 17 Nov 2020, 09:19 AM

Hi Wassim,

Thank you for sharing with the community what has resolved the issue in the scenario you are working on. I can confirm that the "#" sign should be escaped with "\\" (two backslashes) when such a symbol is presented in the detail template.

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Wassim
Top achievements
Rank 1
Veteran
Iron
answered on 17 Nov 2020, 09:27 AM

Thank you. 

I have a gridview with many checkbox rows that i want to update these rows by calling a controller action after clicking a button.
I retrieve correctly the data.
I am using telerik UI in asp.net MVC
myView.cshtml
    <div class="form-group">
                                <div class="form-row">
                                    @(Html.Kendo().Grid<mySolution.Models.AutorisationsModel>()
                                                          .Name("gridPerm")
                                                          .Columns(columns =>
                                                          {
                                                              columns.Bound(o => o.Autorisation_ID).Title("id").Hidden();
                                                              columns.Bound(o => o.Module).Title("Module");
                                                              columns.Bound(o => o.Autorisation_READ).Title("Visible").Width(100).ClientTemplate("<input type='checkbox' #= PERM_READ ? checked='checked': '' # class='chkbx' />").HtmlAttributes(new { style = "text-align: center" });
                                                              columns.Bound(o => o.Autorisation_CREATE).Title("Créer").Width(100).ClientTemplate("<input type='checkbox' #= PERM_CREATE ? checked='checked': '' # class='chkbx' />").HtmlAttributes(new { style = "text-align: center" });
                                                              columns.Bound(o => o.Autorisation_DELETE).Title("Supprimer").Width(100).ClientTemplate("<input type='checkbox' #= PERM_DELETE ? checked='checked': '' # class='chkbx' />").HtmlAttributes(new { style = "text-align: center" });
                                                              columns.Bound(o => o.Autorisation_MODIFY).Title("Modifier").Width(100).ClientTemplate("<input type='checkbox' #= PERM_MODIFY ? checked='checked': '' # class='chkbx' />").HtmlAttributes(new { style = "text-align: center" });
                                                              columns.Bound(o => o.Autorisation_LIST).Title("Lister").Width(100).ClientTemplate("<input type='checkbox' #= PERM_LIST ? checked='checked': '' # class='chkbx' />").HtmlAttributes(new { style = "text-align: center" });
                                                          })
                                                          .Editable(editable => editable.Mode(GridEditMode.InCell))
                                                          .DataSource(dataSource => dataSource
                                                              .Ajax()
                                                              .Model(model =>
                                                              {
                                                                  model.Id(m => m.Autorisation_ID);
                                                                  model.Field(m => m.Module).Editable(false);
                                                                  model.Field(m => m.Autorisation_READ).Editable(true);
                                                                  model.Field(m => m.Autorisation_CREATE).Editable(true);
                                                                  model.Field(m => m.Autorisation_DELETE).Editable(true);
                                                                  model.Field(m => m.Autorisation_MODIFY).Editable(true);
                                                                  model.Field(m => m.Autorisation_LIST).Editable(true);
                                                              })
                                                              .Read(read => read.Action("Autorisations_Read", "Autorisations", new { Id = Model.Auto_ID

                                                              .Update(update => update.Action("Autorisations_Edit", "Autorisations").Type(HttpVerbs.Post)) }))
                                                          )
                                                          .Sortable()
                                                          .Scrollable()
                                                          .Height(400)
                                    )

                                </div>
                            </div>

<div class="form-group">
                  <div class="form-row">
                           <div class="col-md-12" style="text-align: right;">
                                    <input type="submit" id="confirmEdit" value="Enregister" class="mr-1 mb-1 btn btn-primary" />
                                    @Html.ActionLink("Retour", "Autorisations_List", "Autorisations", null, new { @class = "mr-1 mb-1 btn btn-secondary" })
                              </div>
                  </div>
</div>

myController.cs

 public async Task<ActionResult> Autorisations_Edit(AutorisationsModel model)
        {
     
            using (var client = new HttpClient(new LoggingHandler(new HttpClientHandler())))
            {
                client.BaseAddress = new Uri("http://localhost:56321");

                var result = await client.PutAsJsonAsync("api/Autorisations", model); // call a service Put that execute a stored procedured to do the update
                Log.Info(result.ReasonPhrase);
                if (result.IsSuccessStatusCode)
                {
                    return RedirectToAction("AutorisationsList","Autorisations");
                }
                else
                {
                    ModelState.AddModelError(string.Empty, "Server error try after some time.");
                }
            }
            return View();

 

please help

0
Accepted
Petar
Telerik team
answered on 18 Nov 2020, 03:48 PM

Hi Wassim,

I've already answered your question in this forum thread

Let's keep the communication consistent and continue it in the other forum thread.

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Checkbox
Asked by
Wassim
Top achievements
Rank 1
Veteran
Iron
Answers by
Wassim
Top achievements
Rank 1
Veteran
Iron
Petar
Telerik team
Share this question
or