jQWidgets Forums
jQuery UI Widgets › Forums › Grid › autoresizecolumns on bindingcomplete
Tagged: datagrid control
This topic contains 10 replies, has 5 voices, and was last updated by admin 9 years, 10 months ago.
-
Author
-
Hi
i am having an issue getting the grid to auto resize the column width to the data on initial load.
the bindingcomplete event is fired before the grid is populated and there are no other documented event for after the data is loaded.
Is there an even that is fire after the data has been loaded into the grid that can be used to then call autoresizecolumns? or is there another way to auto resize the columns based on the loaded data.
all my data and columns are loaded via ajax, that all works fine. i just cant get the colums to auto resize
thank you
Guy
Hi Guy,
The ‘bindingcomplete’ event is fired after the Grid is populated, when the Grid is initialized in the way demonstrated in our samples and help documentation. If you have an issue in your scenario, please post a sample which demonstrates it and we will test it.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter
The bindingcomplete appears to fire once the grid has been build but not popuplated.
here is my code
$("#" + tabId + ' .Grid').bind('bindingcomplete', function () { console.log('bindingcomplete'); alert('bc'); $("#" + tabId + ' .Grid').jqxGrid('autoresizecolumns', 'cells'); }); $("#" + tabId + ' .Grid').jqxGrid( { width: '100%',// width:1066,// height: 450, height: '100%', source: dataAdapter, theme: theme, pageable: true, autoheight: false, virtualmode: true, sortable: true, sorttogglestates: 1, altrows: true,// enabletooltips: true, editable: false, columnsresize: true, pagesize: 50, pagesizeoptions: ['20', '50', '100'], rendergridrows: function () { return dataAdapter.records; }, showtoolbar: true,// selectionmode: 'multiplecellsextended', columns: [ { text: '', datafield: '', width: 100 } ] }); });
when you preview the code the alert box appears you can see the grid is empty and the headers, then once the alert os closed the cells are populated and the grid resizes to the wrong sizes.
when i page next and the next lot of data is loaded the autoresizecolumns is fired correctly
thank you
guy
Hi Guy,
1. The rendergridrows should point to params.data where params is a parameter passed to the function:
2. The ‘bindingcomplete’ event is raised when the binding operation is completed. If that’s not your case, then you most probably rebind the Grid at some point or do something else. As far as I can see from the code, you have one empty column without datafield i.e you most probably set the columns property at a later point. At the point your binding operation is completed, your columns array may still be empty, because you didn’t set the columns property, so there’s nothing to be resized there.Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter
the colums are set via ajax via the dataAdapter object
var url = "/ajax/loadData.php"; // prepare the data var source = { data :{ values: TableValues, first: true }, datatype: "json", root: "Rows",// id: '__PK', url: url, beforeprocessing: function (data) { //console.log(data.TotalRows); source.totalrecords = data.TotalRows; if (data.DataFields){ source.datafields = data.DataFields; source.data.first = false; }// console.log(source.data); }, sort: function () { // update the grid and send a request to the server. $("#" + tabId + ' .Grid').jqxGrid('updatebounddata'); } }; settings = { processData: function(data){ //console.log(source.data); //console.log(data); data.first = source.data.first; //console.log('processData'); }, downloadComplete: function (data, status, xhr) { //console.log('downloadComplete'); if (data.Columns) $("#" + tabId + ' .Grid').jqxGrid({ columns: data.Columns }); }, loadComplete: function (data) { //console.log('loadComplete'); //if (data.Columns) //$("#" + tabId + ' .Grid').jqxGrid('autoresizecolumns'); }, loadError: function (xhr, status, error) { } }; var dataAdapter = new $.jqx.dataAdapter(source, settings);
This works perfectly, the data loads.
if you run code with alert in ‘bindingcomplete’ i see all the columns headers shown correctly, but with empty cells. the widths look correct. once you click on on the alter, the cell populate, and then resize to the small size fitting them all with in the width.
I can PM you a link to the dev site to see the code and behaviour.
Guy
Hi Guy,
If you would like from us to test your scenario, you can send a sample which illustrates it to support@jqwidgets.com.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThank you for replying to my private message, I have bought it back online so others can gain…
Hi Guy,
The “bindingcomplete” event is raised correctly in the code. It is raised after the Grid’s rendering functions are called. The problem is that the execution of the rendering functions takes some time. You may add a timer in your bindingcomplete and after some small delay, call the Grid’s methods.
Best Regards,
Peter StoevHi Peter
Thank you
This feels like a bit of a hack, what is the correct way to auto resize the columns upon load? I cant be the first person to want to do this and all your examples use a button.
Using a timer feels a bit hit and miss…if the browser is slow then my timer may be to short and for quick browsers the timeout will be noticeable.
I feel that there should be one of the following:
1) an even fired after rendering has completed.
2) a setting to auto resize columns to data
3) a * or auto option in the column definitionThank you
Guy
Hi Guy,
If the Grid is used in the way as shown in our examples, it is OK to call the method in the bindingcomplete handler. However, in your scenario you load your columns after the Grid is initialized and that is a custom scenario where we can’t suggest you a workaround.
Here’s a working sample:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); var url = "../sampledata/orders.xml"; // prepare the data var source = { datatype: "xml", datafields: [ { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' }, { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' }, { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' }, { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' }, { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' }, { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' } ], root: "entry", record: "content", id: 'm\\:properties>d\\:OrderID', url: url, pager: function (pagenum, pagesize, oldpagenum) { // callback called when a page or page size is changed. } }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").on('bindingcomplete', function () { $("#jqxgrid").jqxGrid('autoresizecolumns'); }); $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, selectionmode: 'multiplerowsextended', sortable: true, pageable: true, autoheight: true, columnsresize: true, columns: [ { text: 'Ship Name', datafield: 'ShipName', width: 25 }, { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' }, { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' }, { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }, { text: 'Ship City', datafield: 'ShipCity', width: 10 }, { text: 'Ship Country', datafield: 'ShipCountry'} ] }); $('#events').jqxPanel({ width: 300, height: 300, theme: theme }); $("#jqxgrid").bind("pagechanged", function (event) { $("#eventslog").css('display', 'block'); if ($("#events").find('.logged').length >= 5) { $("#events").jqxPanel('clearcontent'); } var args = event.args; var eventData = "pagechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + "</div>"; $('#events').jqxPanel('prepend', '<div class="logged" style="margin-top: 5px;">' + eventData + '</div>'); // get page information. var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation'); $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount); }); $("#jqxgrid").bind("pagesizechanged", function (event) { $("#eventslog").css('display', 'block'); $("#events").jqxPanel('clearcontent'); var args = event.args; var eventData = "pagesizechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + ", Old Page Size: " + args.oldpagesize + "</div>"; $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>'); // get page information. var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation'); $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount); }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> <div id="eventslog" style="display: none; margin-top: 30px;"> <div style="float: left;"> Event Log: <div style="border: none;" id="events"> </div> </div> <div style="float: left;"> Paging Details: <div id="paginginfo"> </div> </div> </div> </div></body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHii Peter your source code it’s work ,,,, good is the best master
Hi Peter
Actually, my problem is that i return string data to bind jqxgrid is 4mb size ,that takes 25 seconds to bind grid. but when autoresizecolumn method call
then it takes 2 to 3 minitues to load grid.can you give me some suggestion to overcome to load jqxgrid
Hi nirav,
You can use server paging and load your data on demand.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.