Rebinding 2 telerik grids onRowSelect

I have 3 telerik grids on one page and i want to rebind 2 of them when i select a row on the other, my javascript is

function onRowSelected(e) {
        var notes = $('#notes').data('tGrid');
        var clients = $('#clients').data('tGrid');
        id = e.row.cells[0].innerHTML;

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

        // rebind the related grid
        notes.rebind({ id: id });
        clients.rebind({ id: id });

    }
    function onDataBinding(e) {
        e.data = $.extend(e.data, { id: id });
    }

and when i select a row only the notes grid is rebound. If i swap the last 2 lines around like so

clients.rebind({ id: id });        
notes.rebind({ id: id });

only the clients grid is rebound.

Can anyone help please

Re: Rebinding 2 telerik grids onRowSelect

i think teh problem could be because i am makeing multiple ajax calls? I could be wrong tho

heres the code for the whole page

<div class="divCenter">
    <table style="width: 1400px">
        <tr>
            <td>
                <table>
                    <tr>
                        <td style="width: 1100px; padding: 5px">
                            @(Html.Telerik().Grid((IEnumerable<CRM.Lists.lFirms>)ViewData["firms"])
.Name("Firms")
        .Columns(columns =>
            {
                columns.Bound(c => c.id).Width("50px");
                columns.Template(
                @<text>
                            <img
                        alt=""
                        src="../../Images/@item.logo"
                        height="60px" width="50px"
                      />
                            </text>
            ).Title("logo").Width("60px");
                columns.Bound(c => c.name).Title("Firm").HtmlAttributes("style=font:bold");
                columns.Bound(c => c.address1).Title("Address");
                columns.Bound(c => c.postcode).Title("PostCode");
                columns.Bound(c => c.stexpirydate).Title("ST Expiry");
                columns.Bound(c => c.telno).Title("Tel");

                columns.Template(@<text>Web: <a href="Http://@item.websiteurl" target="_blank">@item.websiteurl</a><br />
                            <br />
                            mail: <a href="mailto:@item.email">@item.email</a></text>).Title("Contact").Width("230px").Visible(false);
                columns.Bound(c => c.firmsize).Title("Size");
                columns.Bound(c => c.sector).Title("Sector");
            })

            .Pageable(paging => paging.PageSize(20).Style(GridPagerStyles.NextPreviousAndNumeric).Position(GridPagerPosition.Bottom))
            .Sortable()
            .Filterable()
            .Scrollable(c => c.Height("450px"))
            .Selectable(p => p.Enabled(true))
            .DataKeys(k => k.Add(a => a.id))
            .ClientEvents(events => events.OnRowSelected("onRowSelected"))
            .RowAction(row =>
            {
                row.Selected = row.DataItem.id.Equals(ViewData["id"]);
            })
            )
                        </td>
                    </tr>
                    <tr>
                        <td style="height: 300px">
                            <table>
                                <tr>
                                    <td style="padding: 0">
                                        <div class="header" id="id">
                                        </div>
                                    </td>
                                    <td style="padding: 0">
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 0">
                                        <div class="subHeader">
                                            Notes</div>
                                    </td>
                                    <td style="padding: 0">
                                        <div class="subHeader">
                                            Clients</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 500px; padding: 10px">
                                        @(Html.Telerik().Grid((IEnumerable<CRM.Lists.lNotes>)ViewData["notes"])
.Name("notes")
        .Columns(columns =>
            {
                columns.Bound(c => c.createdby).Title("Created By").Width("60px");
                columns.Bound(c => c.createddate).Title("Date").Width("100px");
                columns.Bound(c => c.notestatus).Title("Status").Width("60px");
                columns.Bound(c => c.notetext).Title("Note");
            })
                  .Sortable()
                  .Filterable()
                  .Scrollable(c => c.Height("150px"))
                  .Selectable(p => p.Enabled(true))
                    .DataBinding(dataBinding => dataBinding.Ajax().Select("_SelectionClientSide_Notes", "Manage", new { id = 14413 }))
                    .Resizable(resizing => resizing.Columns(true))

                .ClientEvents(clientEvents => clientEvents.OnDataBinding("onDataBinding"))

                                )
                                    </td>
                                    <td style="width: 600px; padding: 10px">
                                        @(Html.Telerik().Grid((IEnumerable<CRM.Lists.lClients>)ViewData["clients"])
.Name("clients")
        .Columns(columns =>
            {
                columns.Bound(c => c.title).Title("Title");
                columns.Bound(c => c.firstname).Title("FirstName");
                columns.Bound(c => c.lastname).Title("LastName");
                columns.Bound(c => c.directphone).Title("Tel");
                columns.Bound(c => c.directmobile).Title("Mob");
                columns.Bound(c => c.directfax).Title("fax");
                columns.Bound(c => c.email).Title("Email");
                columns.Bound(c => c.stexpdate).Title("ST Exp");
            })
                  .Sortable()
                  .Filterable()
                  .Scrollable(c => c.Height("150px"))
                  .Selectable(p => p.Enabled(true))
                    .DataBinding(dataBinding => dataBinding.Ajax().Select("_SelectionClientSide_Clients", "Manage", new { id = 14413 }))
                .Resizable(resizing => resizing.Columns(true))
                .ClientEvents(clientEvents => clientEvents.OnDataBinding("OnDataBindi"))

                                )
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
            <td style="width: 300px">

            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    function onRowSelected(e) {

        id = e.row.cells[0].innerHTML;
        str1 = e.row.cells[2].innerHTML;
        // update ui text
        $('#id').text('Firm Selected : '.concat(str1));

        // rebind the related grid
        var clients = $('#clients').data('tGrid');
        clients.rebind({ clientid: id });

        var notes = $('#notes').data('tGrid');
        notes.rebind({ id: id });

    }
    function onDataBinding(e) {
        e.data = $.extend(e.data, { id: id });
    }

    function OnDataBind(e) {
        e.data = $.extend(e.data, { clientid: id });
    }
</script>

thanks in advance