jQuery UI Widgets › Forums › Grid › Need source code or sample code expample
Tagged: column layout, grid in splitter, jqxgrid, jqxsplitter, stretch layout.
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 8 years, 7 months ago.
-
Author
-
Hi Team,
Actually we use jqxGrid through out out project. We divide the whole page as 4 parts by using jqxSplitter, after that within jqxSplitter we display jqxGrid. I think that You well understand my page layout. Within jqxSplitter, we stretch the jqxGrid yes!. problem we facing is whenever we resize the splitter there is some mismatch between splitter and grid. After resize splitter horizantally, the grid wont get stretch. I need some better solution. Please tell me the API list clearly in both jqxSplitter as well jqxGrid.Thanks for your Time. I hope You have the solution. Waiting for your response to this responsive layout design. Thanks again.
Hi seenu,
The following is an example that features jqxGrid inside jqxSplitter: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/integration-with-jqxgrid.htm?light. As you can see, the grid resizes as expected when the splitbar is moved.
And here are links to the API documentations of jqxGrid and jqxSplitter:
- http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm
- http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxsplitter/jquery-splitter-api.htm
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Thanks for Your quick reply.
1) We split whole page as 4 parts by jqxSplitter.
2) Every splitter part have 1 jqxGrid, i mean 4 grids we have.
3) When we load the page initially the grids are same width and same height.
4) The grid don’t have scrollbars horizantally. Grids stretch 100% to the splitter area. We don’t allow the scrollbar here.
5) When we resize the splitter left to right or right to left, we need to maintain the 100% stretch and we dont like to allow the scrollbars horizantally.I seen that your above example have scrollbar. Is there any other solution.?
Hi seenu,
The grid in our example shows horizontal scrollbar, because some of its columns are not visible initially. The grid itself fits 100% of the splitter panel’s width and height. The horizontal scrollbar will not be shown if the column widths are in percentages, e.g.:
$("#jqxgrid").jqxGrid( { width: '100%', height: '100%', source: dataAdapter, columnsresize: true, columns: [ { text: 'Company Name', datafield: 'CompanyName', width: '20%' }, { text: 'Contact Name', datafield: 'ContactName', width: '20%' }, { text: 'Contact Title', datafield: 'ContactTitle', width: '20%' }, { text: 'City', datafield: 'City', width: '20%' }, { text: 'Country', datafield: 'Country' } ] });
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.