jQWidgets Forums

Forum Replies Created

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

Author

Posts

August 4, 2014 at 11:23 am in reply to: Filter save state duplication validation Filter save state duplication validation #57989

raj

Participant

Hi Peter Stoev,
As i attached my problem scienario with this URL “http://s12.postimg.org/jy0y325fx/Filter.jpg”. I need to check two filter state duplication. Please help to resolve this issue.

August 1, 2014 at 5:35 am in reply to: Displaying aggregation result / value – issue Displaying aggregation result / value – issue #57888

raj

Participant

Hi Peter Stoev,
Thanks for your support,
Consider my full source code, is there any way to resolve the above mentioned issue.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Demo</title>
    <link rel="stylesheet" href="../Assets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script src="../Assets/Scripts/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="../Assets/jqwidgets/jqx-all.js" type="text/javascript"></script>
    <style type="text/css">
        .jqx-grid-group-cell
        {
            border-left-width: 1px;
            border-right-width: 1px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var depart = [{
                department: "Dept1",
                project: "p1",
                person: "a",
                planhrs: 18.15,
                Actualhrs: 25.45
            }, {
                department: "Dept1",
                project: "p1",
                person: "b",
                planhrs: 18.15,
                Actualhrs: 18.30
            }, {
                department: "Dept2",
                project: "p2",
                person: "c",
                planhrs: 18.15,
                Actualhrs: 18.30
            }, {
                department: "Dept2",
                project: "p1",
                person: "d",
                planhrs: 18.15,
                Actualhrs: 18.30
            }, {
                department: "Dept1",
                project: "p2",
                person: "e",
                planhrs: 18.15,
                Actualhrs: 18.30
            }];

            var source = {
                datatype: "json",
                datafields: [{
                    name: 'department',
                    type: 'string'
                }, {
                    name: 'project',
                    type: 'string'
                }, {
                    name: 'person',
                    type: 'string'
                }, {
                    name: 'planhrs',
                    type: 'float'
                }, {
                    name: 'Actualhrs',
                    type: 'float'
                }],
                localdata: depart
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var theme = 'office';
            var toThemeProperty = function (className) {
                return className + " " + className + "-" + theme;
            }

            var groupsrenderer = function (text, group, expanded, data) {
                if (data.groupcolumn.datafield == 'planhrs' || data.groupcolumn.datafield == 'department' || data.groupcolumn.datafield == 'project' || data.groupcolumn.datafield == 'person') {
                    var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);

                    var text = data.groupcolumn.text + ': ' + number;
                    if (data.subItems.length > 0) {
                        var aggregate = this.getcolumnaggregateddata('planhrs', ['sum'], true, data.subItems);
                    } else {
                        var rows = new Array();
                        var getRows = function (group, rows) {
                            if (group.subGroups.length > 0) {
                                for (var i = 0; i < group.subGroups.length; i++) {
                                    getRows(group.subGroups[i], rows);
                                }
                            } else {
                                for (var i = 0; i < group.subItems.length; i++) {
                                    rows.push(group.subItems[i]);
                                }
                            }
                        }
                        getRows(data, rows);
                        var aggregate = this.getcolumnaggregateddata('planhrs', ['sum'], true, rows);
                    }
                    
                    return aggregate.sum;
                } else {
                    return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + '</span>';
                }
            }

            $("#jqxgrid").jqxGrid({
                width: '100%',
                pageable: true,
                autorowheight: true,
                autoheight: true,
                altrows: true,
                source: dataAdapter,
                columnsresize: true,
                groupable: true,
                sortable: true,
                groupsrenderer: groupsrenderer,
                groupsexpandedbydefault: true,
                selectionmode: 'singlecell',
                altrows: true,
                //groups: ['department'],
                columns: [{
                    text: 'department',
                    datafield: 'department', widht: 'auto'
                }, {
                    text: 'project',
                    datafield: 'project', widht: 'auto'
                }, {
                    text: 'person',
                    datafield: 'person', widht: 'auto'
                }, {
                    text: 'planhrs',
                    datafield: 'planhrs',
                    cellsalign: 'right', widht: 'auto', type: "float"
                }, {
                    text: 'salary',
                    datafield: 'salary',
                    cellsalign: 'right', widht: 'auto', type: "float"
                }]
            });
        });
    </script>
</head>
<body>
    <div id="jqxgrid">
    </div>
</body>
</html>

July 28, 2014 at 7:27 am in reply to: Filter save state duplication validation Filter save state duplication validation #57749

raj

Participant

Hi peter Stoev,

Thanks for your replay.
consider my scenario is,
1) I saved the grid state(Here i done filterable options on grid) using “savestate” property, this state is stored in variable(ex.: var first = $(gridid).jqxGrid(‘savestate’)).
2) Again iam saving grid state(Here i can do some other / same filterable option) using “savestate” property, this state is stored in another vairable(ex.: second= $(gridid).jqxGrid(‘savestate’)).
3) Finally i need to compare
if(first == second)
alert(‘true’);
else
alert(‘false’);

July 25, 2014 at 10:29 am in reply to: jqxmenu RTL issue jqxmenu RTL issue #57700

raj

Participant

Hi Dimitar

Thanks for your kind support.

Best Regards,
Raj

July 24, 2014 at 12:40 pm in reply to: Prevent group collapse after sorting Prevent group collapse after sorting #57661

raj

Participant

hi djordje.simic,

try this one

$("#grid").on("sort", function (event) {
        $(grid).jqxGrid('expandallgroups');
 });

July 23, 2014 at 8:56 am in reply to: jqxmenu RTL issue jqxmenu RTL issue #57608

raj

Participant

Hi Dimitar,
Thanks for your quick support, I can achieved what i excepted, but It is possible to change the arrow position to left side. please refer the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Assets/Scripts/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="../Assets/jqwidgets/jqx-all.js" type="text/javascript"></script>
    <link href="../Assets/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" />
    <link href="../Assets/Styles/css/font-awesome.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            // Create a jqxMenu
            $("#menu").jqxMenu({ width: '125px', mode: 'vertical', autoCloseOnClick: false });
            $("#menu").jqxMenu('setItemOpenDirection', 'Home', 'left', 'down');

            // create checkboxes
            //            $("#checkbox1").jqxCheckBox({ checked: true });
            //            $("#checkbox2").jqxCheckBox({});
            //            $("#checkbox3").jqxCheckBox({});
            //            $("#checkbox4").jqxCheckBox({});
            //            $("#checkbox5").jqxCheckBox({});

            $("#lblcreategroup").click(function () {
                $("#btnsave").show();
                $(this).hide();
                $(txtgroup).show();
            })

            var temp = "<li><i class=\"fa fa-html5\"></i><span style=\"\">Export HTML</span></li><li><i class=\"fa fa-file-pdf-o fa-fw\" style=\"margin-left: -3px;\"></i><span style=\"padding-left: 5px;\">Export PDF</span></li>";
            $("#grouphorizontalline").append('<li><span id="currentgroup" style="padding-left: 3px; font-style: italic;" onclick="setcurrentgroup()">Current Group</span> </li>');

        });
    </script>
</head>
<body>
    <div id="menu" style="float:right;">
        <ul style="padding-right: 4px; padding-left: 4px; cursor: pointer">
            <li><span>First</span></li>
            <li><span>Second</span></li>
            <li><span>Third</span></li>
            <li><span>Fourth</span></li>
            <li id="Home"><span>Fifth</span>
                <ul id="columnfield" style="padding-right: 4px; padding-left: 4px; cursor: pointer">
                    <li><span>
                        <input type="checkbox" id="checkbox1" />First </span></li>
                    <li><span>
                        <input type="checkbox" id="checkbox2" />Second</span></li>
                    <li><span>
                        <input type="checkbox" id="checkbox3" />Third</span></li>
                    <li><span>
                        <input type="checkbox" id="checkbox4" />Fourth</span></li>
                    <li><span>
                        <input type="checkbox" id="checkbox5" />Fifth</span></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

July 23, 2014 at 5:43 am in reply to: jqxgrid performance issue & additional features jqxgrid performance issue & additional features #57594

raj

Participant

Hi peter stoev,

We using jQWidgets 3.4.0 latest script, For the third point, our requirement is like that
Consider the Link : http://s12.postimg.org/a9pir5cil/jqxwidgetgrid.jpg
please find the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Demo</title>
    <link rel="stylesheet" href="../Assets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script src="../Assets/Scripts/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="../Assets/jqwidgets/jqx-all.js" type="text/javascript"></script>
    
     <style type="text/css">
        .jqx-grid-group-cell
        {
            border-left-width: 1px;
            border-right-width: 1px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var depart = [{
                department: "Dept1",
                project: "p1",
                person: "a",
                planhrs: 10,
                salary: 5000
            }, {
                department: "Dept1",
                project: "p1",
                person: "b",
                planhrs: 5,
                salary: 5500
            }, {
                department: "Dept2",
                project: "p2",
                person: "c",
                planhrs: 10,
                salary: 500
            }, {
                department: "Dept2",
                project: "p1",
                person: "d",
                planhrs: 20,
                salary: 25000
            }, {
                department: "Dept1",
                project: "p2",
                person: "e",
                planhrs: 30,
                salary: 50
            }];

            var source = {
                datatype: "json",
                datafields: [{
                    name: 'department',
                    type: 'string'
                }, {
                    name: 'project',
                    type: 'string'
                }, {
                    name: 'person',
                    type: 'string'
                }, {
                    name: 'planhrs',
                    type: 'int'
                }, {
                    name: 'salary',
                    type: 'int'
                }],
                localdata: depart
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var theme = 'office';
            var toThemeProperty = function (className) {
                return className + " " + className + "-" + theme;
            }

            var groupsrenderer = function (text, group, expanded, data) {
                if (data.groupcolumn.datafield == 'planhrs' || data.groupcolumn.datafield == 'department' || data.groupcolumn.datafield == 'project' || data.groupcolumn.datafield == 'person') {
                    var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);

                    var text = data.groupcolumn.text + ': ' + number;
                    if (data.subItems.length > 0) {
                        var aggregate = this.getcolumnaggregateddata('planhrs', ['sum'], true, data.subItems);
                        var aggregate1 = this.getcolumnaggregateddata('salary', ['sum'], true, data.subItems);
                    } else {
                        var rows = new Array();
                        var getRows = function (group, rows) {
                            if (group.subGroups.length > 0) {
                                for (var i = 0; i < group.subGroups.length; i++) {
                                    getRows(group.subGroups[i], rows);
                                }
                            } else {
                                for (var i = 0; i < group.subItems.length; i++) {
                                    rows.push(group.subItems[i]);
                                }
                            }
                        }
                        getRows(data, rows);
                        var aggregate = this.getcolumnaggregateddata('planhrs', ['sum'], true, rows);
                        var aggregate1 = this.getcolumnaggregateddata('planhrs', ['sum'], true, rows);
                    }
                    var tt = "<div style=\"width: 100%; float: left;\"><div style=\"width: 20%; float: left;\">" + number + "</div><div style=\"width: 20%; float: left;\">&nbsp;</div><div style=\"width: 20%; float: left;\">&nbsp;</div><div style=\"width: 20%; float: left;text-align:right;\">" + aggregate.sum + "</div><div style=\"width: 20%; float: left;text-align:right;\">" + aggregate1.sum + "</div></div>";
                    return tt;
                    console.log(tt);
                } else {
                    return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + '</span>';
                }
            }

            $("#jqxgrid").jqxGrid({
                width: '100%',
                pageable: true,
                autorowheight: true,
                autoheight: true,
                altrows: true,
                source: dataAdapter,
                columnsresize: true,
                groupable: true,
                sortable: true,
                groupsrenderer: groupsrenderer,
                groupsexpandedbydefault: true,
                selectionmode: 'singlecell',
                altrows: true,
                columns: [{
                    text: 'department',
                    datafield: 'department', widht: 'auto'
                }, {
                    text: 'project',
                    datafield: 'project', widht: 'auto'
                }, {
                    text: 'person',
                    datafield: 'person', widht: 'auto'
                }, {
                    text: 'planhrs',
                    datafield: 'planhrs',
                    cellsalign: 'right', widht: 'auto'
                }, {
                    text: 'salary',
                    datafield: 'salary',
                    cellsalign: 'right', widht: 'auto'
                }]
            });
        });
    </script>
</head>
<body>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Author

Posts

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