igGrid with igCombo editor

All described is in 13.2, it is still not expired, so please advise for this particular version

Setting : Grid that has one column with combo editor, both data sources for grid and combo editor are provided dynamically after initialization on the page load.  When data is loaded modal form with grid get opened by clicking button and at that point data sources got assigned and grid  get bind.  Here the snippets for data bind function and part of the relevant grid setting       

function bindMatchGrid() {

            if (pageController && $.isFunction(pageController.uoa)) {

                var uoaData = pageController.uoa(false);

                var uoaExtendedData = transformMatchData(uoaData);

                $('#uoaAuditGrid').igGrid('option', 'dataSourceType', 'json').igGrid('option', 'dataSource', uoaExtendedData).igGrid('dataBind');

                var editor = $('#uoaAuditGrid').igGridUpdating("editorForKey", "AuditName"); // this is just an unsuccessful attempt to obtain combo editor reference 

                var columnSettings = $('#uoaAuditGrid').igGridUpdating("option", "columnSettings");

                $.each(columnSettings, function () {

                    if (this.columnKey === "AuditName") {

                        this.editorOptions.dataSource = pageController.getAvailAudits()

                    }

                })

            }

        }

 

……………………………

{

                            columnKey: 'AuditName',

                            editorType: 'combo',

                            editorOptions: {

                                autoComplete: true,

                                //  dataSource: pageController.getAvailAudits(),

                                allowCustomValue: false,

                                textKey: 'AuditName',

                                valueKey: 'AuditName',

                                showDropDownButton: false,

                                enableClearButton: false,

                                dropDownOnFocus: true,

                                selectionChanged: function (evt, ui) {

                                    var name = ui.items[0].value;

                                    rowID = $("td.ui-iggrid-editingcell").parent().attr("data-id");

                                    var avail = pageController.getAvailAudits();

                                    var set2 = _.find(avail, function (aidit) { return aidit.AuditName == name; });

                                    _.each(pageController.uoa(false), function (uoas) {……….

………………………………………………………………………………………………………………..

 

All works well on the first opening of the form but when data get reload and bindMatchGrid() is called again grid binding works and fresh data is displayed on the grid, but the combo drop down still shows data the was loaded on original page load… if page get manually reload and sequentially data load again then new data set is shown, but if just new data fetched , than drop down not get updated despite the fact that correct data is put into data source on this lines :

                    if (this.columnKey === "AuditName") { 

                        this.editorOptions.dataSource = pageController.getAvailAudits()

                   }

I need the following and I can not find it in the documentation:

1. How to obtain reference to the combo editor of the column with particular key :

I tried this while binding :   var editor = $('#uoaAuditGrid').igGridUpdating("editorForKey", "AuditName");

    It did return null.. if somehow I’ll get reference to combo editor I probably will be able to use this : $(".selector").igCombo("dataBind"); and it might resolve the issue

   2. Also if there is a way before binding starts to reinitialize grid, so it will be clear of any particular data, and then apply binding to the grid and provide data source for the combo.. that what it does now on first page load and it works. 

Thanks

Hello mcseidel , 

Thank you for posting in our forum. 

Initially the editor providers are not instantiated on the page so the related API method (editorForKey) will always return null. Once the grid enters edit mode for the first time all editors are instantiated and the same instances will be used when the grid is rebound (they will not be destroyed and recreated when you call dataBind on the grid). Once the editors are created changes made to the column settings will not be reflected on them.

 So at the moment the following is happening in your scenario:

1.When the page is initially loaded the editors don’t exist yet so the call to editorForKey will return null.  You’re setting new options to the column settings which will get applied once the editors are initialized. As a result the combo’s data source will be applied properly since the first time you enter edit mode for the row the editor will be created with the current column settings, which now contain your dataSource.

2. When the grid is rebound the editors will still exist (they don’t get destroyed when the grid is re-bound) so any additional changes you apply to the column settings will not take affect (they are only used when the editor is first created). As a result the change you apply to the columnSettings will not be reflected in your combo editor.

 

There are two possible solutions:

1. Check if the editor is created. If not then force it to be created (for example by programmatically entering edit mode via startEdit api method)  and  set/get the data source from the editor’s instance.

2. Destroy and recreate the whole grid. In this case everything will be destroyed and you can recreate the grid with the new column settings for your editors. 

The second one might have a bigger performance hit since all widget instances will be destroyed and then created again.  

I’ve attached a sample with the first one for your reference.

If you like the second solution better then refer to the destroy api method:

http://www.igniteui.com/help/api/2013.2/ui.iggrid#methods:destroy

After the grid is destroyed you’d need to initialize it again, for example:  $(“.selector”).igGrid(<newOptions>);

 

Let me know if you have any additional questions.

 

Best Regards,

Maya Kirova

Infragistics, Inc.

http://www.infragistics.com/support

 

 

Maya, thanks for your comprehensive answer.. I actually implemented destroy option before and it works fine .. but change data source option has some issues, despite  similarity to your sample :

function bindMatchGrid() {

if (pageController && $.isFunction(pageController.uoa)) {
var uoaData = pageController.uoa(false);
var uoaExtendedData = transformMatchData(uoaData);
//$('#uoaAuditGrid').igGrid("destroy");
//initUoaAuditGrid();
$('#uoaAuditGrid').igGrid('option', 'dataSourceType', 'json').igGrid('option', 'dataSource', uoaExtendedData) // .igGrid('dataBind');
if ($('#uoaAuditGrid').igGridUpdating("editorForKey", "AuditName") === null || $("#uoaAuditGrid").igGridUpdating("editorForKey", "AuditName")[0].tagName !== "SPAN") {
// editors are not initialized yet. Entering edit mode will initialize the editors.
$("#uoaAuditGrid").igGridUpdating("startEdit", 0, 0);
$("#uoaAuditGrid").igGridUpdating("endEdit");
}
var editor = $('#uoaAuditGrid').igGridUpdating("editorForKey", "AuditName");
editor.igCombo("option", "dataSource", pageController.getAvailAudits());
//var columnSettings = $('#uoaAuditGrid').igGridUpdating("option", "columnSettings");
//$.each(columnSettings, function () {
// if (this.columnKey === "AuditName") {
// this.editorOptions.dataSource = $.grep(pageController.getAvailAudits(), function (a) {
// return (a.completed == 1)
// });
// }
//})
}
}

on the first run after page load .. even after those two lines got executed : 

$("#uoaAuditGrid").igGridUpdating("startEdit", 0, 0);
$("#uoaAuditGrid").igGridUpdating("endEdit");

the  $("#uoaAuditGrid").igGridUpdating("editorForKey", "AuditName")[0].tagName  is returning 'TABLE' and editor.igCombo("option", "dataSource", pageController.getAvailAudits()); cause : 

jquery-1.9.1.js:507 Uncaught Error: cannot call methods on igCombo prior to initialization; attempted to call method 'option'…

if I would close the form and reopen it again that would do the same… but if I would try to open drop down , although it will be empty because of the error.. but than next close open cycle it will work ( $("#uoaAuditGrid").igGridUpdating("editorForKey", "AuditName")[0].tagName will return 'SPAN', data source get assigned.. and drop down has all correct items ) May be you have some thoughts why it might happened.. seems like sequence that I have exactly as in your sample.. main grid get data source.. than editor is getting it.. 

Also what would be a method to find out if grid were destroyed and needed to be initialized again..  

Hello mcseidel , 

Might be a timing issue. Since the grid’s records are all re-rendered when the data source is changed you might be trying to enter edit mode for a row that is not yet rendered or you may be trying to get the editor before it has been fully initialized.

I suggest you debug it to see what is available at each step. 

As for checking if the grid has been destroyed. By default all widget instances are stored via  jQuery.data() with the widget's full name as the key and get removed when the widget is destroyed.

So $(“.selector”).data(“igGrid”) will return the widget instance if there’s an igGrid instance on the related element or it will return undefined if there is no such widget (it's not initialized yet or it has been destroyed).

 Let me know if there is anything else I can help you with.

 Best Regards,

Maya Kirova

Infragistics, Inc.

http://www.infragistics.com/support

 

 

 

 

Maya, you are THE BEST.. thank you.