ClientTemplate using #

1 Answer 4429 Views
Grid
Allan
Top achievements
Rank 1
Allan asked on 26 Feb 2016, 11:40 AM

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

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 26 Feb 2016, 01:20 PM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Michael
Top achievements
Rank 1
commented on 08 Nov 2017, 11:25 AM

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
Telerik team
commented on 10 Nov 2017, 07:12 AM

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
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
Allan
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or