jQuery UI Widgets Forums Grid Custom Row filter in Grid

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Custom Row filter in Grid #57686

    alpesh
    Participant

    I have set json data in Grid
    but How to arrange the row data common behaviour

    Ex
    -----------------------------------------------------------------
    column1  column2  column3   column4   column5  column6 column7  
    branch1                                 8-6
    depart                      2-3
             Task                                   2-7      
                      Job                   2.3      
    branch1                                                9-3
    ------------------------------------------------------------------
    
    I want output like this
    
    -----------------------------------------------------------------
    column1  column2  column3   column4   column5  column6 column7  
    branch1                                 8-6            9-3
    depart                      2-3
             Task                                   2-7      
                      Job                   2.3                                                   
    ------------------------------------------------------------------

    i.e so branch1 data automatically move to the row first means common data collapse

    Any Trickly solution

    Thanx

    Custom Row filter in Grid #57688

    Dimitar
    Participant

    Hello alpesh,

    I believe this is not actually related to filtering. Maybe this would be best handled before the data is loaded into the grid (if possible). Otherwise, you may have to go through all cells of the first column, check for matches with other cells of the same column, and set cell values accordingly.

    Best Regards,
    Dimitar

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

    Custom Row filter in Grid #57689

    alpesh
    Participant

    but i have lots of try before handle the loaded data but can not get the solution
    but Java Flex Grid Table also handle this type of problem
    Can give any example Jqwidgets Grid Table ?

    Custom Row filter in Grid #57694

    Dimitar
    Participant

    Hi alpesh,

    Here is an example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.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/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = '[{ "name": "a", "field1": 11, "field2": "" }, { "name": "b", "field1": 8, "field2": 10 }, { "name": "a", "field1": "", "field2": 13 }]';
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'name', type: 'string' },
                        { name: 'field1', type: 'number' },
                        { name: 'field2', type: 'number' }
                    ],
                    localdata: data
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: dataAdapter,
                    columnsresize: true,
                    columns: [
                        { text: 'name', datafield: 'name', width: 250 },
                        { text: 'field1', datafield: 'field1', width: 150 },
                        { text: 'field2', datafield: 'field2', width: 180 }
                    ]
                });
    
                $("#compact").click(function () {
                    var toDelete = new Array();
                    var rows = $('#jqxgrid').jqxGrid('getrows');
                    for (var i = 0; i < rows.length; i++) {
                        var cell = rows[i].name;
                        for (var j = (i + 1); j < rows.length; j++) {
                            if (rows[j].name == cell) {
                                if (rows[i].field1 == "") {
                                    rows[i].field1 = rows[j].field1;
                                }
                                if (rows[i].field2 == "") {
                                    rows[i].field2 = rows[j].field2;
                                }
                                toDelete.push(j);
                            }
                        }
                    }
                    for (var k = 0; k < toDelete.length; k++) {
                        $('#jqxgrid').jqxGrid('deleterow', toDelete[k]);
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid">
            </div>
            <button id="compact">
                Make grid compact</button>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.