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" }; }; } }],
Hello Andrew,
Thank you for posting in our community.
I am currently trying to reproduce the described behavior in a working sample. I will keep you posted on my progress and I will get back to you soon with more information or questions.
Please feel free to continue sending updates to this case ta any time.
I created a small sample, using the snippets provided, trying to replicate the behavior on your side.
I am adding a div element as a template for the “Name” column and I am assigning the div`s id to the current row id. After switching to different pages, scrolling up and down and I inspect the cell I am able to see the div element with the correct id.
Attached you will find my sample. Please test it on your side and let me know how it behaves on your side. If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it so that it replicates the issue, and send it back to me along with steps to reproduce. Having a small application on my side, which I can debug, is going to be highly appreciated and helpful in finding the root cause of the behavior.
Looking forward to hearing from you.
2845.igGridCellTemplate1.zip
Your assumption is correct. There is no out-of-the box way to bind and sync igCombo template values with grid cell values. This has to be manually implemented by handling all corresponding events of both controls. This means that you have to configure the igCombo so that its selectionChanged event is handled in order to ensure that the newly selected value is set as cell value in the underlying data source. Additionally, you will have to bind igCombo selected values with the current cell value so that current cell value will be set as selected item in the combo. For achieving your requirement you can take advantage of the Updating feature methods such as:
Please let me know if you need any further assistance with this matter.
I know about igCombo editor but I'm using custom combo hence the problem.
So I understand there is no easy way to make combo template selection to actually change value of the cell.
As mentioned in my previous post cell templating works only on igGrid`s rendering phase.
What we have built in our grid is the Updating feature, which provides igCombo editors out of the box. With performance in mind, we are creating one editor - only for the cell that is currently in edit mode. That is why this combo editor is visible only when the cell is in edit mode. Using the Updating feature ensures that values for both cell and igCombo are correctly maintained. More information regarding Updating feature and working with igCombo editor provider can be found here and here.
In case that you would like to use the igCombo and update and persist both call and combo values you should implement that manually using the API and events of both igGrid Updating and igCombo.
Please let me know if you need any further information regarding this matter.
actually it would be easier to make combo selection dirty so row had to be updated before moving to next page.
How to change cell value according to combo selection? thanks
I assumed that you are looking for a way to persist row selection rather than the igCombo selection.
Column formatting via templates defines how column cells are displayed in the grid. Formatting operates at the grid rendering phase and doesn't affect the data in the underlying data source. This means that features that operate on the data like Sorting, Filtering, Group By will not consider the formatted cell values because these values are not reflected anywhere.
In your scenario, this means that when the selection is changed the underlying cell value is not modified - just the selected value in the igCombo. When page is changed, new combo editors are rendered and the previously selected values are not persisted (unless your custom logic is applied). For example if the selectionChanged event of the combo is handled so that the new selection is saved in an external source so that it can be retrieved later when the combo is re-created.
pagerRendered: function (evt, ui) { var dataSource = ui.dataSource.recordsForPage(ui.owner.pageIndex()); $.each(dataSource, function (index, row) { //find selected value for this combo so that we can check whether it already exists in the list with selected values var sv = selValueForCombo.find(function(v) { return v.id === "grdlist_" + row.ProductID;}); $("#grdlist_" + row.ProductID).igCombo({ dataSource: comboData, textKey: "Name", valueKey: "Name", width: "200px", autoComplete: true, enableClearButton: false, //if there is a previously selected value set it as selected, otherwise set it to empty initialSelectedItems: [{ value: sv ? sv.selVal : "" }], selectionChanged: function(evt, ui){ //add selection to the selected values for all combos saveComboSelection(evt.target.id,ui.items[0].data.Name ); } }); }); }
I have created a small sample illustrating my suggestion for your reference.
I hope you will find my information helpful.
Thank you for using Infragistics controls.
7271.igGridCellTemplate1Modified.zip