jQuery UI Widgets Forums Grid jqxTreegrid + jqxGrid master/slave

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • jqxTreegrid + jqxGrid master/slave #87611

    magostoni
    Participant

    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

    jqxTreegrid + jqxGrid master/slave #87624

    Hristo
    Participant

    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

    • This reply was modified 7 years, 5 months ago by  Hristo.
    jqxTreegrid + jqxGrid master/slave #87630

    magostoni
    Participant

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

    with thanks

    jqxTreegrid + jqxGrid master/slave #87632

    magostoni
    Participant

    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.

    jqxTreegrid + jqxGrid master/slave #87650

    Hristo
    Participant

    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

    jqxTreegrid + jqxGrid master/slave #87672

    magostoni
    Participant

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

    I works!!!

    Thanks

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

You must be logged in to reply to this topic.