Issue with add combobox in toolbar of grid

[manoj.singhParticipant]

Hi,

I am using jqxgrid, and I have added combobox in toolbar through following code options:

showtoolbar: true,
rendertoolbar: function (toolbar) { }

When I select any option of combo box script render this error in browser console.

Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.

I have search for solution on your technical support forum, but no luck!!!!!!

Can you please have a look and make my day.

[Peter StoevKeymaster]

Hi manoj.singh,

I don’t find a problem with that. Look at this sample as a solution: http://jsfiddle.net/jqwidgets/KLek7/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[manoj.singhParticipant]

Hi Peter,

Here is my sample code.
When I select option of combobox, error showing in console

——————————–

$(“#jqxgridS”).jqxGrid(
{
width: ‘99.9%’,
autoheight:true,
source: dataadapterS,
theme: ‘energyblue’,
pageable: true,
sortable: false,
pagesize:10,
altrows: true,
groupable: false,
enablemousewheel: false,
virtualmode: true,
pagermode: ‘simple’,
rendergridrows: function () {
return dataadapterS.records;
},

rowdetails: true,
initrowdetails: initrowdetails,

showtoolbar: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“<div style=’margin:3px 10px; height:25px;’></div>”);
toolbar.append(container);
container.append(‘<div style=”float:left; padding-top:5px; font-weight:bold;”>Summary Report: </div>’);
container.append(‘<div id=”columnchooser” style=”float:left; margin-left:5px;”></div>’);

var sourceOptions = [{ label: ‘Aircraft Type, Model’, value: ‘aircraft_type’ },
{ label: ‘Region Current Operator’, value: ‘current_operator_region’ },
{ label: ‘Region (lessor/owner)’, value: ‘lessor_owner_region’ },
{ label: ‘Current Operator’, value: ‘current_operator’ },
{ label: ‘Lessor/Owner’, value: ‘lessor_owner’ }];

$(“#columnchooser”).jqxDropDownList({source:sourceOptions, autoDropDownHeight: true, selectedIndex: 0, width: 200, height: 25});

$(“#columnchooser”).on(‘select’, function (event){

sumGroupMode = $(this).val();

sourceS =
{
datatype: “json”,
url: ‘<?php echo $this->Html->url(array(“controller” => “fleets”, “action” => “get_summary_list”, “admin”=>”true”));?>’,
data: { getGroupMode:sumGroupMode
},
root: ‘Rows’,
cache: false,
id: sumGroupMode,
beforeprocessing: function(data)
{
sourceS.totalrecords = data[0].TotalRows;
}
};
dataadapterS = new $.jqx.dataAdapter(sourceS);

$(“#jqxgridS”).jqxGrid({source: dataadapterS});
});

},
columns: [{ text: ‘Aircraft Type’, datafield: ‘aircraft_type’, width: ‘16%’ },
{ text: ‘Aircraft Model’, datafield: ‘aircraft_model’, width: ‘15%’ },
{ text: ‘Count’, datafield: ‘countData’, width: ‘11%’ },
{ text: ‘Count with values’, datafield: ‘countValues’, width: ‘14%’ },
{ text: ‘∑ CMV’, datafield: ‘sumCMValues’, width: ‘11%’ },
{ text: ‘Avg. CMV’, datafield: ‘avgCMValues’, width: ‘11%’ },
{ text: ‘∑ BV’, datafield: ‘sumBValue’, width: ‘11%’ },
{ text: ‘Avg. BV’, datafield: ‘avgBValue’, width: ‘11%’ }]
});

——————-

[Peter StoevKeymaster]

Hi manoj.singh,

Why do you use the same dataAdapter instance for binding the Grid? Isn’t it suppose to use a new one? Also, if you change the source of a Grid while its in the middle of update operation, you will most probably encounter the message which you already encounter. The Grid’s properties and methods should be set whenever the Grid’s binding is completed, which means within bindingcomplete callback function or within the Grid’s ready callback function. Finally, I suggest you to look at my working sample which uses the latest version of jqxGrid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[manoj.singhParticipant]

Thanks Peter, You give me the right direction to achieve my task goal.

[manoj.singhParticipant]

Hello Peter,

I have done changes suggested by you, but no luck!!!

$(“#columnchooser”).jqxDropDownList({source:sourceOptions, autoDropDownHeight: true, selectedIndex: 0, width: 200, height: 25});
$(“#columnchooser”).on(‘select’, function (event){ /*** some code ***/ });

I have added above mentioned lines in grid’s ready function, but not working and than added on bindcompleted callback function, again not working.

Can you please do let me know how to implement above mentioned code.

My goal is : Add combobox in grid’s toolbar and on value selection of combo , grid will be reload with new data from DB.

Please suggest!!!!!!!!

[Peter StoevKeymaster]

Hi manoj.singh,

The event’s name is “bindingcomplete” not “bindingcompleted”. The “ready” callback is called just once – with the initial loading of the Grid and is never called after that.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[manoj.singhParticipant]

Hello Peter,

I apologize for my spelling mistake.

I am using following code and its not working for me :
———-

$(“#jqxgridS”).bind(‘bindingcomplete’, function (event) {

var sourceOptions = [{ label: ‘Aircraft Type, Model’, value: ‘aircraft_type’ },
{ label: ‘Region Current Operator’, value: ‘current_operator_region’ },
{ label: ‘Region (lessor/owner)’, value: ‘lessor_owner_region’ },
{ label: ‘Current Operator’, value: ‘current_operator’ },
{ label: ‘Lessor/Owner’, value: ‘lessor_owner’ }];

$(“#columnchooser”).jqxDropDownList({source:sourceOptions, autoDropDownHeight: true, selectedIndex: 0, width: 200, height: 25});
$(“#columnchooser”).on(‘select’, function (event){ /*** some code ***/ });

});

And in grid i m using following code for toolbar.
————————————————–
showtoolbar: true,
rendertoolbar: function (toolbar) {

var me = this;
var container = $(“<div style=’margin:3px 10px; height:25px;’></div>”);
toolbar.append(container);
container.append(‘<div style=”float:left; padding-top:5px; font-weight:bold;”>Summary Report: </div>’);
container.append(‘<div id=”columnchooser” style=”float:left; margin-left:5px;”></div>’);

}

Please suggest!!!!

[Author]

Posts