[Solved] select row via client API

[Vince]

I would like to modify the client selection demo (http://demos.telerik.com/aspnet-mvc-beta/grid/selectionclientside?theme=default) so that whenever the users pages or sorts the grid, the first row of the Customers grid is selected and the Orders grid rebinds its data, exactly as if the user had selected the first row.

I've created an "onDataBound" client function and assigned it to the OnDataBound client event of the Customers grid. I've verified that onDataBound gets invoked whenever the user pages or sorts the grid.

Now, within onDataBound I need to do two things: (1) select the first row of the Customers grid; and, (2) rebind the Orders grid exactly as if the onRowSelected function had been called (ideally, I'd simply like to invoke the onRowSelected function passing it the appropriate parameter).

This seems very straightforward, but I'm new to JavaScript and can't figure it out. Can someone point me in the right direction? Thanks.

[Vince]

OK, I figured out how to do the second part by refactoring the onRowSelected function to create a rebindOrders function; onDataBound now just needs to call rebindOrders passing it the first row (see code below).

Now I just need to know how to update the visual appearance of the first row to show that it's selected.

<script type="text/javascript">
    function onDataBound() {
        var custGrid = $('#Customers').data('tGrid');
        rebindOrders(custGrid.$rows()[0]);
    }

    function onRowSelected(e) {
        rebindOrders(e.row);
    }

    function rebindOrders(row) {
        var ordersGrid = $('#Orders').data('tGrid');
        customerID = row.cells[0].innerHTML;

        // update ui text
        $('#customerID').text(customerID);

        // rebind the related grid
        ordersGrid.rebind({
            customerID: customerID
        });
    }
</script>

[Vince]

I think I figured out the first part. I updated onDataBound as listed below (the other functions stayed the same). Now it selects the first row and rebinds the Orders grid whenever the Customers grid is paged or sorted.

Please let me know if there's anything wrong with the code I've written or if there's a better/easier way to do this.

function onDataBound() {
    var custGrid = $('#Customers').data('tGrid');
    var row = custGrid.$rows()[0];
    row.className = 't-state-selected';
    rebindOrders(row);
}

[jmo]

just what I needed Vince, thanks!

[Ganesh Jagdale]

Thanks a lot... Vince
I am facing same problem which I have solved with your solution.