jQWidgets Forums

Tagged: column, columns, datafileds, dynamic, grid, jqxgrid, json, type

This topic contains 6 replies, has 3 voices, and was last updated by samratsaha2 9 years, 7 months ago.

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

Author

Dynamic columns and datafields Posts
July 24, 2014 at 8:44 pm Dynamic columns and datafields #57675

shashank.bargaje
Participant

Hello,

I have followed this example for dynamic columns http://www.jqwidgets.com/community/topic/need-to-create-grid-columns-dynamically-from-json/ but the issue is that the datafields are mentioned in static here. I want the data fields also to be dynamic? The datafields and columns will be populated after the data is returned from a webservice. Thank you

July 25, 2014 at 5:08 am Dynamic columns and datafields #57685
Dimitar
Participant
Hello shashank.bargaje,

Here is an update of the example in that forum topic with dynamic datafields. We hope it is helpful to you. Please note that this way the type of each datafield is not specified, which may result in unexpected behaviour.
```
<!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 json = '[{ "columns": [{ "text": "Name", "datafield": "name", "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" }] }, {"rows" : [{"id": "1", "name": "Hot Chocolate", "type": "Chocolate Beverage", "calories": "370", "totalfat": "16g", "protein": "14g"}, {"id": 2, "name": "Peppermint Hot Chocolate", "type": "Chocolate Beverage", "calories": "440", "totalfat": "16g", "protein": "13g"}, {"id": "3", "name": "Salted Caramel Hot Chocolate", "type": "Chocolate Beverage","calories": "450", "totalfat": "16g", "protein": "13g"}]}]';
            var obj = $.parseJSON(json);
            var columns = obj[0].columns;
            var datafields = new Array();
            for (var i = 0; i < columns.length; i++) {
                datafields.push({ name: columns[i].datafield });
            }
            var rows = obj[1].rows;
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: datafields,
                id: 'id',
                localdata: rows
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                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>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
July 25, 2014 at 4:24 pm Dynamic columns and datafields #57720

shashank.bargaje
Participant

Hello,

Thank you for the reply. The Json string though does not arrive in this fashion.It arrives after data is returned in download complete function in dataAdapter so how can I send it to source then? Also the json string returning is like this: var jsonObj = [{ “last name”: “Wheaton”, “first name”: “Rosalba”, “middle name”: “”, “guardian id”: “542600”, “subscriber id”: “608947408”, “amount”: 50, “value1”: null}];.How can this be done?
Thank you

July 28, 2014 at 6:01 am Dynamic columns and datafields #57740
Dimitar
Participant
Hi shashank.bargaje,

In that case, you can try the following approach (you can make all these settings in the downloadComplete of your first data adapter):
```
<!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 json = '[{ "last name": "Wheaton", "first name": "Rosalba", "middle name": "", "guardian id": "542600", "subscriber id": "608947408", "amount": 50, "value1": null}]';
            var obj = $.parseJSON(json);
            var datafields = new Array();
            var columns = new Array();
            for (var i in obj[0]) {
                datafields.push({ name: i });
                columns.push({ text: i, datafield: i });
            }
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: datafields,
                id: 'subscriber_id',
                localdata: json
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                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>
```
If you only receive the same type of data (with the same datafields) each time, we recommend defining the source datafields and columns manually.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
July 31, 2014 at 11:50 pm Dynamic columns and datafields #57884

shashank.bargaje
Participant

Hello Dimitar,

Thank you. I wanted to ask how I can put the column type in this now that the data is received dynamically? Any help would be great

August 4, 2014 at 8:45 am Dynamic columns and datafields #57984

Dimitar
Participant

Hi shashank.bargaje,

You would have to somehow include this information in the source data and then push it when populating the datafields array, i.e.:

datafields.push({ name: i, type: x });

where x is the data for the datafield type.

Best Regards,
Dimitar

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

October 1, 2015 at 10:46 pm Dynamic columns and datafields #76352

samratsaha2
Participant

Here is an example how to accomplish in XML

<!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 = ‘<?xml version=”1.0″?><REQUEST><COLUMN_HEADERS><COLUMN datafield=”NAME” type=”string”>Customer Name</COLUMN><COLUMN datafield=”GEOCODE_MATCH” type=”string”>Geocode Match</COLUMN><COLUMN datafield=”HOUSE” type=”string”>House #</COLUMN><COLUMN datafield=”STREET” type=”string”>Street Name</COLUMN><COLUMN datafield=”CITY” type=”string”>City</COLUMN><COLUMN datafield=”STATE” type=”string”>State</COLUMN><COLUMN datafield=”ZIP_CD” type=”string”>Zip Code</COLUMN></COLUMN_HEADERS><CUSTOMERS><CUSTOMER><NAME>NORTH WEST 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></CUSTOMER><CUSTOMER><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></CUSTOMER></CUSTOMERS></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’) } );
columns.push({text : $(this).text(), datafield : $(this).attr(‘datafield’) });
});

var source =
{
datatype: “xml”,
datafields: datafields,
root: “CUSTOMERS”,
record: “CUSTOMER”,
id: ‘m\\:properties>d\\:NAME’,
localdata: customersData
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: 800,
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>
Author

Posts

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

You must be logged in to reply to this topic.