jQuery UI Widgets › Forums › Getting Started › Reordering is not happening for hidden columns in jqxgrid

Tagged: , , , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Reordering is not happening for hidden columns in jqxgrid Posts
  • February 9, 2014 at 1:23 pm Reordering is not happening for hidden columns in jqxgrid #49183

    satheesh.r11
    Participant

    When i am trying to reorder the columns of the jqxgrid, below things happen
    1) Reordering happens properly for the columns which are not hidden.
    2) but reordering not happens for hidden fields.
    can you please suggest how to do this.

    February 10, 2014 at 10:16 am Reordering is not happening for hidden columns in jqxgrid #49231

    Dimitar
    Participant

    Hello satheesh.r11,

    Please check out the following example, based on the demo Show/Hide Columns and provide us with a step-by-step guide to reproducing the issue if you still experience it. Make sure you are using the latest version of jQWidgets (3.2.1).

    <!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/jqxgrid.columnsreorder.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="../../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: 700,
                source: dataAdapter,
                ready: function () {
                    // callback function which is called by jqxGrid when the widget is initialized and the binding is completed.
                },
                columnsresize: true,
                columnsreorder: 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}];

            $("#jqxlistbox").jqxListBox({ source: listSource, width: 200, height: 200, checkboxes: true });
            $("#jqxlistbox").on('checkChange', function (event) {
                $("#jqxgrid").jqxGrid('beginupdate');
                if (event.args.checked) {
                    $("#jqxgrid").jqxGrid('showcolumn', event.args.value);
                }
                else {
                    $("#jqxgrid").jqxGrid('hidecolumn', event.args.value);
                }
                $("#jqxgrid").jqxGrid('endupdate');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style="float: left;" id="jqxlistbox">
        </div>
        <div style="margin-left: 20px; float: left;" id="jqxgrid">
        </div>
    </div>
</body>
</html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.