Grid and dialog box jquery UI

[nico86Participant]

I wanted to put grid in a jquery UI dialog box. My grid display when I click GO. The size of the grid is defined as a percentage . On the first click all works

If I expanded on the fly the size of the dialog box so the grid is growing … it’s perfect

Then I closed the box … and click the GO button. The grid displays correctly

Then I decided to expand the dialog box . this is that there is a problem, the outline of the grid seems to expand. (id: wrapperjqxgrid_1 ) but not the rest of the grid.

Where is the problem coming..I try to use ‘refresh’ method but doesn’t works. how I should proceed.
jsfiddle doesn’t display jquery UI dialog box.

Thank you.

$("#go").click(function()
	{var items = $("#jqxtable").jqxListBox('getSelectedItems');
	 var pan = $("#jqxpat").jqxListBox('getSelectedItems');
	 var panel= items[0].label;
	 var patid= pan[0].label;
	var run_dis="display_"+panel;
	eval(run_dis+"()"); });

function display_ADMINDAT(){
var items = $("#jqxtable").jqxListBox("getSelectedItems");
var pan = $("#jqxpat").jqxListBox("getSelectedItems");
var panel= items[0].label;
var patid= pan[0].label;
$.ajax({
type : 'POST', // envoi des données en GET ou POST
url : 'http:'+server_sp+'/Coding/VISUALIZER/display_panel',
data : 'product='+product+'&study='+study+'&lib='+lib+'&panel='+panel+'&patid='+patid,
dataType : 'json',
beforeSend : function() { // traitements JS à faire AVANT l envoi
$("#jqxgriddiv_1" ).dialog().remove();
$("#jqxgrid").append('<div id="jqxgriddiv_1" > <div id="jqxgrid_1" style="border:1 px solid red" ></div>  <div>');   //<input type="button" style="margin: 10px;" id="jqxbutton" value="Refresh" />
$("#jqxgriddiv_1" ).dialog({title : "ADMINDAT",height: 200,width: 1000});
$("#go").after('<span id="ajax-loader1"><img style="margin-top:70px;margin-left:190px;height:18px;position:absolute" src="'+web_path_p+car_b+'Librairies'+car_b+'Images'+car_b+'ajax-loader2.gif" alt="image du loader" /> </span');},
success :  function(data){ // traitements JS à faire APRES le retour d ajax-search.php
$("#jqxgrid_1").jqxGrid('refresh')
var resu= eval(data); 
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: "FLAG_", type: 'string' },{ name: "CT_RECID", type: 'string' },{ name: "ENTRY_DA", type: 'string' },{ name: "STATUS", type: 'string' },{ name: "ENTRY_ID", type: 'string' },{ name: "MERGE_DA", type: 'string' },{ name: "STUD_ID", type: 'string' },
{ name: "COUN_ID", type: 'string' },{ name: "CENT_ID", type: 'string' },{ name: "PATID_ID", type: 'string' },{ name: "PATIDENT", type: 'string' },{ name: "VISIT", type: 'string' },{ name: "VISITREP", type: 'string' },{ name: "PAGENO", type: 'string' },
{ name: "PAGEREP", type: 'string' },{ name: "DADM", type: 'string' },{ name: "MADM", type: 'string' },{ name: "YADM", type: 'string' },{ name: "ADMDAT", type: 'string' },{ name: "ADMDATC", type: 'string' },{ name: "DADMSP", type: 'string' },
{ name: "MADMSP", type: 'string' },{ name: "YADMSP", type: 'string' },{ name: "ADMSPDAT", type: 'string' },{ name: "ADMSPDATC", type: 'string' },{ name: "INTERTRT", type: 'string' },{ name: "PBLANK_D", type: 'string' },],
pager: function (pagenum, pagesize, oldpagenum) {
},
localdata: resu
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid_1").jqxGrid(
{
width: "90%",height:"80%",rowsheight : 15,pageable: true,pagesizeoptions: ['5', '10', '20', '30'],pagesize: 10,
source: dataAdapter,columnsresize: true,enabletooltips:true,sortable: true,altrows: true,theme: 'metro',
columns: [
{ text: "FLAG_", datafield: "FLAG_", width: 100, editable: false},
{ text: "CT_RECID", datafield: "CT_RECID", width: 100, editable: false},
{ text: "ENTRY_DA", datafield: "ENTRY_DA", width: 100, editable: false},
{ text: "STATUS", datafield: "STATUS", width: 100, editable: false},
{ text: "ENTRY_ID", datafield: "ENTRY_ID", width: 100, editable: false},
{ text: "MERGE_DA", datafield: "MERGE_DA", width: 100, editable: false},
{ text: "STUD_ID", datafield: "STUD_ID", width: 100, editable: false},
{ text: "COUN_ID", datafield: "COUN_ID", width: 100, editable: false},
{ text: "CENT_ID", datafield: "CENT_ID", width: 100, editable: false},
{ text: "PATID_ID", datafield: "PATID_ID", width: 100, editable: false},
{ text: "PATIDENT", datafield: "PATIDENT", width: 100, editable: false},
{ text: "VISIT", datafield: "VISIT", width: 100, editable: false},
{ text: "VISITREP", datafield: "VISITREP", width: 100, editable: false},
{ text: "PAGENO", datafield: "PAGENO", width: 100, editable: false},
{ text: "PAGEREP", datafield: "PAGEREP", width: 100, editable: false},
{ text: "DADM", datafield: "DADM", width: 100, editable: false},
{ text: "MADM", datafield: "MADM", width: 100, editable: false},
{ text: "YADM", datafield: "YADM", width: 100, editable: false},
{ text: "ADMDAT", datafield: "ADMDAT", width: 100, editable: false},
{ text: "ADMDATC", datafield: "ADMDATC", width: 100, editable: false},
{ text: "DADMSP", datafield: "DADMSP", width: 100, editable: false},
{ text: "MADMSP", datafield: "MADMSP", width: 100, editable: false},
{ text: "YADMSP", datafield: "YADMSP", width: 100, editable: false},
{ text: "ADMSPDAT", datafield: "ADMSPDAT", width: 100, editable: false},
{ text: "ADMSPDATC", datafield: "ADMSPDATC", width: 100, editable: false},
{ text: "INTERTRT", datafield: "INTERTRT", width: 100, editable: false},
{ text: "PBLANK_D", datafield: "PBLANK_D", width: 100, editable: false},
]
});
},
complete : function(data){
$("#jqxgrid_1").jqxGrid('refresh')
$('#ajax-loader1').remove();}
});
};

[nico86Participant]

I swapped screenshoot 2 and 3. sorry

[Peter StoevKeymaster]

Hi nico86,

We are unable to test this scenario with the provided portions of code. I suggest you to use jqxWindow.

Best Regards,
Peter Stoev

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

[nico86Participant]

could you just try to put a litle jqxgrid in a dialog box to see if you are the same problem.
IF i have the time i try your jqwindows but i can’t at this time

THanks

[Author]

Posts