[Solved] Client side event OnRowSelected not working?

[Nick Pepper]

Hi Telerik

I'm currently trying to use the 'OnRowSelected' client side event in my application. I'm using vb.net and Telerik MVC extensions 2010.1.222 release. I am also using custom binding and Ajax databinding. I've tested the following client side events which all seem to work, OnLoad and OnRowDataBound with the same client side function i'm using for the OnRowSelected selected event. Please find a code snippet below and let me know if i am doing any thing wrong or any possible reasons why this event doesn't seem to be working.

Many thanks

Nick

Scripts registration in master page:

<asp:Content ID="cScript" ContentPlaceHolderID="ScriptContent" runat="server">
    <%
        Dim scripts = Html.Telerik.ScriptRegistrar
        scripts.DefaultGroup(Function(group) group.Add("jquery-ui-1.7.2.custom.min.js"))
        scripts.Render()
    %>
    <asp:ContentPlaceHolder ID="ScriptContent" runat="server" />

Code i'm currently using in view from master page:

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Contract Listing
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeaderContent" runat="server">
    <style type="text/css">
        thead th
        {
            background-color: #eaeaea;
            padding: 3px;
            border-bottom: solid 1px #828282;
            font-weight: normal;
            text-align: left;
            background-image: url(../Content/Images/silvergradientbg.png);
            font-weight: bold;
        }
        table
        {
            border-color: #828282;
            border-width: 1px;
            border-spacing: 0px;
            border-style: outset;
            border-collapse: collapse;
            width: 100%;
        }
        #contractsMain
        {
            padding: 20px 10px 0px 10px;
        }
        #filters
        {
            padding: 10px 0px 10px 0px;
        }
        #filters select
        {
            width: auto;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2 class="title">
        Contract Listing</h2>
    <div id="contractsMain">
        <%
            Dim grid As Telerik.Web.Mvc.UI.Grid(Of Contracts.ContractsSummaryViewModel) = Html.Telerik.Grid(Of Contracts.ContractsSummaryViewModel) _
            .Name("ContractGrid") _
            .Sortable() _
            .Pageable(Function(p) p.Total(CInt(ViewData("Total")))) _
            .Filterable() _
            .EnableCustomBinding(True) _
            .ClientEvents(Function(events) events.OnRowSelected("onRowSelected")) _
            .DataBinding(Function(d) d.Ajax().Select("GetContracts", "Contracts"))
            grid.Paging.PageSize = 20
            Dim colContractName As New Telerik.Web.Mvc.UI.GridBoundColumn(Of Contracts.ContractsSummaryViewModel, String)(grid, Function(c) c.ContractName)
            Dim colPORef As New Telerik.Web.Mvc.UI.GridBoundColumn(Of Contracts.ContractsSummaryViewModel, String)(grid, Function(c) c.PORef)
            Dim colClient As New Telerik.Web.Mvc.UI.GridBoundColumn(Of Contracts.ContractsSummaryViewModel, String)(grid, Function(c) c.Client)
            Dim colCurrentStatus As New Telerik.Web.Mvc.UI.GridBoundColumn(Of Contracts.ContractsSummaryViewModel, String)(grid, Function(c) c.CurrentStatus)
            Dim colStartDate As New Telerik.Web.Mvc.UI.GridBoundColumn(Of Contracts.ContractsSummaryViewModel, String)(grid, Function(c) c.StartDate)
            Dim colEndDate As New Telerik.Web.Mvc.UI.GridBoundColumn(Of Contracts.ContractsSummaryViewModel, String)(grid, Function(c) c.EndDate)
            colCurrentStatus.Title = "Current Status"
            grid.Columns.Add(colContractName)
            grid.Columns.Add(colPORef)
            grid.Columns.Add(colClient)
            grid.Columns.Add(colCurrentStatus)
            grid.Columns.Add(colStartDate)
            grid.Columns.Add(colEndDate)
            grid.Render()
        %>
    </div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ScriptContent" runat="server">

    <script src="<%= VirtualPathUtility.ToAbsolute("~/Scripts/contracts.js") %>" type="text/javascript"></script>

    <script type="text/javascript">
        function onRowSelected(e) {
            var row = e.row;
            alert("row clicked!");
        }
        function onLoad(e) {
            alert("Grid Loaded");
        }
    </script>

</asp:Content>

[Atanas Korchev]

Hi Nick Pepper,

The grid must be Selectable() in order for this event to fire. Check the client-events example for a working demo.

Greetings,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Nick Pepper]

This works perfectly now many thanks!

Nick