jQWidgets Forums

Tagged: column, grid, hide, jqxgrid, jqxtree, show, Tree

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

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

Author

Jqx Tree checkboxes shoud hide/show jqxgrid columns Posts
March 6, 2014 at 11:16 am Jqx Tree checkboxes shoud hide/show jqxgrid columns #50589

nitendrasingh
Participant

How to achieve Jqx Tree checkboxes click shoud hide/show jqxgrid columns.

March 7, 2014 at 5:59 am Jqx Tree checkboxes shoud hide/show jqxgrid columns #50632
Dimitar
Participant
Hello nitendrasingh,

Here is how to modify the jqxGrid demo Show/Hide Columns to use jqxTree instead of jqxListBox:
```
<!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="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/beverages.txt";

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name' },
                    { name: 'type' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat' },
                    { name: 'protein' }
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: 400,
                source: dataAdapter,
                ready: function () {
                    // callback function which is called by jqxGrid when the widget is initialized and the binding is completed.
                },
                columnsresize: true,
                columns: [
                  { text: 'Name', datafield: 'name', hidden: true, width: 250 },
                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                  { text: 'Calories', datafield: 'calories', width: 180 },
                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                  { text: 'Protein', datafield: 'protein', minwidth: 120 }
              ]
            });

            var listSource = [{ label: 'Name', value: 'name', checked: false }, { label: 'Beverage Type', value: 'type', checked: true }, { label: 'Calories', value: 'calories', checked: true }, { label: 'Total Fat', value: 'totalfat', checked: true }, { label: 'Protein', value: 'protein', checked: true}];

            $("#jqxtree").jqxTree({ source: listSource, width: 200, height: 200, checkboxes: true });
            $("#jqxtree").on('checkChange', function (event) {
                $("#jqxgrid").jqxGrid('beginupdate');
                var label = $(event.args.element).text();
                var value;
                for (var i = 0; i < listSource.length; i++) {
                    if (listSource[i].label == label) {
                        value = listSource[i].value;
                    };
                };
                if (event.args.checked) {
                    $("#jqxgrid").jqxGrid('showcolumn', value);
                }
                else {
                    $("#jqxgrid").jqxGrid('hidecolumn', value);
                }
                $("#jqxgrid").jqxGrid('endupdate');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style="float: left;" id="jqxtree">
        </div>
        <div style="margin-left: 20px; float: left;" id="jqxgrid">
        </div>
    </div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
March 11, 2014 at 2:17 pm Jqx Tree checkboxes shoud hide/show jqxgrid columns #50860

nitendrasingh
Participant

Hello Dimitar,
Appreciated for the above reply 🙂

As per my requirement,
The code I am pasting below,whereas the hide and show is happening but the processing time is throwing script errow,Please look the code below and let me know,

var listSource =

[
{ label: ‘Group1’, value: ‘xyz’,collapsed:true, checked: true,
items:[{label: ‘Action’, value: ‘gwm_RecordType’},
{label: ‘Full Name’, value: ‘gwm_FullName’},
{label: ‘Lifecycle Status’, value: ‘gwm_prospecttemperature’},
{label: ‘DM’, value: ‘gwm_IsDecisionMaker’},
{label: ‘Opportunity Size’, value: ‘gwm_TotalOpportunitySize’, selected: true}]

},
{ label: ‘Group2’, value: ”,collapsed:true, checked: true,
items:[{label: ‘Last Contact Date’, value: ‘gwm_LastContactDate’,id:’gwm_LastContactDate’},
{label: ‘Location’, value: ‘Location’,selected: true},
{label: ‘Phone Number’, value: ‘Phone Number’,id:’Phone Number’},
{label: ‘Email’, value: ‘Email’,id:’Email’},
{label: ‘Advisor’, value: ‘gwm_filingofficersystemuserid’,id:’gwm_filingofficersystemuserid’}]

},
{ label: ‘Group3’, value: ”,collapsed:true, checked: true,
items:[{label: ‘Last Contact Type’, value: ‘gwm_LastContactType’,id:’gwm_RecordType’},
{label: ‘ECI’, value: ‘gwm_Eci’,selected: true},
{label: ‘Total Net Worth’, value: ‘gwm_TotalNetWorth’,id:’gwm_TotalNetWorth’},
{label: ‘Liquid Net Worth’, value: ‘gwm_LiquidNetWorth’,id:’gwm_LiquidNetWorth’},
{label: ‘Age’, value: ‘gwm_age’,id:’gwm_age’}]
},
{ label: ‘Group4’, value: ”,collapsed:true, checked: true,
items:[{label: ‘Birthday’, value: ‘BirthDate’,id:’BirthDate’},
{label: ‘Market’, value: ‘gwm_market’,selected: true},
{label: ‘Team’, value: ‘gwm_team’,id:’gwm_team’},
{label: ‘Date Created’, value: ‘CreatedOn’,id:’CreatedOn’},
{label: ‘Employer Name’, value: ‘gwm_EmployerName’,id:’gwm_EmployerName’}]
},
{ label: ‘Group5’, value: ”,collapsed:true, checked: true,
items:[{label: ‘Occupation’, value: ‘gwm_occupation’,id:’gwm_occupation’},
{label: ‘Preferred Name’, value: ‘Salutation’,selected: true},
{label: ‘Native Name’, value: ‘NickName’,id:’NickName’},
{label: ‘Sub-Type’, value: ‘gwm_IsIndividual’,id:’gwm_IsIndividual’},
{label: ‘Days Since Last Contact’, value: ‘DaysSinceLastContact’,id:’DaysSinceLastContact’}]
},
{ label: ‘Group6’, value: ”,collapsed:true, checked: true,
items:[{label: ‘Next Meeting Date’, value: ‘gwm_NextActivityDate’,id:’gwm_NextActivityDate’},
{label: ‘Legal Entity Classification’, value: ‘gwm_businessform’,selected: true},
{label: ‘City’, value: ‘Address1_City’,id:’Address1_City’},
{label: ‘State’, value: ‘Address1_StateOrProvince’,id:’Address1_StateOrProvince’},
{label: ‘Country’, value: ‘Address1_Country’,id:’Address1_Country’}]
}
];

$(‘#jqxtree’).jqxTree({source: listSource, height: ‘400px’,hasThreeStates: true, checkboxes: true, width: ‘330px’});
$(“#jqxtree”).css(‘visibility’, ‘visible’);

$(‘#jqxtree’).on(‘checkChange’, function (event)
{

var htmlElement = event.args.element;
var item = $(‘#jqxtree’).jqxTree(‘getItem’, htmlElement);
$(“#datagrid”).jqxGrid(‘beginupdate’);

if (event.args.checked)
{
$(“#datagrid”).jqxGrid(‘showcolumn’,item.value);

}
else
{
$(“#datagrid”).jqxGrid(‘hidecolumn’, item.value);

}
$(“#datagrid”).jqxGrid(‘endupdate’);

});

Note: The above code is hiding and showing but when doing for the group at group level check is taking too much time to process and throwing script error.

Please look into this…

March 12, 2014 at 5:51 am Jqx Tree checkboxes shoud hide/show jqxgrid columns #50870

Dimitar
Participant

Hi nitendrasingh,

Could you, please, post the error message, too?

Best Regards,
Dimitar

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

March 12, 2014 at 9:01 am Jqx Tree checkboxes shoud hide/show jqxgrid columns #50899

nitendrasingh
Participant

Hi Dimitar,

its poping warning saying,

“stop running the script?

A script on this page is causing your web browser to run slowly.
if it continues to run,your computer might become unresponsive.”

I find the iteration is happening twice which is taking time.. so throwing above error.

Please help me on this…

Thanks,
Nitendra

March 12, 2014 at 1:55 pm Jqx Tree checkboxes shoud hide/show jqxgrid columns #50931

Dimitar
Participant

Hi Nitendra,

The slowing may be caused by hasThreeStates: true. When you check/uncheck a higher-level item, the checkChange event is fired for each its “children”, too, and vice versa. Try setting hasThreeStates to false.

Best Regards,
Dimitar

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

Posts

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

You must be logged in to reply to this topic.