jQuery UI Widgets Forums Grid Dynamically change grid width

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • Dynamically change grid width #51348

    maximus2014
    Participant

    Hi all,

    I am using jqxgrid to display my data. I’ve set the width of my grid as ‘100%’.Currently I am displaying all my datas so that the grid container is filled. Now I’ve got a a requirement that some fields have to be hidden on page load. On doing so there are blank spaces in the grid.I would like to set the width of the grid to the total width of displayed fields and on unhididng the hidden fields the grid width has to expand accordingly. Please help me in doing this feature. Thanks in advance.

    Dynamically change grid width #51351

    Peter Stoev
    Keymaster

    Hi maximus2014,

    The simplest solution would be to set the “width” property dynamically. Example: http://jsfiddle.net/jqwidgets/Tmc7t/1/

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Dynamically change grid width #51446

    maximus2014
    Participant

    Thank Stoev for the valuable information.

    I would also like to know whether we can adjust width of the column based on the length of the data in the column. Now I’ve been asked to set the width of a particular column so that entire data in each cell of the column is visible. Thanks in advance.

    Dynamically change grid width #51448

    Peter Stoev
    Keymaster

    Hi maximus2014,

    By using the Grid’s setcolumnproperty method, you can update the column’s width to a value of your choice. There’s also a method called “autoresizecolumns” which you can find in the API Docs which tries to automatically adjust the columns width based on their content.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Dynamically change grid width #51459

    maximus2014
    Participant

    Hi Stoev, I am using ‘cellsrenderer’ method inorder to highlight rows based on the database value.I tried the “autoresizecolumns” method in the ‘binding complete event. This resulted in error in the cellsrenderer method and grid didn’t display. In my application cellsrenderer is very important. Setcolumnproperty is inappropriate for me as I can’t set width to a specific value. Please help.
    Thanks in advance.

    Dynamically change grid width #51462

    Peter Stoev
    Keymaster

    Hi maximus2014,

    You can check you cellsrenderer implementation if it gives error. You can also check whether you use the latest version of jQWidgets.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Dynamically change grid width #51464

    maximus2014
    Participant

    Thank you Stoev, I am using jqxgrid version 3.1.0. Here is my cellsrenderer code :

    var cellsrenderer = function (row, column, value, defaultHtml, columnSettings, rowData) {
    var element = $(defaultHtml);
    console.log(element)
    if (rowData.color != ”) {
    element.css({ ‘background-color’: rowData.color, ‘width’: ‘100%’, ‘height’: ‘100%’, ‘margin’:’0px’, ‘padding’:’7px 5px 5px 5px’});
    return element[0].outerHTML;
    }
    else {
    element.css({‘width’: ‘100%’, ‘height’: ‘100%’, ‘margin’:’0px’, ‘padding’:’7px 5px 5px 5px’});
    }
    return element[0].outerHTML;
    };
    I am receiving the error ‘TypeError: rowData is undefined’
    Thanks in advance.

    Dynamically change grid width #51466

    Peter Stoev
    Keymaster

    Hi maximus2014,

    Obviously, the problem is that you don’t use the latest version.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Dynamically change grid width #51498

    maximus2014
    Participant

    Thanks Stoev.

    Dynamically change grid width #71194

    jessiema
    Participant

    Hello,

    I just started working with jqwidgets and was playing with the jsfiddle in the second post ( http://jsfiddle.net/jqwidgets/Tmc7t/1/). I tried to remove all column width (so the width is set automatically) and pressed “set width” button… you will see the right two columns become empty. I guess when the grid redraws, it believes those two columns are not in the view so they don’t get rendered? Is there a way to fix this?

    Thanks in advance,

    Dynamically change grid width #71244

    jessiema
    Participant

    I tried setting width as percentage and got the same issue (columns on the right has no data). Start scrolling and the data appear.

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

You must be logged in to reply to this topic.