Grid in clientTemplate checkBox click event

2 posts, 0 answers
  1. Kahl
    Kahl avatar
    15 posts
    Member since:
    Nov 2016

    Posted 28 Nov 2016 Link to this post

    I have a grid in a cleintTemplate with a checkbox column, as below,  in a single grod with checkbox, the click event is firedt using the class, but when the grid is inside a clientTemplate column the same way does not work.  Ive tried various ways, but cant seem to get this checkbox to fire a click event.

    What extra is required for the checkbox in a grid inside a cleinttemplate column.

     

    Thanks

    @(Html.Kendo().Grid<WebSite.Library.Models.SiteCriteria>()
    .Name("siteCriteriaCriteria")
    .HtmlAttributes(new { style= "height:60vh; " })
    .Scrollable()
    .Columns(columns =>
    {
    columns.Bound(p => p.siteId).Title("siteId").Width(50).Hidden();
    //columns.Bound(p => p.premiseAreaId).Title("premiseId").Width(50).Hidden();
    columns.Bound(p => p.areaId).Title("AreaId").Width(50).Hidden();
    columns.Bound(p => p.name).Title("Hazard Area").Width(150);
    columns.Template(p => "").HtmlAttributes(new { @class = "templateCell" }).Title("criteria").Width(200).ClientTemplate(
    Html.Kendo().Grid<WebSite.Library.Models.SiteCriteria>()
    .Name("areaCriteria_#=areaId#")
    .TableHtmlAttributes(new { @class = "GridNoHeader" })
    .Columns(c =>
    {
    c.Bound(e1 => e1.name).Title("Training").Width(150).HeaderHtmlAttributes(new { style = "display:none;" }).HtmlAttributes(new { style = "height: 15px" });
    c.Bound(e1 => e1.areaId).Title("Area").Width(100).Hidden();
    c.Bound(e1 => e1.siteCriteria).Title("Access Criteria").ClientTemplate("<input type='checkbox' #=siteCriteria# ' # class='chkbx' />").HtmlAttributes(new { style="height: 15px" }).HeaderHtmlAttributes(new { style="display:none;" }); ;
    })
    .Events(events=> events.DataBound("siteCriteriaCriteria_onDataBound"))
    .DataSource(source1 => source1
    .Custom()
    .Transport(transport => transport
    .Read(read =>
    {
    read.Url("/Api/SiteInfo/_getTrainingAreas/_si=" + Model.SiteId)
    .DataType("json");
    })

    ))
    .ToClientTemplate().ToHtmlString()
    );
    // columns.Command(command => { command.Edit(); }).Width(250);
    })
    .Events(events => events.Save("onSave").DataBound("hideEditCommand"))
    .NoRecords("No criteria exists.")
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(source => source
    .Custom()
    .Schema(schema => schema
    .Model(m => m.Id(p => p.siteId)))
    .Transport(transport => transport
    .Read(read =>
    {
    read.Url("/Api/SiteInfo/_getPremiseArea/_si=" + Model.SiteId )
    .DataType("json");
    })
    ))
    )

     

     

     

    JAVASCRIPT

    $('#areaCriteria_').on("click", ".chkbx", function (e) {
    alert("Click Occurred");
    });

  2. Eyup
    Admin
    Eyup avatar
    4081 posts

    Posted 30 Nov 2016 Link to this post

    Hi Kahl,

    You can check the approach provided in the following article:
    http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/grid-selection-checkbox

    In addition, I am also sending an MVC application demonstrating checkbox column implementation for selection.

    Regards,
    Eyup
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
Back to Top