jQuery UI Widgets Forums Grid Hide/Show Columns in Grid Dynamically

This topic contains 2 replies, has 2 voices, and was last updated by  Dimitar 4 years, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Hide/Show Columns in Grid Dynamically #76483

    samratsaha2
    Participant

    I have written following code to init a Grid dynamically with some columns to show and some columns to hide; I am reading dynamically this property from xml. With column property hidden : $(this).attr(‘hide’) as written below , the grid is not loading ( showing blank page , but no error )

    Can you please give some example where I will be able to hide/show column reading from xml ?

    I am using JqxWidget 3.8.2; when I delete the hidden property I can load the grid

    var customersData = ‘<REQUEST><COLUMN_HEADERS><COLUMN datafield=”NAME” type=”string” width=”250″ hide=”false”>Customer Name</COLUMN><COLUMN datafield=”GEOCODE_MATCH” type=”string” width=”250″ hide=”false”>Geocode Match</COLUMN><COLUMN datafield=”HOUSE” type=”string” width=”250″ hide=”false”>House #</COLUMN><COLUMN datafield=”STREET” type=”string” width=”250″ hide=”false”>Street Name</COLUMN><COLUMN datafield=”CITY” type=”string” width=”250″ hide=”false”>City</COLUMN><COLUMN datafield=”STATE” type=”string” width=”250″ hide=”false”>State</COLUMN><COLUMN datafield=”ZIP_CD” type=”string” width=”250″ hide=”false”>Zip Code</COLUMN></COLUMN_HEADERS><STOPS><STOP><NAME>SUREWEST COMMUNICATIONS</NAME><GEOCODE_MATCH>M</GEOCODE_MATCH><HOUSE>7664</HOUSE><STREET>OLD AUBURN RD BLD B</STREET><CITY>CITRUS HEIGHTS</CITY><STATE>CA</STATE><ZIP_CD>95610-3831</ZIP_CD></STOP><STOP><NAME>SAMRAT COMMUNICATIONS</NAME><GEOCODE_MATCH>U</GEOCODE_MATCH><HOUSE>7664</HOUSE><STREET>OLD FARM</STREET><CITY>CITRUS HEIGHTS</CITY><STATE>CA</STATE><ZIP_CD>95610-3831</ZIP_CD></STOP></STOPS></REQUEST>’;

    var xmlDoc = $.parseXML(customersData);
    var columns = new Array();
    var datafields = new Array();
    $(xmlDoc).find(‘COLUMN’).each( function (){
    datafields.push({name : $(this).attr(‘datafield’), map: ‘m\\:properties>d\\:’+$(this).attr(‘datafield’), type: $(this).attr(‘type’) } );
    alert($(this).attr(‘hide’));
    columns.push({text : $(this).text(), datafield : $(this).attr(‘datafield’), width : $(this).attr(‘width’), hidden : $(this).attr(‘hide’) });
    });

    my complete code as below ——————————————————————————————–

    <!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”>
    $(document).ready(function () {

    var customersData = ‘<REQUEST><COLUMN_HEADERS><COLUMN datafield=”NAME” type=”string” width=”250″ hide=”false”>Customer Name</COLUMN><COLUMN datafield=”GEOCODE_MATCH” type=”string” width=”250″ hide=”false”>Geocode Match</COLUMN><COLUMN datafield=”HOUSE” type=”string” width=”250″ hide=”false”>House #</COLUMN><COLUMN datafield=”STREET” type=”string” width=”250″ hide=”false”>Street Name</COLUMN><COLUMN datafield=”CITY” type=”string” width=”250″ hide=”false”>City</COLUMN><COLUMN datafield=”STATE” type=”string” width=”250″ hide=”false”>State</COLUMN><COLUMN datafield=”ZIP_CD” type=”string” width=”250″ hide=”false”>Zip Code</COLUMN></COLUMN_HEADERS><STOPS><STOP><NAME>SUREWEST COMMUNICATIONS</NAME><GEOCODE_MATCH>M</GEOCODE_MATCH><HOUSE>7664</HOUSE><STREET>OLD AUBURN RD BLD B</STREET><CITY>CITRUS HEIGHTS</CITY><STATE>CA</STATE><ZIP_CD>95610-3831</ZIP_CD></STOP><STOP><NAME>SAMRAT COMMUNICATIONS</NAME><GEOCODE_MATCH>U</GEOCODE_MATCH><HOUSE>7664</HOUSE><STREET>OLD FARM</STREET><CITY>CITRUS HEIGHTS</CITY><STATE>CA</STATE><ZIP_CD>95610-3831</ZIP_CD></STOP></STOPS></REQUEST>’;

    /*
    var customersData =
    ‘<?xml version=”1.0″?><REQUEST><COLUMN_HEADERS><COLUMN datafield=”NAME” type=”string” width=”250″ hidden=”FALSE”>Customer Name</COLUMN><COLUMN datafield=”GEOCODE_MATCH” type=”string” width=”1″ hidden=”FALSE”>Geocode Match</COLUMN><COLUMN datafield=”HOUSE” type=”string” width=”5″ hidden=”FALSE”>House </COLUMN><COLUMN datafield=”STREET” type=”string” width=”64″ hidden=”FALSE”>Street Name</COLUMN><COLUMN datafield=”CITY” type=”string” width=”30″ hidden=”FALSE”>City</COLUMN><COLUMN datafield=”STATE” type=”string” width=”2″ hidden=”FALSE”>State</COLUMN><COLUMN datafield=”ZIP_CD” type=”string” width=”12″ hidden=”FALSE”>Zip Code</COLUMN><COLUMN datafield=”COUNTRY_CD” type=”string” width=”4″ hidden=”TRUE”>CC</COLUMN><COLUMN datafield=”COMPANY_CD” type=”string” width=”4″ hidden=”FALSE”>CC</COLUMN><COLUMN datafield=”NUMBER” type=”string” width=”24″ hidden=”FALSE”>Customer Number</COLUMN><COLUMN datafield=”ID” type=”string” width=”30″ hidden=”FALSE”>Customer ID(S)</COLUMN><COLUMN datafield=”PREMISE_ID” type=”string” width=”250″ hidden=”TRUE”>Premise ID</COLUMN><COLUMN datafield=”OPERATION_AREA_CD” type=”string” width=”10″ hidden=”FALSE”>Operation Area</COLUMN><COLUMN datafield=”LOB_DESC” type=”string” width=”30″ hidden=”FALSE”>LOB</COLUMN><COLUMN datafield=”ROUTE_TYPE” type=”string” width=”4″ hidden=”FALSE”>Route Type</COLUMN><COLUMN datafield=”ERL_X” type=”string” width=”21″ hidden=”FALSE”>ERL_X</COLUMN><COLUMN datafield=”ERL_Y” type=”string” width=”21″ hidden=”FALSE”>ERL_Y</COLUMN><COLUMN datafield=”SIDE_OF_STREET” type=”string” width=”1″ hidden=”FALSE”>Side Of Street</COLUMN><COLUMN datafield=”ROADS_UID” type=”string” width=”1″ hidden=”FALSE”>ROADS UID</COLUMN><COLUMN datafield=”LOCATOR” type=”string” width=”1″ hidden=”FALSE”>Locator</COLUMN><COLUMN datafield=”ERL_GEOCODE” type=”string” width=”50″ hidden=”FALSE”>eRL Geocode</COLUMN><COLUMN datafield=”EXTERNAL_GEOCODE” type=”string” width=”50″ hidden=”FALSE”>OCS Geocode</COLUMN><COLUMN datafield=”DRIVER_CONFIRMATION” type=”string” width=”50″ hidden=”FALSE”>Driver Confirmation</COLUMN><COLUMN datafield=”CORRECTED_HOUSE” type=”string” width=”5″ hidden=”FALSE”>Corrected House </COLUMN><COLUMN datafield=”CORRECTED_STREET” type=”string” width=”64″ hidden=”FALSE”>Corrected Street Name</COLUMN><COLUMN datafield=”CORRECTED_CITY” type=”string” width=”30″ hidden=”FALSE”>Corrected City</COLUMN><COLUMN datafield=”CORRECTED_STATE” type=”string” width=”2″ hidden=”FALSE”>Corrected State</COLUMN><COLUMN datafield=”CORRECTED_ZIP_CD” type=”string” width=”12″ hidden=”FALSE”>Corrected Zip Code</COLUMN><COLUMN datafield=”CORRECTED_ERL_X” type=”string” width=”21″ hidden=”FALSE”>Corrected ERL_X</COLUMN><COLUMN datafield=”CORRECTED_ERL_Y” type=”string” width=”21″ hidden=”FALSE”>Corrected ERL_Y</COLUMN><COLUMN datafield=”CORRECTED_ERL_GEOCODE” type=”string” width=”50″ hidden=”FALSE”>Corrected eRL Geocode</COLUMN><COLUMN datafield=”CORRECTED_SIDE_OF_STREET” type=”string” width=”1″ hidden=”FALSE”>Corrected Side Of Street</COLUMN><COLUMN datafield=”CORRECTED_ROADS_UID” type=”string” width=”1″ hidden=”FALSE”>Corrected ROADS UID</COLUMN><COLUMN datafield=”CORRECTED_LOCATOR” type=”string” width=”1″ hidden=”FALSE”>Corrected Locator</COLUMN></COLUMN_HEADERS><STOPS><STOP DRVR_CONFIRMED_STOP_LOC_REQD=”TRUE”><NAME>SUREWEST COMMUNICATIONS</NAME><GEOCODE_MATCH>M</GEOCODE_MATCH><HOUSE>7664</HOUSE><STREET>OLD AUBURN RD BLD B</STREET><CITY>CITRUSHEIGHTS</CITY><STATE>CA</STATE><ZIP_CD>95610-3831</ZIP_CD><COUNTRY_CD>US</COUNTRY_CD><COMPANY_CD>502</COMPANY_CD><NUMBER>71158</NUMBER><ID>126894553009</ID><PREMISE_ID/><OPERATION_AREA_CD>2905</OPERATION_AREA_CD><LOB_DESC>COMMERCIAL</LOB_DESC><ROUTE_TYPE>FC</ROUTE_TYPE><ERL_X>456.123</ERL_X><ERL_Y>453.123</ERL_Y></STOP><STOP DRVR_CONFIRMED_STOP_LOC_REQD=”TRUE”><NAME>VILLAGE AT CARMICHAEL</NAME><GEOCODE_MATCH>M</GEOCODE_MATCH><HOUSE>8740</HOUSE><STREET>FAIR OAKS BLVD</STREET><CITY>CARMICHAEL</CITY><STATE>CA</STATE><ZIP_CD>95608-2526</ZIP_CD><COUNTRY_CD>US</COUNTRY_CD><COMPANY_CD>502</COMPANY_CD><NUMBER>70442</NUMBER><ID>121425843007</ID><PREMISE_ID>M934614</PREMISE_ID><OPERATION_AREA_CD>2905</OPERATION_AREA_CD><LOB_DESC>COMMERCIAL</LOB_DESC><ROUTE_TYPE>CY</ROUTE_TYPE><ERL_X>789.789</ERL_X><ERL_Y>786.789</ERL_Y></STOP><STOP DRVR_CONFIRMED_STOP_LOC_REQD=”FALSE”><NAME>MACCAFERRI INC</NAME><GEOCODE_MATCH>M</GEOCODE_MATCH><HOUSE>4242</HOUSE><STREET>FORCUM AVE</STREET><CITY>MCCLELLAN</CITY><STATE>CA</STATE><ZIP_CD>95652</ZIP_CD><COUNTRY_CD>US</COUNTRY_CD><COMPANY_CD>502</COMPANY_CD><NUMBER>70833</NUMBER><ID>124352463009</ID><PREMISE_ID>M3489905</PREMISE_ID><OPERATION_AREA_CD>2905</OPERATION_AREA_CD><LOB_DESC>COMMERCIAL</LOB_DESC><ROUTE_TYPE>FC</ROUTE_TYPE><ERL_X>123.123</ERL_X><ERL_Y>124.124</ERL_Y></STOP></STOPS></REQUEST>’;
    */

    var xmlDoc = $.parseXML(customersData);
    var columns = new Array();
    var datafields = new Array();
    $(xmlDoc).find(‘COLUMN’).each( function (){
    datafields.push({name : $(this).attr(‘datafield’), map: ‘m\\:properties>d\\:’+$(this).attr(‘datafield’), type: $(this).attr(‘type’) } );
    alert($(this).attr(‘hide’));
    columns.push({text : $(this).text(), datafield : $(this).attr(‘datafield’), width : $(this).attr(‘width’), hidden : $(this).attr(‘hide’) });
    });

    alert(columns.length);

    var source =
    {
    datatype: “xml”,
    datafields: datafields,
    root: “STOPS”,
    record: “STOP”,
    localdata: customersData
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $(“#jqxgrid”).jqxGrid(
    {
    width: 1200,
    source: dataAdapter,
    columnsresize: true,
    columns: columns
    });
    });
    </script>
    </head>
    <body class=’default’>
    <div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
    <div id=”jqxgrid”>
    </div>
    </div>
    </body>
    </html>

    Hide/Show Columns in Grid Dynamically #76484

    samratsaha2
    Participant

    I found the solution,

    I have changed the logic to set hidden property as below – works fine!
    But one recommendation,

    even if I set hidden : false should not break the UI , I understand that is default hidden is false still if user want to specify hidden : false should not break the UI .

    $(xmlDoc).find(‘COLUMN’).each( function (){
    datafields.push({name : $(this).attr(‘datafield’), map: ‘m\\:properties>d\\:’+$(this).attr(‘datafield’), type: $(this).attr(‘type’) } );
    if($(this).attr(‘hide’) == ‘false’){
    columns.push({text : $(this).text(), datafield : $(this).attr(‘datafield’), width : $(this).attr(‘width’) });
    }else{
    columns.push({text : $(this).text(), datafield : $(this).attr(‘datafield’), width : $(this).attr(‘width’), hidden : true });
    }
    });

    Hide/Show Columns in Grid Dynamically #76491

    Dimitar
    Participant

    Hello samratsaha2,

    I think the issue occurs because you actually try to pass a string value (‘true’ or ‘false’) to the hidden property rather than a Boolean (true or false). You can convert the strings with JSON.parse(), i.e.:

    columns.push({
        text: $(this).text(),
        datafield: $(this).attr('datafield'),
        width: $(this).attr('width'),
        hidden: JSON.parse($(this).attr('hide'))
    });

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.