Hello,
I set dropdown template for a column cell and all is good until I go to next page or scroll down then templates disappear from the column.
How to fix that? thanks
$("#grid1").igGrid({ width: '100%', columns: DefaultColumns, dataSource: northwindCustomers, rendered: function (evt, ui) { tmpl = "<div id=grdlist_${CustomerID}></div>"; $('#grid1').igGrid('setColumnTemplate', 'CompanyName', tmpl); },
features: [ { name: 'Paging', recordCountKey: 'TotalRecordsCount', pageIndexUrlKey: 'page', pageSizeUrlKey: 'pageSize', pageSize: 5, type: 'remote', pageIndexChanging: function (evt, ui) { var ds = $("#grid1").data('igGrid').dataSource; ds.settings.urlParamsEncoded = function (item, params) { params.extraParams = { input: "text here" }; }; } }],
Hi Vasya,
Ma scenario is almost same as Martin sample, so if you could help make the selection persist between the pages on Martin sample would be great. Also when combo selection is make it doesn't make cell "dirty" for update purposes.
thanks
Hello Andrew,
By design when Selection feature is enabled persist option is set to true by default which means that any row being selected should remain selected after a paging (includes the remote paging as well) is performed. This behavior may differ if you are performing any data binding logic in any of the corresponding paging events.
If this is not the case in your scenario can you please try modifying martin`s sample so that it replicates the issue and I will investigate this matter further.
Looking forward to hearing from you.
thanks Martin,
that is working nice as I needed.
What is the trick now to maintain selection between the pages?
this, doesn't seem to have any effect:
{ name: "Selection", persist: true },
My suggestion is to initialize the custom combobox widget inside the pagerRendered event handler of the Paging feature:
pagerRendered: function (evt, ui) { var dataSource = ui.dataSource.recordsForPage(ui.owner.pageIndex()); $.each(dataSource, function (index, row) { $("#grdlist_" + row.ProductID).CustomList({ 'id': 'grdlist_' + row.ProductID, 'dataSource': ListData, 'valueKey': 'col1', 'textKey': 'col2', 'selected': row.ProductID, 'externalColumns': ListCols, 'callback': onGridListSelection }); }); }
I have modified and attached Vasya' s sample for your reference.
2703.igGridCellTemplate1.zip
Thank you Vasya!
Your example works fine but with static template only like e.g. button:
tmpl = "<div id=grdlist_${ProductID}><button type='button'>X_${ProductID}</button></div>"; $('#grid1').igGrid('setColumnTemplate', 'Name', tmpl);
but I have template with custom combobox which is filled with few rows and that's not working,
only first page is OK, getting combo with dropdown but when I go to next page combo is gone, when come back again to page 1 it's also gone.
I tried to reload template in pageIndexChanging: function (evt, ui) {} but no luck so far.
Initially I load template with data like this:
dataBound: function (evt, ui) { dataSource = $("#grid1").igGrid("option", "dataSource"); $.each(dataSource, function (index, row) { $("#grdlist_" + row.ProductID).CustomList({ 'id': 'grdlist_' + row.ProductID, 'dataSource': ListData, 'valueKey': 'col1', 'textKey': 'col2', 'selected': row.ProductID, 'externalColumns': ListCols, 'callback': onGridListSelection }); });
var ListCols = [ { headerText: "ID", key: "col1", dataType: "string", width: "50%" }, { headerText: "Product", key: "col2", dataType: "string", width: "50%" }];