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

Grid in clientTemplate checkBox click event

1 Answer 1606 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kahl
Top achievements
Rank 1
Kahl asked on 28 Nov 2016, 09:56 AM

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");
});

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 30 Nov 2016, 06:46 AM
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.
Tags
Grid
Asked by
Kahl
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or