jQuery UI Widgets Forums Dialogs and Notifications Window Expand grid into jqwindows

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • 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();}
    });
    };
    
    • This topic was modified 5 years, 7 months ago by  nico86.
    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/

    Expand grid into jqwindows #77788

    nico86
    Participant

    Thanks a lot , it’s work fine !

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

You must be logged in to reply to this topic.