jQuery UI Widgets › Forums › Grid › Custom Row filter in Grid

Tagged: , , , , , , , ,

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Custom Row filter in Grid Posts
  • July 25, 2014 at 5:35 am 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

    July 25, 2014 at 6:01 am 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/

    July 25, 2014 at 6:08 am 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 ?

    July 25, 2014 at 7:21 am 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/

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.