jQWidgets Forums

Tagged: grid, hide column, show grid column

This topic contains 6 replies, has 2 voices, and was last updated by Peter Stoev 13 years ago.

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

Author

Show/Hide Grid Column Posts

June 1, 2012 at 10:27 am Show/Hide Grid Column #4523

SRK

Participant

Hi,

Is it possible to show/Hide Grid Columns through UI?.

Regards,
/Srinivas

June 3, 2012 at 2:57 pm Show/Hide Grid Column #4553

Peter Stoev

Keymaster

Hi srinivas,

There’s still no UI for showing/hiding columns. This can be done only through the Grid’s API.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 4, 2012 at 12:21 pm Show/Hide Grid Column #4574

SRK

Participant

Thanks for the reply peter

I have few more questions

For the Jqxgrid:
1. Could we able to set Column Name Text dynamically.
2. Adding Checkbox Column to the grid with (select all option) Checkbox Header.

Regards,
/Srinivas

June 4, 2012 at 7:44 pm Show/Hide Grid Column #4596

Peter Stoev

Keymaster

Hi Srinivas,

To set a new column text, use the ‘setcolumnproperty’ method.

For 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.7.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">
        $(document).ready(function () {
            var data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany", "Available": "false" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico", "Available": "true" }]';
            // prepare the data
            var source =
            {
                localdata: data,
                datatype: "json",
                datafields: [
                    { name: 'CompanyName' },
                    { name: 'ContactName' },
                    { name: 'ContactTitle' },
                    { name: 'City' },
                    { name: 'Country' },
                    { name: 'Available', type: 'boolean' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                columns: [
                  { text: 'Available', columntype: 'checkbox', datafield: 'Available', width: 250 },
                  { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                  { text: 'Contact Name', datafield: 'ContactName', width: 250 },
                  { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                  { text: 'City', datafield: 'City', width: 120 },
                  { text: 'Country', datafield: 'Country', minwidth: 120 }
              ]
            });
            $("#jqxgrid").jqxGrid('setcolumnproperty', 'Available', 'text', 'New Text');
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

2. jqxGrid does not support headers with jqxCheckbox. However, you can put a checkbox image inside the column’s header by customizing its rendering. You can customize the rendering by associating a rendering function to a Grid column i.e by setting the ‘renderer’ property of a column to a function that returns HTML.

The following sample selects all Grid rows.

<!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.7.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">
        $(document).ready(function () {
            var data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany", "Available": "false" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico", "Available": "true" }]';
            // prepare the data
            var source =
            {
                localdata: data,
                datatype: "json",
                datafields: [
                    { name: 'CompanyName' },
                    { name: 'ContactName' },
                    { name: 'ContactTitle' },
                    { name: 'City' },
                    { name: 'Country' },
                    { name: 'Available', type: 'boolean' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                selectionmode: 'multiplerows',
                columns: [
                  { text: 'Available', columntype: 'checkbox', datafield: 'Available', width: 250 },
                  { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                  { text: 'Contact Name', datafield: 'ContactName', width: 250 },
                  { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                  { text: 'City', datafield: 'City', width: 120 },
                  { text: 'Country', datafield: 'Country', minwidth: 120 }
              ]
            });
            for (var index = 0; index < dataAdapter.records.length; index++) {
                $("#jqxgrid").jqxGrid('selectrow', index);
            }
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 6, 2012 at 9:24 am Show/Hide Grid Column #4640

SRK

Participant

Hi Peter,

For the second query :

1. I have tried adding Image in the column header instead of jqxCheckbox, and for the rows i am using jqxCheckboxes, it do worked.
2. On ColumnClick event ,it is selecting all the rows but the issue was how to make the rows Jqxcheckboxes state to be changed from UnCheck to Check or vice versa on the column header click.
3. And how to Deselect(and Uncheck JqxCheckboxes) in all the rows on the ColumnClick event as we are not maintaining any state for the columnHeader click event.

Regards,
/Srk

June 6, 2012 at 10:36 am Show/Hide Grid Column #4642

SRK

Participant

Hi Peter,

For the above query , i found the solution to maintain the state of the column header click event. but still i couldn’t found any property in the grid to set jqxCheckbox get ‘checked’ or ‘unchecked’ on ColumnHeaderClick event.

Regards,
/Srinivas

June 6, 2012 at 10:47 am Show/Hide Grid Column #4643

Peter Stoev

Keymaster

Hi Srinivas,

Have you tried to update the value of the checkbox cells by using the Grid’s ‘setcellvalue’ method? The method has 4 params – row index, column’s datafield, new cell value and an optional boolean parameter that refreshes the Grid’s UI after changing the value. In your bulk update, you can call that method for all cells in the checkbox column and set the last parameter of the ‘setcellvalue’ method to true only for the last row i.e to limit the UI refreshes to 1 when you change a cell’s value.

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.