Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Michael Seidel
8920
igGrid with igCombo editor
posted

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

Parents
  • 29417
    Offline posted

    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://ko.infragistics.com/support

     

     

    igGridWithCombo.zip
Reply Children