Expand grid into jqwindows - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angular grid, Angular window, destroy, dialog, grid, grid in window, jquery dialog, jquery grid, jquery window, jqxgrid, jqxGrid in jqxWindow, jqxwindow, remove, window

This topic contains 2 replies, has 2 voices, and was last updated by nico86 9 years, 2 months ago.

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

Author

Expand grid into jqwindows Posts

November 4, 2015 at 2:01 pm Expand grid into jqwindows #77754

nico86

Participant

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
http://www.hostingpics.net/viewer.php?id=476530Capture1.jpg
If I expanded on the fly the size of the jqwindows so the grid is expand … it’s perfect
http://www.hostingpics.net/viewer.php?id=874966Capture2.jpg

Then I closed the box … and click again on the GO button. The grid displays correctly
http://www.hostingpics.net/viewer.php?id=944934Capture3.jpg

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. (see difference betwwen screen 2 and screen 4)
http://www.hostingpics.net/viewer.php?id=736298Capture4.jpg

Where is the problem coming..perhaps due to the code $(“#jqxwindow” ).remove() because all wrk fine the first time…but how I should proceed. I tried with destroy instead of remove but here the grid nerver appears.

Thanks.
Nicolas.

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" ).remove(); 
$("#output").after('<div id="jqxgriddiv_1" > <div>Header</div> <div><div id="jqxgrid_1"></div><div>  </div>');
$("#jqxgriddiv_1" ).jqxWindow({title : "ADMINDAT",height: 250,maxWidth: 1900,width: 1000,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: "98%",height:"88%",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();}
});
};

November 4, 2015 at 3:14 pm Expand grid into jqwindows #77759

Dimitar

Participant

Hi Nicolas,

We recommend initializing the window and grid once and then only refreshing the data of the grid, not removing the widgets from the DOM each time.

If you wish to follow your approach, however, please try the following possible solution:

var windowInitialized = false;
var gridInitialized = false;

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
            if (gridInitialized === true) {
                $('#jqxgrid_1').jqxGrid('destroy');
            }
            if (windowInitialized === true) {
                $("#jqxgriddiv_1").jqxWindow('destroy');
            }
            $("#output").after('<div id="jqxgriddiv_1" > <div>Header</div> <div><div id="jqxgrid_1"></div><div>  </div>');
            $("#jqxgriddiv_1").jqxWindow({
                title: "ADMINDAT",
                height: 250,
                maxWidth: 1900,
                width: 1000,
                theme: 'metro',
                showCollapseButton: true,
            });
            windowInitialized = 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: "98%",
                height: "88%",
                rowsheight: 15,
                pageable: true,
                pagesizeoptions: ['5', '10', '20', '30'],
                pagesize: 10,
                source: dataAdapter,
                columnsresize: true,
                enabletooltips: true,
                sortable: true,
                altrows: true,
                theme: 'metro',
                ready: function() {
                    gridInitialized = true;
                },
                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();
        }
    });
};

Best Regards,
Dimitar

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

November 5, 2015 at 9:09 am Expand grid into jqwindows #77788

nico86

Participant

Thanks a lot , it’s work fine !

Author

Posts

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

You must be logged in to reply to this topic.