jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 11 months ago.

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

Author

Grid same height as a splitter Posts

July 7, 2014 at 11:30 pm Grid same height as a splitter #56856

Participant

Hi,
I’m trying to build a splitter containing a grid, and I want the grid to fit the splitter height and width.
I tried to set the splitters as follows:

$(‘#mainSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, panels: [{ size: 200 }] });
$(‘#rightSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘horizontal’, panels: [{ size: ‘52%’, collapsible: false }] });

the grid is inside “rightSplitter” and its settings are:

$("#jqxgrid").jqxGrid(
            {
                
				width: '100%',
				height: '100px',
                source: dataAdapter,
				showfilterrow: true,
                filterable: true,
                sortable: true,
                columnsresize: true,
				pageable: true,
				//filtermode: 'excel',
				localization: getLocalization('en'),
				autoshowfiltericon: true,
				
				showstatusbar: true,
                renderstatusbar: function (statusbar) {
                    // appends buttons to the status bar.
                    var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                    var esporta = $("<div style='float: right; margin-left: 5px;'><span style='margin-left: 4px; position: relative; top: 0px;'>Esporta</span></div>");
                    var stampa = $("<div style='float: right; margin-left: 5px;'><span style='margin-left: 4px; position: relative; top: 0px;'>Stampa</span></div>");
                    container.append(esporta);
                    container.append(stampa);
                    statusbar.append(container);
                    esporta.jqxButton({  width: 60, height: 20 });
                    stampa.jqxButton({  width: 65, height: 20 });
                    
                    // esporta
                    esporta.click(function (event) {
                        $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid'); 
                    });
                    // stampa
                    stampa.click(function (event) {
                        var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
                		var newWindow = window.open('', '', 'width=800, height=500'),
                		document = newWindow.document.open(),
               			pageContent =
                    		'<!DOCTYPE html>\n' +
                    		'<html>\n' +
                    		'<head>\n' +
                    		'<meta charset="utf-8" />\n' +
                    		'<title>Stampa</title>\n' +
                    		'</head>\n' +
                    		'<body>\n' + gridContent + '\n</body>\n</html>';
                			document.write(pageContent);
                			document.close();
                			newWindow.print();
                   			 });
                   
               			 },
				
                columns: [
                  { text: 'id', datafield: 'id', filtertype: 'textbox', width: 100 },
				  { text: 'Codice', datafield: 'codice', filtertype: 'textbox', width: 100 },
                  { text: 'Nome', datafield: 'nome', filtertype: 'textbox', width: 250 },
                  { text: 'Disponibilità', datafield: 'disponibilita', filtertype: 'checkedlist', filterable: true, width: 180 },
                  { text: 'Stato', datafield: 'stato', filtertype: 'checkedlist', filterable: true, width: 120 },
                  { text: 'Localita', datafield: 'localita', filtertype: 'textbox', minwidth: 120 }
              ],
			  			ready: function () {
                    		$('#jqxgrid').jqxGrid('hidecolumn', 'id');
							addfilter();
							//ricarica(1,19);
                		},
            });'

But the grid is shown as a line, unless I set the height parameter in pixels and not with a percentage.
Can you help me?
thanks

July 8, 2014 at 3:27 am Grid same height as a splitter #56860

Peter Stoev

Keymaster

Hi joyce973,

We have example with Grid Inside Splitter: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/integration-with-jqxgrid.htm?arctic. I would suggest you to follow the same approach.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

July 8, 2014 at 5:35 am Grid same height as a splitter #56865

joyce973

Participant

Thank you, but what’s wrong in my code? I can’t see that. I’ve noticed that there is no paging in yours. Is this the reason?
Another question, please: is there a way to autosize the splitter box according to the grid height, dynamically?
thank you again
Antonio

July 8, 2014 at 5:37 am Grid same height as a splitter #56866

Peter Stoev

Keymaster

Hi joyce973,

I cannot tell what’s wrong in your code due to the reason that I see only part of it. If you’d like to provide a sample, then please use http://jsfiddle.net/ for that purpose. Regarding your second question: In general, it is vice versa, the Grid’s Size should depend on its Container’s size so I suppose that the answer of your question is no or at least I would not try that.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.