Expand Grid into jqwindows

[nico86Participant]

Hi,

I wanted to put grid into a jqwindows.(i have tried into jquery UI dialogbox for some month ago, but same problem)

My grid display when I click on a “GO” button. The size of the grid is defined as a percentage . On the first click all work fine

If I expanded on the fly the size of the jqwindows so the grid is expand … 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..perhaps due to the code $("#jqxwindow" ).remove(); …but how I should proceed.

Thanks

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
$("#jqxwindow" ).remove();  //<div id="jqxwindow"> <div>Header</div> <div>Content</div> </div>
$("#jqxgrid").append('<div id="jqxwindow"> <div>ADMINDAT</div> <div id="jqxgrid_1"></div> </div> ');   //<input type="button" style="margin: 10px;" id="jqxbutton" value="Refresh" />
$("#jqxwindow").jqxWindow({
    height: 300,
    width: 600,
    theme: 'metro',
    showCollapseButton:true
});

$("#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

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:"85%",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){
$('#ajax-loader1').remove();}
});
};

Thank you.

[Peter StoevKeymaster]

Hi nico86,

The problem is indeed in removing, append HTML Elements in your code.

1. To remove widget you should use “destroy”.
2. Your Window’s HTML Structure is incorrect. The Window should have a DIV tag with 2 Nested DIV tags for Header and Content Panels. The content should be inside the Content Panel i.e you should not try to create a widget from the Window’s Content Panel. You should create a widget from a DIV tag inside the Content Panel as in the demos on our website.

Hope this helps.

Best Regards,
Peter Stoev

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

[nico86Participant]

thanks for your response,

I have changed that :
my grid (id=jqxgrid_1) is into a nested is inside a content panels

$("#jqxgrid").append('<div id="jqxwindow"> <div>ADMINDAT</div> <div><div id="jqxgrid_1"></div></div> </div> ');   //<input type="button" style="margin: 10px;" id="jqxbutton" value="Refresh" />
$("#jqxwindow").jqxWindow({
    height: 300,
    width: 600,
    theme: 'metro',
    showCollapseButton:true
});

but the problem is the same….from the second click on “go” button, the grid don’t expand when i expand the jqwindows

for information jqxgrid is juste a simple empty div in my html page.

Also I have try destroy $(“#jqxwindow” ).destroy(); instead remove but with this the windows don’t appears.

Thanks
Nico

[nico86Participant]

no idea for help me ?

Thanks

[Author]

Posts