Hide/Show Columns in Grid Dynamically - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angular grid, boolean, column, grid, hidden, Hide/Show Columns in Grid Dynamically, jquery grid, jqxgrid, json, parse, string, XML

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

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

Author

Hide/Show Columns in Grid Dynamically Posts
October 6, 2015 at 6:17 pm 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>

October 6, 2015 at 6:27 pm 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 });
}
});

October 7, 2015 at 4:55 am 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/
Author

Posts

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

You must be logged in to reply to this topic.