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 });
ArchieEric
Member
218 Points
152 Posts
Rebinding 2 telerik grids onRowSelect
Apr 10, 2012 08:56 AM|LINK
Hi
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
ArchieEric
Member
218 Points
152 Posts
Re: Rebinding 2 telerik grids onRowSelect
Apr 10, 2012 10:34 AM|LINK
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