Append jqxGrid to jqxPanel? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: append, grid, jqxgrid, jqxpanel, panel

This topic contains 13 replies, has 3 voices, and was last updated by branko7171 11 years, 11 months ago.

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

Author

Append jqxGrid to jqxPanel? Posts

October 23, 2012 at 12:24 pm Append jqxGrid to jqxPanel? #9941

Member

Hello, I’m trying to show different jqxGrids based on what the user selects.
Tried appending one of 2 jqxGrids based on a condition but everything jumbles on the page. I don’t see any jqxElements. Just plain text from html.

Here’s what I’m doing:
if (1==1)
$(‘#svojstvaPanel’).jqxPanel(‘append’,

);
else
$(‘#svojstvaPanel’).jqxPanel(‘append’,

);

That code is inside
$(document).ready(function ().
Panel is declared as:
$(‘#svojstvaPanel’).jqxPanel({ theme: theme, height: ‘100%’, width: ‘100%’ });

Thanks.

October 24, 2012 at 6:37 am Append jqxGrid to jqxPanel? #9971

Dimitar

Participant

Hello branko7171,

Here is a scenario, similar to your own. If the input value is above 50, grid1 shows in the panel. Otherwise, grid2 shows.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Panel Widget, Panel, jqxPanel, jQuery Widgets, jQuery Plugins, jQuery UI Widgets, jQuery UI" />
    <title id='Description'>jQuery Panel Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxPanel
            $("#jqxpanel").jqxPanel({ width: 800, height: 400 });
            $("#button").jqxButton();
            // source for the grids
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name' },
                    { name: 'type' },
                    { name: 'calories' },
                    { name: 'totalfat' },
                    { name: 'protein' },
                ],
                id: 'id',
                url: "../demos/sampledata/beverages.txt"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // options for the two grids
            var grid1Options = {
                width: 500,
                source: dataAdapter,
                columns: [
                  { text: 'Name (1)', datafield: 'name', width: 250 },
                  { text: 'Beverage Type (1)', datafield: 'type', width: 250 },
                  { text: 'Calories (1)', datafield: 'calories', width: 180 },
                  { text: 'Total Fat (1)', datafield: 'totalfat', width: 120 },
                  { text: 'Protein (1)', datafield: 'protein', width: 120 }
              ]
            };
            var grid2Options = {
                width: 800,
                source: dataAdapter,
                columns: [
                  { text: 'Name (2)', datafield: 'name', width: 250 },
                  { text: 'Beverage Type (2)', datafield: 'type', width: 250 },
                  { text: 'Calories (2)', datafield: 'calories', width: 180 },
                  { text: 'Total Fat (2)', datafield: 'totalfat', width: 120 },
                  { text: 'Protein (2)', datafield: 'protein', width: 120 }
              ]
            };
            $("#button").click(function () {
                if ($("#input").val() > 50) {
                    $('#jqxpanel').jqxPanel('clearcontent');
                    $("#jqxpanel").jqxPanel('append', $("#grid1")[0]);
                    $("#grid1").jqxGrid(grid1Options);
                } else {
                    $('#jqxpanel').jqxPanel('clearcontent');
                    $("#jqxpanel").jqxPanel('append', $("#grid2")[0]);
                    $("#grid2").jqxGrid(grid2Options);
                };
            });
        });
    </script>
</head>
<body class='default'>
    <input id="input" value="100" />
    <button id="button">
        Go!</button>
    <div id='jqxpanel' style="font-size: 13px; font-family: Verdana; float: left;">
        <div style='margin: 10px;'>
            <h3>
                If the number is above 50, grid1 will show. Otherwise, grid2 will show.</h3>
        </div>
        <!--Content-->
        <div style='white-space: nowrap;'>
        </div>
    </div>
    <div id="grid1">
    </div>
    <div id="grid2">
    </div>
</body>
</html>

October 24, 2012 at 11:40 am Append jqxGrid to jqxPanel? #9976

branko7171

Member

Thanks, but I still have a problem.
I’ve added:

<div id="jqxgridTest">
                </div>
                <div id="jqxgridProblem">
                </div>

Similiar to yours, but when I have that piece of code both grids are shown. When I comment it I get neither of the grids.
This is how I append:

                if (true)
                {
                    $('#svojstvaPanel').jqxPanel('clearcontent');
                    $('#svojstvaPanel').jqxPanel('append', $("#jqxgridTest")[0]);
                    
                }
                else
                {
                    $('#svojstvaPanel').jqxPanel('clearcontent');
                    $('#svojstvaPanel').jqxPanel('append', $("#jqxgridProblem")[0]);
                }

October 26, 2012 at 5:11 am Append jqxGrid to jqxPanel? #10049

Dimitar

Participant

Hi branko7171,

Please note that you should also initialize the grids in their respective cases in the if…else statement, as shown in our example.

Best Regards,
Dimitar

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

October 26, 2012 at 11:22 am Append jqxGrid to jqxPanel? #10070

branko7171

Member

Hm, so it doesn’t work if I initialize before if…else like this:

$("#jqxgridTest").jqxGrid({
                    source: sourceGridTest,
                    theme: 'classic',
                    columns: 
                        [{ text: 'Naziv',datafield: 'Naziv', width: 150 },
                        { text: 'Trajanje', datafield: 'Trajanje', width: 75 },
                        { text: 'Predmet', datafield: 'Predmet', width: 120 },
                        { text: 'Sablon', datafield: 'SablonId', width: 70 },
                        { text: 'Kriterijum Testa', datafield: 'KriterijumTesta', width: 120 },
                        { text: 'Datum Pripreme', datafield: 'DatumPripreme', width: 120 },
                        { text: 'Datum Izrade', datafield: 'DatumIzrade', width: 130 },
                        { text: 'Stanje', datafield: 'Stanje', width: 120 }]
                });

$("#jqxgridProblem").jqxGrid({
                    source: sourceGridProblem,
                    theme: 'classic',
                    columns: 
                        [{ text: 'Naziv',datafield: 'Naziv', width: 150 },
                        { text: 'Trajanje', datafield: 'Trajanje', width: 75 },
                        { text: 'Predmet', datafield: 'Predmet', width: 120 },
                        { text: 'Sablon', datafield: 'SablonId', width: 70 },
                        { text: 'Kriterijum Testa', datafield: 'KriterijumTesta', width: 120 },
                        { text: 'Datum Pripreme', datafield: 'DatumPripreme', width: 120 },
                        { text: 'Datum Izrade', datafield: 'DatumIzrade', width: 130 },
                        { text: 'Stanje', datafield: 'Stanje', width: 120 }]
                });

I do it like that because I have 2 different sources. The reason for that is that I have to get different data from a mysql database based on what the user selects.

October 26, 2012 at 11:59 am Append jqxGrid to jqxPanel? #10071

branko7171

Member

Ok, it seems I have to do it with options like you said.
My code is now:

var sourceGridTest ={
                    datatype: "json",
                    datafields: 
                        [{ name: 'Naziv' },
                        { name: 'Trajanje' },
                        { name: 'Predmet' },
                        { name: 'SablonId' },
                        { name: 'KriterijumTesta' },
                        { name: 'DatumPripreme'},
                        { name: 'DatumIzrade'},
                        { name: 'Stanje'}],
                    url: 'gridData.php'
                };
                var dataAdapterSourceGridTest = new $.jqx.dataAdapter(sourceGridTest, {
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });

var sourceGridProblem ={
                    datatype: "json",
                    datafields: 
                        [{ name: 'Naziv' },
                        { name: 'Opis' },
                        { name: 'Oblast' },
                        { name: 'VrstaProblema' },
                        { name: 'Odgovor' },
                        { name: 'Tezina'},
                        { name: 'Autor'},
                        { name: 'Komentar'},
                        { name: 'DatumPripreme'},
                        { name: 'StanjeUTestu'},
                        { name: 'Tacno'},
                        { name: 'Netacno'},
                        { name: 'Izostavljen'},
                        { name: 'Vise'}],
                    url: 'gridData.php'
                };
                
                var dataAdapterSourceGridProblem = new $.jqx.dataAdapter(sourceGridProblem, {
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });
                var jqxgridProblemOptions ={
                    source: sourceGridProblem,
                    theme: 'classic',
                    columns: 
                        [{ text: 'Naziv',datafield: 'Naziv', width: 150 },
                        { text: 'Trajanje', datafield: 'Trajanje', width: 75 },
                        { text: 'Predmet', datafield: 'Predmet', width: 120 },
                        { text: 'Sablon', datafield: 'SablonId', width: 70 },
                        { text: 'Kriterijum Testa', datafield: 'KriterijumTesta', width: 120 },
                        { text: 'Datum Pripreme', datafield: 'DatumPripreme', width: 120 },
                        { text: 'Datum Izrade', datafield: 'DatumIzrade', width: 130 },
                        { text: 'Stanje', datafield: 'Stanje', width: 120 }]
                }
                var jqxgridTestOptions ={
                    source: sourceGridTest,
                    theme: 'classic',
                    columns: 
                        [{ text: 'Naziv',datafield: 'Naziv', width: 150 },
                        { text: 'Trajanje', datafield: 'Trajanje', width: 75 },
                        { text: 'Predmet', datafield: 'Predmet', width: 120 },
                        { text: 'Sablon', datafield: 'SablonId', width: 70 },
                        { text: 'Kriterijum Testa', datafield: 'KriterijumTesta', width: 120 },
                        { text: 'Datum Pripreme', datafield: 'DatumPripreme', width: 120 },
                        { text: 'Datum Izrade', datafield: 'DatumIzrade', width: 130 },
                        { text: 'Stanje', datafield: 'Stanje', width: 120 }]
                };

For testing:

                if (3<0)
                {
                    $('#svojstvaPanel').jqxPanel('clearcontent');
                    $('#svojstvaPanel').jqxPanel('append', $("#jqxgridTest")[0]);
                    $("#grid1").jqxGrid(jqxgridTestOptions);
                }
                else
                {
                    $('#svojstvaPanel').jqxPanel('clearcontent');
                    $('#svojstvaPanel').jqxPanel('append', $("#jqxgridProblem")[0]);
                    $("#grid2").jqxGrid(jqxgridProblemOptions);                    
                }

I’ve used a condition to enter ‘else’ branch but grid2 doesn’t show. Grid1 shows fine.

Here’s the panel and grids:

<div class="splitter-panel">
                    Svojstva           
                    <div id="svojstvaPanel">
                        &nbsp;
                    </div>
                </div>
                <div id="grid1">
                </div>
                <div id="grid2">
                </div>

October 28, 2012 at 1:45 pm Append jqxGrid to jqxPanel? #10125

branko7171

Member

Thanks again. It works. The problem was in my php code…

October 31, 2012 at 2:16 pm Append jqxGrid to jqxPanel? #10303

branko7171

Member

I have another problem. Hope it’s ok to post here again…
I have several elements (2 trees and 2 listboxes). On select event of those elements I need to append a different grid, which in turn loads different data from a mysql database. The grids append and show data correctly, but only once.
Here’s how I do it (one of 2 trees, it’s similiar for the rest):

$('#problemiTree').bind('select', function (event) {
                    dataAdapter4.dataBind();                    
                    var item3 = $('#problemiTree').jqxTree('getSelectedItem');                      
   
                    var sourceGridOblast ={
                        datatype: "json",
                        async:false,
                        datafields: 
                            [{ name: 'Naziv' },
                            { name: 'NadOblast' },
                            { name: 'Opis' }],
                        url: 'gridData.php',
                        processdata: function (data) {
                            data.selItemObl = item3;
                            if (data.selItemObl) data.selItemObl = data.selItemObl.id;
                            else data.selItemObl = 0; 
                        }
                    };
                
                    var dataAdapterSourceGridOblast = new $.jqx.dataAdapter(sourceGridOblast);
                    var jqxgridOblastOptions ={
                        source: dataAdapterSourceGridOblast,
                        theme: 'classic',
                        columns: 
                            [{ text: 'Naziv',datafield: 'Naziv', width: 150 },
                            { text: 'Nadoblast', datafield: 'NadOblast', width: 150  },
                            { text: 'Opis', datafield: 'Opis', width: 400 }]
                    };
                    $('#svojstvaPanel').jqxPanel('clearcontent');
                    $('#svojstvaPanel').jqxPanel('append', $("#grid3")[0]);
                    $("#grid3").jqxGrid(jqxgridOblastOptions);
                    
                });

The problem is that no variable is passed using processData. I’ve tried using dataAdapterSourceGridOblast.dataBind() in that event (defined the source and created the adapter on document ready but it didn’t solve my problem).
Thanks.

October 31, 2012 at 5:55 pm Append jqxGrid to jqxPanel? #10319

Peter Stoev

Keymaster

Hi branko7171,

According to me, the following code is not ok for passing data to the server: data.selItemObl = item3; The reason is that item3 is Object with several properties like label, value, id. Make sure that you pass to the server only the item’s id or its label or its value.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 1, 2012 at 12:51 pm Append jqxGrid to jqxPanel? #10403

branko7171

Member

I see. Changed that code to this:

processdata: function (data) {
                            data.selItemObl = item3;
                            if (data.selItemObl) data.selItemObl = data.selItemObl.id;
                            else data.selItemObl.id = 0; 
                        }

The if…else statement ensures that I will send id. But it still doesn’t work. Also, I have tried with just data.selItemObl = item3.id;

November 1, 2012 at 1:04 pm Append jqxGrid to jqxPanel? #10406

Peter Stoev

Keymaster

Hi branko7171,

Ok, can you try: data.selItemObl = “Id1”;

Then check in your server script whether the selItemObl is set and do this: $objID = $_GET[“selItemObl “]; Note that the Ajax requests by default use GET, not POST.

Btw. I am not sure that you have a DOM element because you cleared it using the clearcontent, so grid3 is most probably not in the DOM anymore.

$(‘#svojstvaPanel’).jqxPanel(‘clearcontent’);

$(‘#svojstvaPanel’).jqxPanel(‘append’, $(“#grid3”)[0]);

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 1, 2012 at 1:22 pm Append jqxGrid to jqxPanel? #10410

branko7171

Member

Tried it. In the php I echo “set” if selItemObl is set. The first time I select that variable is passed and the response I get is “set”. However,
the second time it doesn’t work. I checked with firebug and it seems there is no GET request like the first time. So, no request and because of that no response.

November 1, 2012 at 2:43 pm Append jqxGrid to jqxPanel? #10413

Peter Stoev

Keymaster

Hi branko7171,

I think that there’s no DOM element and that is the issue.

When you run the code for first time, clearcontent clears an empty panel.

$(‘#svojstvaPanel’).jqxPanel(‘clearcontent’);

Then you add a DIV tag called grid3

$(‘#svojstvaPanel’).jqxPanel(‘append’, $(“#grid3”)[0]);

You initialize the DIV tag and everything is fine.

$(“#grid3”).jqxGrid(jqxgridOblastOptions);

The second call happens and then:

$(‘#svojstvaPanel’).jqxPanel(‘clearcontent’);

The grid3 DIV tag is removed from the DOM tree.

This line adds nothing to the panel.

$(‘#svojstvaPanel’).jqxPanel(‘append’, $(“#grid3”)[0]);

This line initializes nothing because there’s no such Tag anymore.

$(“#grid3”).jqxGrid(jqxgridOblastOptions);

The solution is to dynamically create the grid3 DIV tag after the clearcontent call.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 2, 2012 at 11:21 am Append jqxGrid to jqxPanel? #10455

branko7171

Member

Didn’t know that clearcontent removes the entire DIV. It works as it should now.
Thank you so much! You’ve been a great help.

Author

Posts

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

You must be logged in to reply to this topic.