I have a kendo grid that contains two types of rows: one of css class k-master-row which appears when the grid loads initially, and the other
is of the css class k-detail-row k-alt which appears when a dropdown is clicked, essentially functioning as a detail for each master row.
Each detail row is a grid which, itself, has rows containing two checkboxes :
<td class="" role="gridcell"><input id="FirstRun" name="FirstRun" class="chkbx" type="checkbox" checked=""></td>
<td class="" role="gridcell"><input id="SecondRun" name="SecondRun" type="checkbox" checked="" class="chkbx"></td>
Right now, in order to get the current value of each checkbox, there are events that trigger when each checkbox is clicked.
$("#sectionGrid .k-grid-content").on("change", 'input.chkbx[name="FirstRun"]', function (e) {
})
$("#sectionGrid .k-grid-content").on("change", 'input.chkbx[name="SecondRun"]', function (e) {
})
Both of these events appear to be triggering, but I'm not sure how to set the value of the model associated with each nested table row. From looking at code samples, I tried something like this:
var checked = $(this).is(':checked');
var grid = $(<selector for each nested grid>).data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('#FirstRun', checked);
The issue is that I'm not sure how to first get the nested grid for in which each checkbox exists before getting the row in that the checkbox is embedded in. How can I actually get the row that the checkbox is embedded in so that the model field can be updated?
A snippet of the html is below (with some of the columns removed to be concise):
<tbody>
<tr class="k-master-row" data-uid="c5aa3ba6-ecd6-47f3-aeb5-7e5c1111028e" role="row">
<td class="k-hierarchy-cell" aria-expanded="false"><a class="k-icon k-i-expand" href="#" aria-label="Expand" tabindex="-1"></a></td>
<td role="gridcell"><input class="k-checkbox" data-role="checkbox" id="01d0ab93-c661-439b-abee-01f9ce34b1b6" aria-label="Select row" aria-checked="false" type="checkbox"><label for="01d0ab93-c661-439b-abee-01f9ce34b1b6" class="k-checkbox-label k-no-text"></label></td>
<td style="display:none" class="" role="gridcell">15</td>
<td style="display:none" class="" role="gridcell">4</td>
<td class="" role="gridcell">3. Portfolio Characteristics and Investment Results</td>
<td style="display:none" class="" role="gridcell"></td>
<td class="" role="gridcell"><input id="TOC_ckbx" name="TOC_ckbx" type="checkbox" value="15" checked="checked" class="chkbx"></td>
<td style="display:none" class="" role="gridcell">01/01/1900</td>
<td style="display:none" class="" role="gridcell"></td>
<td class="" role="gridcell"><span class="sortSpan"> 3 </span></td>
<td class="" role="gridcell"></td>
<td class="" role="gridcell"></td>
<td class="" role="gridcell"></td>
<td class="" role="gridcell"></td>
</tr>
<tr class="k-detail-row k-alt">
<td class="k-hierarchy-cell"></td>
<td class="k-detail-cell" colspan="8">
<div class="k-widget k-grid detail-grid k-display-block k-editable" id="grid_14" data-role="grid" style="height: 379px;">
<div class="k-header k-grid-toolbar k-grid-top"><a class="k-button k-button-icontext k-grid-add" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&documentID=4&_=1544475674808&grid_%23%3DSectionID%23-mode=insert"><span class="k-icon k-i-add"></span>Add Page</a><a class="k-button k-button-icontext k-grid-save-changes" href="javascript:void(0)"><span class="k-icon k-i-check"></span>Save Pages</a><a class="k-button k-button-icontext k-grid-cancel-changes" href="javascript:void(0)"><span class="k-icon k-i-cancel"></span>Cancel changes</a></div>
<div class="k-grid-header" style="padding-right: 17px;">
<div class="k-grid-header-wrap k-auto-scrollable">
<table role="grid">
<colgroup>
<col style="width:60px">
<col style="width:225px">
<col style="width:300px">
<col style="width:120px">
<col>
<col>
<col>
<col>
<col>
<col style="width:110px">
<col style="width:110px">
</colgroup>
<thead role="rowgroup">
<tr role="row">
<th class="k-header" scope="col" data-index="0"><span class="k-link">Delete</span></th>
<th class="k-header" data-field="SectionPageID" data-index="1" data-title="Section Page ID" scope="col" style="display:none" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&documentID=4&_=1544475674808&grid_%23%3DSectionID%23-sort=SectionPageID-asc">Section Page ID</a></th>
<th class="k-header" data-field="SectionID" data-index="2" data-title="Section ID" scope="col" style="display:none" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&documentID=4&_=1544475674808&grid_%23%3DSectionID%23-sort=SectionID-asc">Section ID</a></th>
<th class="k-header" data-field="PageID" data-index="3" data-title="Page ID" scope="col" style="display:none" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&documentID=4&_=1544475674808&grid_%23%3DSectionID%23-sort=PageID-asc">Page ID</a></th>
<th class="k-header" data-field="PageCD" data-index="4" data-title="Page" scope="col" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&documentID=4&_=1544475674808&grid_%23%3DSectionID%23-sort=PageCD-asc">Page</a></th>
<th class="k-header" data-field="PageTitle" data-index="5" data-title="Page Title" scope="col" style="display:none" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&documentID=4&_=1544475674808&grid_%23%3DSectionID%23-sort=PageTitle-asc">Page Title</a></th>
<th class="k-header" data-field="PageTitleOverride" data-index="6" data-title="Page Title Override" scope="col" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&documentID=4&_=1544475674808&grid_%23%3DSectionID%23-sort=PageTitleOverride-asc">Page Title Override</a></th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content" style="height: 307px;">
<table role="grid" data-role="sortable">
<tbody role="rowgroup">
<tr data-uid="34d19927-c356-4d6d-9e00-5b470fe369eb" role="row">
<td role="gridcell"><input class="k-checkbox" data-role="checkbox" id="0b1e4591-88c0-4796-aa62-1c9482005be1" aria-label="Select row" aria-checked="false" type="checkbox"><label for="0b1e4591-88c0-4796-aa62-1c9482005be1" class="k-checkbox-label k-no-text"></label></td>
<td class="" role="gridcell"><input id="FirstRun" name="FirstRun" class="chkbx" type="checkbox" checked=""></td>
<td class="" role="gridcell"><input id="SecondRun" name="SecondRun" type="checkbox" checked="" class="chkbx"></td>
</tr>
</tr>
</tbody>
</table>
</div>
</div>
<script>
kendo.syncReady(function(){jQuery("#grid_14").kendoGrid({"dataBound":detailGrid_onDataBound,"saveChanges":detailGrid_onSaveChanges,"edit":detailGrid_onEdit,"columns":[{"width":"60px","selectable":true},{"title":"Section Page ID","headerAttributes":{"data-field":"SectionPageID","data-title":"Section Page ID"},"hidden":true,"field":"SectionPageID","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field SectionPageID must be a number.\" id=\"SectionPageID\" name=\"SectionPageID\" type=\"number\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"SectionPageID\" data-valmsg-replace=\"true\"></span>"},{"title":"Section ID","headerAttributes":{"data-field":"SectionID","data-title":"Section ID"},"hidden":true,"field":"SectionID","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field SectionID must be a number.\" id=\"SectionID\" name=\"SectionID\" type=\"number\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"SectionID\" data-valmsg-replace=\"true\"></span>"},{"title":"Page ID","headerAttributes":{"data-field":"PageID","data-title":"Page ID"},"hidden":true,"field":"PageID","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field PageID must be a number.\" id=\"PageID\" name=\"PageID\" type=\"number\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"PageID\" data-valmsg-replace=\"true\"></span>"},{"title":"Page","headerAttributes":{"data-field":"PageCD","data-title":"Page"},"width":"225px","field":"PageCD","encoded":true,"editor":"<input id=\"PageCD\" name=\"PageCD\" type=\"text\" /><script> kendo.syncReady(function(){jQuery(\"#PageCD\").kendoDropDownList({\"dataSource\":{\"transport\":{\"read\":{\"url\":\"/Document/GetDropDownListItems?parentKey=Page_CD\u0026fieldText=Lookup\u0026fieldValue=LookupValue\u0026isSP=False\u0026includeValue=%20\"},\"prefix\":\"\"},\"schema\":{\"errors\":\"Errors\"}},\"dataTextField\":\"Text\",\"dataValueField\":\"Text\"});});<\/script><span class=\"field-validation-valid\" data-valmsg-for=\"PageCD\" data-valmsg-replace=\"true\"></span>"},{"title":"Page Title","headerAttributes":{"data-field":"PageTitle","data-title":"Page Title"},"hidden":true,"field":"PageTitle","encoded":true},{"title":"Page Title Override","headerAttributes":{"data-field":"PageTitleOverride","data-title":"Page Title Override"},"width":"300px","field":"PageTitleOverride","encoded":true,"editor":"<input class=\"text-box single-line\" id=\"PageTitleOverride\" name=\"PageTitleOverride\" type=\"text\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"PageTitleOverride\" data-valmsg-replace=\"true\"></span>"},{"title":"Account ID","headerAttributes":{"data-field":"AccountID","data-title":"Account ID"},"hidden":true,"field":"AccountID","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field AccountID must be a number.\" id=\"AccountID\" name=\"AccountID\" type=\"number\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"AccountID\" data-valmsg-replace=\"true\"></span>"},{"title":"Account","headerAttributes":{"data-field":"AccountCD","data-title":"Account"},"width":"120px","field":"AccountCD","encoded":true,"editor":"<input id=\"AccountCD\" name=\"AccountCD\" type=\"text\" /><script> kendo.syncReady(function(){jQuery(\"#AccountCD\").kendoAutoComplete({\"dataSource\":{\"transport\":{\"read\":{\"url\":\"/Document/GetAutoCompleteItems\",\"data\":txtFilterValue_onAdditionalData},\"prefix\":\"\"},\"schema\":{\"errors\":\"Errors\"}}});});<\/script><span class=\"field-validation-valid\" data-valmsg-for=\"AccountCD\" data-valmsg-replace=\"true\"></span>"},{"title":"Effective Date","headerAttributes":{"data-field":"EffectiveDate","data-title":"Effective Date"},"hidden":true,"width":"60px","field":"EffectiveDate","format":"{0:MM/dd/yyyy}","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-date=\"The field EffectiveDate must be a date.\" id=\"EffectiveDate\" name=\"EffectiveDate\" type=\"datetime\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"EffectiveDate\" data-valmsg-replace=\"true\"></span>"},{"title":"End Date","headerAttributes":{"data-field":"EndDate","data-title":"End Date"},"hidden":true,"width":"60px","field":"EndDate","format":"{0:MM/dd/yyyy}","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-date=\"The field EndDate must be a date.\" id=\"EndDate\" name=\"EndDate\" type=\"datetime\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"EndDate\" data-valmsg-replace=\"true\"></span>"},{"title":"Sort Order","headerAttributes":{"data-field":"SPSortOrder","data-title":"Sort Order"},"template":"<span class='spSortSpan'>#if(SPSortOrder != null) {# #=SPSortOrder# #} else {# #=0# #}#</span>","field":"SPSortOrder","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field SPSortOrder must be a number.\" id=\"SPSortOrder\" name=\"SPSortOrder\" type=\"number\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"SPSortOrder\" data-valmsg-replace=\"true\"></span>"},{"title":"Added By","headerAttributes":{"data-field":"AddedBy","data-title":"Added By"},"field":"AddedBy","encoded":true},{"title":"Added On","headerAttributes":{"data-field":"AddedOn","data-title":"Added On"},"field":"AddedOn","format":"{0:MM/dd/yyyy}","encoded":true},{"title":"Updated By","headerAttributes":{"data-field":"UpdatedBy","data-title":"Updated By"},"field":"UpdatedBy","encoded":true},{"title":"Updated On","headerAttributes":{"data-field":"UpdatedOn","data-title":"Updated On"},"field":"UpdatedOn","format":"{0:MM/dd/yyyy}","encoded":true},{"title":"First Run","headerAttributes":{"data-field":"FirstRun","data-title":"First Run"},"width":"110px","template":"<input id='FirstRun' name='FirstRun' class='chkbx' type='checkbox' #= FirstRun ? checked='checked' : '' #/>","field":"FirstRun","encoded":true,"editor":"<input class=\"check-box\" data-val=\"true\" data-val-required=\"The FirstRun field is required.\" id=\"FirstRun\" name=\"FirstRun\" type=\"checkbox\" value=\"true\" /><input name=\"FirstRun\" type=\"hidden\" value=\"false\" /><span class=\"field-validation-valid\" data-valmsg-for=\"FirstRun\" data-valmsg-replace=\"true\"></span>"},{"title":"Second Run","headerAttributes":{"data-field":"SecondRun","data-title":"Second Run"},"width":"110px","template":"<input id='SecondRun' name='SecondRun' type='checkbox' #= SecondRun ? checked='checked' : '' # class='chkbx'/>","field":"SecondRun","encoded":true,"editor":"<input class=\"check-box\" data-val=\"true\" data-val-required=\"The SecondRun field is required.\" id=\"SecondRun\" name=\"SecondRun\" type=\"checkbox\" value=\"true\" /><input name=\"SecondRun\" type=\"hidden\" value=\"false\" /><span class=\"field-validation-valid\" data-valmsg-for=\"SecondRun\" data-valmsg-replace=\"true\"></span>"}],"sortable":true,"scrollable":{"height":"200px"},"editable":{"confirmation":"Are you sure you want to delete this record?","confirmDelete":"Delete","cancelDelete":"Cancel","mode":"incell","template":null,"create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Add Page"},{"name":null,"buttonType":"ImageAndText"}]},"messages":{"noRecords":"No records available."},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Document/SectionPage?sectionID=14"},"prefix":"","update":{"url":"/Document/SectionPage_Update"},"create":{"url":"/Document/SectionPage_Create"},"destroy":{"url":"/Document/SectionPage_Delete"}},"error":detailGridDS_onError,"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"SectionPageID","fields":{"SectionPageID":{"type":"number","defaultValue":null},"SectionID":{"type":"number","defaultValue":null},"PageID":{"type":"number","defaultValue":null},"PageCD":{"type":"string"},"PageTitle":{"editable":false,"type":"string"},"PageTitleOverride":{"type":"string"},"AccountID":{"type":"number","defaultValue":null},"AccountCD":{"type":"string"},"EffectiveDate":{"type":"date","defaultValue":null},"EndDate":{"type":"date","defaultValue":null},"SPSortOrder":{"type":"number","defaultValue":null},"AddedBy":{"editable":false,"type":"string"},"AddedOn":{"editable":false,"type":"date","defaultValue":null},"UpdatedBy":{"editable":false,"type":"string"},"UpdatedOn":{"editable":false,"type":"date","defaultValue":null},"FirstRun":{"type":"boolean"},"SecondRun":{"type":"boolean"}}}}}});});
</script>
</td>
</tr>
</tbody>
