ClientTemplate using #

[Allan]

I want to give something a data-target value in my grid results.  I used a client template to achieve this but I cannot give the data-target an identifier, as soon as I type data-target=''#mymodal' the system crashes and the grid breaks and fails to load.  Is there anyway to include a # in my client template that won't breakt he grid?

 

@(Html.Kendo().Grid<Kendo_Range_Test.ViewModels.VesselViewModel>()
      .Name("Grid")
      .Columns(columns =>
      {
          columns.Bound(c => c.owner_company);
          columns.Bound(c => c.vessel_status);
          columns.Command(command => { command.Edit(); }).Width(180);
          columns.Bound(c => c.vessel_idx)
               .ClientTemplate(
               "<a href='" + Url.Action("Create", "Fixture") + "/#=vessel_idx #'" + ">Fixture</a>");
          columns.Bound(c => c.vessel_idx)
               .ClientTemplate(
               "<a data-toggle='modal' data-target='#myModal' href='" + Url.Action("Create", "Fixture") + "/#=vessel_idx #'" + ">Details</a>");

      }
      )
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .Pageable()
      .Reorderable(reorder => reorder.Columns(true))
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(40)
          .Model(model =>
              {
                  model.Id(p => p.vessel_idx);

              })
          .Read(read => read.Action("vessels_Read", "BrokerHome"))
          .Update(update => update.Action("vessels_Update", "BrokerHome"))
      )
)

 

 

Thanks

[Dimiter Madjarov]

Hello Allan,

The # symbols which are not part of the template syntax should be escaped.
E.g.

.ClientTemplate("<a data-toggle='modal' data-target='\\#myModal'

Regards,
Dimiter Madjarov
Telerik

[Michael]

I want to use a pie chart in client template to present percent.

columns.Bound(c => c.PercentCompleted).Title("Percent Completed").Width(100).ClientTemplate("@Html.Kendo().Chart().Name('projectChart').Title('percent completed').HtmlAttributes(new { @class = 'small-chart' }).Legend(legend => legend.Visible(false)) .Tooltip(tooltip => tooltip.Visible(true).Format('{0:N0}').Template('#=kendo.format('{0:p2}', PercentCompleted / 100))#')");

this is not working for me, someone can help?

[Stefan]

Hello, Michael,

Please have in mind that the ClientTemplate is executed on the client and it will not have access to the server part of the application.

In this scenario, I can suggest just placing a div with a class "chart"(or other) in the client template and then programmatically to initialize all Charts on the dataBound event of the Grid based on the dataItem.

.ClientTemplate("<div class="chart"></div >");

The following example demonstrates how to initiate the Chart on the dataBound event based on the dataItem:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/integration/use-nested-chart

Also, please have in mind that we will appreciate if a separate ticket(post) is submitted when the new question is not directly related to the first one, as this is helping us to determine which scenarios are most commonly used and based on that to improve the documentation in that direction.

Regards,
Stefan
Progress Telerik