Current filter:
                                You should refresh the page.
                                  • Hello,

                                    I would like to know if there is an event when the datasource is loaded in the grid.

                                    I am loading the datasource at runtime using:
                                    var dataGrid = $('#gridContainer').dxDataGrid('instance');
                                    dataGrid.option("dataSource", JSON.parse(data.DataOut));

                                    If immediately after I need to set some columnOptions but it does not work.

                                    dataGrid.columnOption("Sku", "caption", "Item");
                                    dataGrid.columnOption("UnitCost", "precision", "2");

                                    I have to set the columns using an event like OnClick to set the columns correctly.

                                    Is there way to be notified when the datasource loading is completed so that I can set the columns correctly without having the user to click a button?  Of course I can wait a few moments but I rather use an event.

                                    Thanks for your support!

                                    Martin Leclerc

                                1 Solution

                                Creation Date Importance Sort by


                                dxDataGrid provides the customizeColumns function. It will be raised after data is loaded and you can customize columns there. Otherwise, use the onContentReady handler for this task. For example:

                                var dataGrid = $('#gridContainer').dxDataGrid('instance'); var dataLoaded = true; dataGrid.option("dataSource", JSON.parse(data.DataOut)); .... onContentReady: function(e){ if(dataLoaded) { dataLoaded = false; e.component.beginUpdate(); e.component.columnOption("Sku", "caption", "Item"); e.component.columnOption("UnitCost", "format", "{ precision: 2 }"); e.component.endUpdate(); } } // or customizeColumns: function(cols){ cols.forEach(function(column){ if(column.dataField == "Sku") column.caption = "Item"; if(column.dataField == "UnitCost") column.format = { precision: 2 }; }) }

                                Note that the precision option is obsolete and it's necessary to use the format option instead.

                                Let us know if these suggestions help.

                                • Martin Leclerc 05.03.2017

                                  Hello Artem,

                                  Thanks for your quick reply.

                                  The customizedColumns handler worked.

                                  But the onContentReady handler did not work for me.  Maybe because the grid already had columns defined under different datafield names. Am I right to assume that?

                                  Your comment about the precision option has been noted and code updated.

                                  Thanks again for your support.

                                  Martin Leclerc

                                • Alessandro (DevExpress Support) 05.04.2017


                                  Yes, I believe that the customizeColumns event is more appropriate for this purpose. Please let me know if you have any issues with it. We are always ready to help you.

                                • Martin Leclerc 05.04.2017

                                  Hello Alessandro,

                                  OK, I will use customizeColumns for my project.

                                  Thanks for your help!

                                  Have a great day!

                                  Martin Leclerc