jQWidgets Forums

jQuery UI Widgets Forums Grid autoresizecolumns on bindingcomplete

This topic contains 10 replies, has 5 voices, and was last updated by  admin 9 years, 10 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • autoresizecolumns on bindingcomplete #12720

    guyradford
    Member

    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

    autoresizecolumns on bindingcomplete #12721

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    autoresizecolumns on bindingcomplete #12724

    guyradford
    Member

    Hi 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

    autoresizecolumns on bindingcomplete #12726

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    autoresizecolumns on bindingcomplete #12727

    guyradford
    Member

    Hi 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

    autoresizecolumns on bindingcomplete #12730

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    autoresizecolumns on bindingcomplete #12805

    guyradford
    Member

    Thank 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 Stoev

    Hi 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 definition

    Thank you

    Guy

    autoresizecolumns on bindingcomplete #12810

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    autoresizecolumns on bindingcomplete #12859

    ekaperintis
    Participant

    Hii Peter your source code it’s work ,,,, good is the best master

    autoresizecolumns on bindingcomplete #73623

    nirav
    Participant

    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

    autoresizecolumns on bindingcomplete #73625

    admin
    Keymaster

    Hi nirav,

    You can use server paging and load your data on demand.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.