I'm using the Grid Client Selection functionality.
I'm able to call the controller successfully but when OnRowSelect event is called, it throws the exception 'OnRowSelect' is undefined.
I tried a lot and even added the js files in the Script Registrar. But still its not working properly.
Here is the code.
.cshtml file
<
table>
<tr>
<td>
@(Html.Telerik().Grid<
PropertyDetailsIncidentHistoryMaster>()
.Name(
"MasterGrid")
.HtmlAttributes(
new { style = "width:1085px !important" })
.Columns(columns =>
{
columns.Bound(x => x.IncidentId).Title(
"Service Request#");
columns.Bound(x => x.CreatedOn).Title(
"Incident Date").Format("{0:d}");
columns.Bound(x => x.ComplaintOriginName).Title(
"Complaint Origin");
columns.Bound(x => x.StatusName).Title(
"Resolution Action");
columns.Bound(x => x.ClosedOn).Title(
"Closed On");
columns.Bound(x => x.CleaningEntityName).Title(
"Cleaning Entity");
columns.Bound(x => x.CleaningMethods).Title(
"Cleaning Methods");
}
)
.DataBinding(dataBinding => dataBinding.Ajax()
.Select(
"History1", "PropertyDetails")) /* configure the grid for ajax binding */
.Sortable()
.Pageable()
.Selectable()
.ClientEvents(events => events.OnRowSelect(
"onRowSelected"))
.RowAction(row =>
{
row.Selected = row.DataItem.IncidentId.Equals(ViewData[
"id"]);
})
)
</td>
</tr>
<tr>
<td>
You selected SR No (
<span id="incidentID">@ViewData["id"] </span> )
</td>
</tr>
<tr>
<td>
@(Html.Telerik().Grid<
PropertyDetailsIncidentHistoryDetail>()
.Name(
"Detail")
.Columns(columns =>
{
columns.Bound(x => x.CreatedOn).Width(100);
columns.Bound(x => x.StatusDescription).Width(500);
columns.Bound(x => x.StatusGroupName);
columns.Bound(x => x.UpdatedBy);
})
.DataBinding(dataBinding => dataBinding.Ajax()
.Select(
"GetDetails", "PropertyDetails", new { IncidentId = "0" })
)
.ClientEvents(clientEvents => clientEvents.OnDataBinding(
"onDataBinding"))
.Pageable()
.Sortable()
)
</td>
</tr>
</
table>
<
script type="text/javascript">
var incidentID;
function onRowSelected(e) {
var DetailGrid = $('#Detail').data('tGrid');
incidentID = e.row.cells[0].innerHTML;
alert(incidentID);
// update ui text
$(
'#incidentId').text(incidentID);
// rebind the related grid
DetailGrid.rebind();
}
function
onDataBinding(e) {
e.data = $.extend(e.data, { IncidentId: incidentID });
}
</
script>
In the layout
@(Html.Telerik().ScriptRegistrar()
.DefaultGroup(group =>
group.Add(
"telerik.common.js") // That file is always required
.Add(
"telerik.grid.js")
.Add(
"telerik.grid.filtering.js") // Include only if filtering is enabled
.Add(
"telerik.grid.grouping.js") // Include only if grouping is enabled
.Add(
"telerik.grid.editing.js") // Include only if editing is enabled
.Add(
"telerik.grid.reordering.js")
.Add(
"telerik.grid.resizing.js")
.Add(
"telerik.textbox.js")
.Add(
"telerik.calendar.js")
.Add(
"telerik.datepicker.js")
.Add(
"telerik.window.js")
.Add(
"telerik.draganddrop.js")
.Add(
"telerik.treeview.js")
))
please suggest what I'm missing
Thanks a lot