jqxTreegrid + jqxGrid master/slave

[magostoniParticipant]

Hello,
I’m trying to imlpement a master / slave UI using a treegrid + a grid;

The idea is that the jqxTreegrid shows some records and when the user clicks on a treegrid row, the application shows the corresponding “slave” records in the grid.

<script type="text/javascript">
	$(document).ready(function ()
	{
        var theme = 'bootstrap';
        var StateSource = [
            { value: "0", label: "Inserito"},
            { value: "2", label: "In produzione"},
            { value: "4", label: "Completato"}
        ];
        var StateDataAdapter = new $.jqx.dataAdapter(StateSource, {
            autoBind: true
        });

        var source =
        {
            dataType: "json",
            dataFields: [
                { name: 'codordineinterno', type: 'string'},
                { name: 'ragione', type: 'string'},
                { name: 'lancio_id', type: 'number' },
                { name: 'coditem', type: 'string' },
                { name: 'codforn', type: 'string' },
                { name: 'ragionef', type: 'string' },
                { name: 'tipo', type: 'string' },
                { name: 'codfinitura', type: 'string' },
                { name: 'nome', type: 'string' },
                { name: 'qta', type: 'number' },
                { name: 'status', type: 'number' },
                { name: 'UIrow_item', type: 'number' },
                { name: 'UIrow', type: 'number' },
                { name: 'parent', type: 'number' },
            ],
            hierarchy:
            {
                keyDataField: { name: 'UIrow' },
                parentDataField: { name: 'parent' }
            },
            id: 'UIrow',
            url: '<?php echo site_url("/Produzione_lanci/get_contenuto_lancio") ?>/<?php echo($id) ?>',
            root: 'Rows'
        };
        var dataAdapter = new $.jqx.dataAdapter(source);

        var cellsrenderer = function (row, dataField, cellValue, rowData, cellText) {
            var cellValue = rowData[dataField];
            if (cellValue === 0) {
                return '<span style="margin: 4px; "></span>';
            } else if (cellValue === 2) {
                return '<span style="width: 100%; text-align: center; float: left; margin:4px 0 0 0;"><img src="<?php echo base_url();?>assets/img/status_2_16.png"/></span>';
            } else if (cellValue === 4) {
                return '<span style="width: 100%; text-align: center; float: left; margin:4px 0 0 0;"><img src="<?php echo base_url();?>assets/img/status_4_16.png"/></span>';
            }
        }

        // create Tree Grid
        $("#treeGrid").jqxTreeGrid(
            {
                width: '100%',
                source: dataAdapter,
                sortable: true,
                filterable: true,
                filterMode: 'advanced',
                ready: function()
                {
                    //$("#treeGrid").jqxTreeGrid('expandRow', '2');
                },
                columns: [
                    { text: 'id', dataField: 'lancio_id', width: '10%', filterable: false },
                    { text: 'Ordine', dataField: 'codordineinterno', width: '8%' },
                    { text: 'cliente', dataField: 'ragione', width: '13%', filterable: false },
                    { text: 'Codice', dataField: 'coditem', width: '10%' },
                    { text: 'Tipo', dataField: 'tipo', width: '5%' },
                    { text: 'codforn', dataField: 'codforn', hidden: true, width: '5%', filterable: false },
                    { text: 'Fornitore', dataField: 'ragionef', width: '15%', filterable: false },
                    { text: 'codfinitura', dataField: 'codfinitura', hidden: true, width: '5%', filterable: false },
                    { text: 'Finitura', dataField: 'nome', width: '5%', filterable: false },
                    { text: 'Q.tà', dataField: 'qta', width: '5%', filterable: false },
                    { text: 'Stato', dataField: 'status', width: '8%', filterable: false, cellsrenderer: cellsrenderer },
                    { text: 'UIrow_item', dataField: 'UIrow_item', hidden: true, width: 200, filterable: false },
                    { text: 'UIrow', dataField: 'UIrow', hidden: false, width: '5%', filterable: false },
                    { text: 'parent', dataField: 'parent', hidden: true, width: 200, filterable: false }
                ]
        });

        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'UIrow_esploso', type: 'number'},
                { name: 'coditem', type: 'string'},
                { name: 'codforn', type: 'string'},
                { name: 'tipo', type: 'string'},
                { name: 'ragionef', type: 'string'},
                { name: 'codfinitura', type: 'number'},
                { name: 'nome', type: 'string'},
                { name: 'qta', type: 'number'},
                { name: 'qta_residua', type: 'number'},
                { name: 'status', type: 'string'},
                { name: 'magazzino', type: 'string'},
                { name: 'data_movimento', type: 'date'},
                { name: 'UIrow', type: 'integer'}
            ],
            id: 'UIrow',
            url: '<?php echo site_url("/Produzione_lanci/get_dettaglio_voci_lancio") ?>',
            root: 'Rows',
            beforeprocessing: function (data) {
                source.totalrecords = data[0].TotalRows;
            },
            sort: function () {
                // update the grid and send a request to the server.
                $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
                $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
                $("#jqxgrid").jqxGrid('showrowdetails', 0);
            },
            filter: function ()
            {
                // update the grid and send a request to the server.
                $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
                $("#jqxgrid").jqxGrid('showrowdetails', 0);
            }
        };

        var dataAdapter = new $.jqx.dataAdapter(source);
        dataAdapter.dataBind();
        var cellsrenderer = function(row, columnfield, value, defaulthtml, columnproperties)
        {
            if (value === '0') {
                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';"></span>';
            } else if (value === '2') {
                return '<span style="width: 100%; text-align: center; float: left; margin:4px 0 0 0;"><img src="<?php echo base_url();?>assets/img/status_2_16.png"/></span>';
            } else if (value === '4') {
                return '<span style="width: 100%; text-align: center; float: left; margin:4px 0 0 0;"><img src="<?php echo base_url();?>assets/img/status_4_16.png"/></span>';
            }
        }

        $("#treeGrid").on('rowSelect', function (event) {
            // event args.
            var args = event.args;
            // row data.
            var row = args.row;
            // row key.
            var key = args.key; // questa è la chiave del record

            var records = new Array();
            var length = dataAdapter.records.length;
            for (var i = 0; i < length; i++) {
                var record = dataAdapter.records[i];
                if (record.UIrow_esploso == key) {
                    records[records.length] = record;
                }
            }
            console.log(records);
            var dataSourceFiltered = {
                    datafields: [
                        { name: 'UIrow_esploso', type: 'number'},
                        { name: 'coditem', type: 'string'},
                        { name: 'codforn', type: 'string'},
                        { name: 'tipo', type: 'string'},
                        { name: 'ragionef', type: 'string'},
                        { name: 'codfinitura', type: 'number'},
                        { name: 'nome', type: 'string'},
                        { name: 'qta', type: 'number'},
                        { name: 'qta_residua', type: 'number'},
                        { name: 'status', type: 'string'},
                        { name: 'magazzino', type: 'string'},
                        { name: 'data_movimento', type: 'date'},
                        { name: 'UIrow', type: 'integer'}
                    ],
                localdata: records
            }
            var adapterFiltered = new $.jqx.dataAdapter(dataSourceFiltered);

            // update data source.
            $("#jqxgrid").jqxGrid({ source: adapterFiltered });
        });

        // initialize jqxGrid
        $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                filterable: true,
                source: dataAdapter,
                theme: theme,
                ready: function () {},
                autoheight: true,
                autorowheight: true,
                pageable: true,
                pagesizeoptions: ['10', '20', '50', '100'],
                pagesize: 20,
                virtualmode: true,
                editable: false,
                selectionmode: 'singlerow',
                altrows: true,
                sortable: true,
                //showgroupaggregates: true,
                enabletooltips: true,
                showfilterrow: true,
                columnsresize: true,
                groupable: false,

                localization: {
                    addrowstring: "Aggiungi",
                    udpaterowstring: "Aggiorna",
                    deleterowstring: "Elimina",
                    resetrowstring: "Reimposta",
                    everpresentrowplaceholder: "Digita: "
                },
                rendergridrows: function () {
                    return dataAdapter.records;
                },

                columns: [
                    { text: 'Codice', editable:false, datafield: 'coditem', width: '8%', cellsalign: 'left', columntype: 'textbox', filtertype: 'input',
                        initeditor: function (row, column, editor) {
                            editor.attr('maxlength', 25);
                        }
                    },
                    { text: 'Tipo', editable:false, filterable:false, datafield: 'tipo', width: '5%', cellsalign: 'left', columntype: 'textbox', filtertype: 'input'
                    },
                    { text: 'Fornitore', editable:false, filterable:false, datafield: 'ragionef', width: '15%', cellsalign: 'left', columntype: 'textbox', filtertype: 'input'
                    },
                    { text: 'Descrizione', hidden: true, editable:false, filterable:false, datafield: 'descrizione', width: '20%', cellsalign: 'left', columntype: 'textbox', filtertype: 'input',
                        initeditor: function (row, column, editor) {
                            editor.attr('maxlength', 25);
                        }
                    },
                    { text: 'Finitura', editable:false, filterable:false, datafield: 'nome', width: '8%', cellsalign: 'left', columntype: 'textbox', filtertype: 'input'
                    },
                    { text: 'Q.tà', editable: false, datafield: 'qta', width: '5%', cellsalign: 'center', columntype: 'textbox', filtertype: 'input', filterable: false, aggregates: ["sum"]},
                    { text: 'Q.tà residua', hidden: true, editable: false, datafield: 'qta_residua', width: '5%', cellsalign: 'center', columntype: 'textbox', filtertype: 'input', filterable: false, aggregates: ["sum"]},
                    { text: 'Stato', editable:false, dataField: 'status', width: '4%', cellsalign: 'center', filtertype: 'checkedlist', columntype: 'dropdownlist', cellsrenderer:cellsrenderer, filteritems: StateDataAdapter,
                        createeditor: function (row, value, editor) {
                            editor.jqxDropDownList({ source: StateDataAdapter, displayMember: 'label', valueMember: 'value' });
                        },
                        cellvaluechanging: function (row, column, columntype, oldvalue, newvalue)
                        {
                            if (newvalue == "") return oldvalue;
                        }
                    },
                    { text: 'Magazzino', editable:false, filterable:false, dataField: 'magazzino', width: '10%', cellsalign: 'left', columntype: 'textbox', filtertype: 'input'},
                    { text: 'id', editable: false, datafield: 'UIrow', width: '5%', cellsalign: 'center', columntype: 'textbox', filtertype: 'input'},
                    { text: 'espl', editable: false, datafield: 'UIrow_esploso', width: '5%', cellsalign: 'center', columntype: 'textbox', filtertype: 'input'}
                ]
            });

    });
</script>

Running my code I saw this behaviour:
1) When the page opens, in the grid it shows all the records (this is correct)
2) When I click on a row in the treegrid, it fires the select event and the records array contains the correct filtered records based on selection (this seems correct so)
3) The grid does not refresh loading the filtered records, it simply show the first n records….. I explain better; if records variable lenght is “2 items”, the grid shows the first 2 records of the original dataAdapter object, and not the correct ones by adapterFiltered

Please help me, I don’t understand what I’m missing

[HristoParticipant]

Hello magostoni,

This is one too big data source and we could not spend time to create/check (private) project.
Please, provide us small simple example with a concrete issue. (better in https://www.jseditor.io/)
I would like to suggest you to look those examples:

– Grid:
+ Combination with another components:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/masterdetails.htm?light
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/nestedgrids.htm?light
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/rowdetails.htm?light
+ Add Filter:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customfiltering.htm?light

– TreeGrid:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-row-details.htm?light
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-icons.htm?light

(Hint: Look how to initialize different widgets in another.)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[magostoniParticipant]

Hello,
I created the sample in jseditor…. now how I can share with you here?

with thanks

[magostoniParticipant]

You can see my sample based on previous code here: https://www.jseditor.io/?key=treegrid-master-slave

we have one main treegrid and a grid
selecting a row on the treegrid it must show inside grid only records related to the row selected in the tree.
the relation between tree and grid records is based on two column UIrow (treegrid) and UIrow_esploso (grid).

Now experiment the issue.
Expand the rows in treegrid and select the row with UIrow = 38;
On the grid, instead of showing only the 4 rows with UIrow_esploso = 38, it shows the first 4 rows.

The code is taken and adapted from your DEMO code; I checked again but I didn’t understood where I’m wrong.
please check and help me find the solution.

Thanks.

[HristoParticipant]

Hello magostoni,

I would like to suggest you one approach. If your Grid has all items loaded by default, why you not try to filtering this items by ID (UIrow).
Another thing when update your source data store could use $('#jqxGrid').jqxGrid('updatebounddata');
Should to check rendergridrows in your code what object you retrieve.
Please, take a look at this edited example:
https://www.jseditor.io/?key=treegrid-master-slaveedit

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[magostoniParticipant]

Hi Hristo,
I’va taken a look at your code and modify accordingly mine.

I works!!!

Thanks

[Author]

Posts