ClientTemplate using #

4 posts, 1 answers
  1. Allan
    Allan avatar
    34 posts
    Member since:
    Aug 2015

    Posted 26 Feb 2016 Link to this post

    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

  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2213 posts

    Posted 26 Feb 2016 Link to this post

    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
  3. Michael
    Michael avatar
    8 posts
    Member since:
    May 2014

    Posted 08 Nov Link to this post

    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?

  4. Stefan
    Admin
    Stefan avatar
    1282 posts

    Posted 10 Nov Link to this post

    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.
Back to Top