Grid Client Selection OnRowSelect is undefined

[Gurpreet]

Hi

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

[Atanas Korchev]

Hi Gurpreet,

 You can try moving the <script> element before the grid declaration. If this does not help you can send us a sample project so we can check it out.

Best wishes,
Atanas Korchev
the Telerik team

[Gurpreet]

Thanks a lot for your help. I moved the script tag above the Grid declaration and its working fine now.