Reputation: 117
How can I select row on checkbox 's checked event in Kendo Grid ?
columns: [
{ field: "cost_ID", title: "Tick", sortable: false, width: 30, headerTemplate: "<input type='checkbox' class='check_row' id='chkSelectAll' onclick='checkAll(this)'/>",template:"<input class='check_row' type='checkbox' name='gridcheckbox' id='#=cost_ID#' />" }
How can i get each row's checkbox id ?
Upvotes: 1
Views: 6717
Reputation: 5580
This is a snippet from the Client Template method of a Grid.
"<select id='\\#= OrderDetailId \\#' onchange=SaveIncludeInForecast('\\#= OrderDetailId \\#','\\#= ProposalId \\#'); style='Width: 80px; color: 'navy' > " +
"<option id='yes' value='1'>Yes</option>" +
"<option id='no' selected value='0'>No</option>"
You'll see im the setting the id to be the OrderDetailId. Then in my JS function I pass in the OrderDetailId.
function SaveIncludeInForecast(orderDetailId, proposalId) {
var ddl = '#' + orderDetailId;
var dataToSend = {
val: $(ddl).val()!=0?true:false
};
Upvotes: 1
Reputation: 8020
Try like this,
View
<div id="divasd">
</div>
@(Html.Kendo().Grid<TwoModelInSinglePageModel.SampleModel>()
.Name("grid12")
.Columns(columns =>
{
columns.Bound(p => p.studentclass).ClientTemplate("<input id='checkbox_#=inx#' class='chkbxq' type='checkbox' />");
columns.Bound(p => p.SampleDescription);
columns.Bound(p => p.SampleCode);
columns.Bound(p => p.SampleItems);
})
.Pageable()
.Navigatable()
.Sortable()
.Groupable()
.Events(events => events.DataBound("_GridItemDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.inx))
.Read(read => read.Action("Read", "Test"))
)
)
Script
$('#grid12').on("click", ".chkbxq", function (e) {
var selectedTd = $(this).is(':checked');
var rowIndex = $(this).parent().index();
var cellIndex = $(this).parent().parent().index();
var grid = $("#grid12").data("kendoGrid");
var datatItem = grid.dataItem(grid.tbody.find('tr:eq(' + cellIndex + ')'));
if (selectedTd == true) {
sampleItem = datatItem.SampleItems;
sampleCode = datatItem.SampleCode;
sampledescription = datatItem.SampleDescription;
datavalueitem = sampleItem + "--" + sampleCode + "--" + sampledescription;
$.ajax({
url: '@Url.Action("NewGridView", "Test")',
type: "Post",
data: { sampleItem: sampleItem, sampleCode: sampleCode, sampledescription: sampledescription },
dataType: 'json',
success: function (result) {
$("#mygrid").val(null);
var customDataList = $('#grid');
customDataList.empty();
customDataList.append(result.Data);
customDataList.append(result.Data);
$("#divasd").html('');
$("#divasd").append(result.Data);
$("#divasd").kendoGrid({
dataSource: result,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [{
field: "SampleDescription",
width: 90,
}, {
field: "SampleCode",
width: 90,
}, {
width: 100,
field: "SampleItems"
}
]
});
}
});
}
});
Controller
public JsonResult NewGridView(string sampleItem, string sampleCode, string sampledescription)
{
List<SampleModel> sampleAddList = new List<SampleModel>();
SampleModel sampleAdd = new SampleModel();
sampleAdd.SampleCode = sampleCode;
sampleAdd.SampleDescription = sampledescription;
sampleAdd.SampleItems = sampleItem;
sampleAddList.Add(sampleAdd);
var result = sampleAddList;
return Json(result, JsonRequestBehavior.AllowGet);
}
Model
public class SampleModel
{
public int inx { get; set; }
public bool studentclass { get; set; }
public string SampleDescription { get; set; }
public string SampleCode { get; set; }
public string SampleItems { get; set; }
}
Upvotes: 2