jQuery UI Widgets › Forums › Grid › Dynamically change grid width
Tagged: html grid, html5 grid, javascript grid, javascript grid control, jquery grid width, jquery ui grid, jqwidgets grid, jqxgrid width
This topic contains 10 replies, has 3 voices, and was last updated by jessiema 9 years, 9 months ago.
-
Author
-
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.
Hi maximus2014,
The simplest solution would be to set the “width” property dynamically. Example: http://jsfiddle.net/jqwidgets/Tmc7t/1/
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThank 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.
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 StoevjQWidgets Team
http://www.jqwidgets.comHi 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.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 StoevjQWidgets Team
http://www.jqwidgets.comThank 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.Hi maximus2014,
Obviously, the problem is that you don’t use the latest version.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks Stoev.
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,
I tried setting width as percentage and got the same issue (columns on the right has no data). Start scrolling and the data appear.
-
AuthorPosts
You must be logged in to reply to this topic.