Dynamic columns Grid

[frankfuMember]

Hello
I would like to realise the dynamic columns in jqgridm. that means the columns info will be sent by source. i have taked the columnsinfo by “beforeprocessing” and stock in source.columns, but it seems that it does not work with “columns: source.columns” in $(“#jqxgrid”).jqxGrid. could you give me some sugestion? thank you very much.

<script type="text/javascript">
	
	
	
            $(document).ready(function () {
            var theme = getDemoTheme();
	
				var url = "/appproject/savedata/";
				//var colonneinfo = [] //  = [{ text: 'Acol2', datafield: 'Acol2'},{ text: 'Acol3', datafield: 'Acol3'}]
				var source =
				{
					datatype: 'json',
					root : 'rowsinfo',
					url :url,
					columns: [],
					beforeprocessing: function (data) {
						source.columns = data.columnsinfo
					}
					
				};
			
				var dataAdapter = new $.jqx.dataAdapter(source)
				
            // creage jqxgrid
            $("#jqxgrid").jqxGrid(
            {
                width: 970,
                source: dataAdapter,
                theme: theme,
                columns: source.columns
            });
			
        });
			
    </script>

[Peter StoevKeymaster]

Hi frankfu,

The Grid expects an Array for the columns property. Anything else except an Array will not be accepted. Make sure in your code that: data.columnsinfo is an Array defined in the same way as in our demos and it will work.

Best Regards,
Peter Stoev

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

[frankfuMember]

thank you for your sugestion, it work with your method.

on the other hand, i met a problem when i refresh the grid

<script type="text/javascript">
		
            $(document).ready(function () {
            var theme = getDemoTheme();
// rules data		
				var url = "/appproject/savedata/";
				var source =
				{
					datatype: 'json',
					root : 'rowsinfo',
					url :url,
					cache: false,
					columns:[],
					beforeprocessing: function (data) {
						alert("before")
						var columnsdata = new Array();
						for (k in data.columnsinfo){
							var col={};
							col.text = data.columnsinfo[k]["text"];
							col.datafield = data.columnsinfo[k]["datafield"];
							columnsdata.push(col);
							source.columns = columnsdata
						}
						$("#jqxgrid").jqxGrid({columns : source.columns});
					},
					data: {
						startcolumn: 1,
					}
					
				};
				
            // creage jqxgrid
            $("#jqxgrid").jqxGrid(
            {
                width: 970,
                source: source,
                theme: theme,
            });
			
			$("#jqxButton").jqxButton({ width: '150', theme: theme });
			$("#jqxButton").on('click', function () {
				source.data.startcolumn = 20;
				$("#jqxgrid").jqxGrid({source: source})
                });
        });
			
    </script>

the Json return by url is like

{
columnsinfo: [
{text: "Acol1",datafield: "Acol1"},
{text: "Acol2",datafield: "Acol2"},
{text: "Acol3",datafield: "Acol3"}],
rowsinfo: [
{Acol1: "1_1",Acol2: "1_2",Acol3: "1_3"},
{Acol1: "2_1",Acol2: "2_2",Acol3: "2_3"},
{Acol1: "3_1",Acol2: "3_2",Acol3: "3_3"}]
}

and like this after click the button

{
columnsinfo: [
{text: "Acol20",datafield: "Acol20"},
{text: "Acol21",datafield: "Acol21"},
{text: "Acol22",datafield: "Acol22"}
],
rowsinfo: [
{Acol20: "20_20",Acol21: "20_21",Acol22: "20_22"},
{Acol20: "21_20",Acol21: "21_21",Acol22: "21_22"},
{Acol20: "22_20",Acol21: "22_21",Acol22: "22_22"}]
}

after click the button, the new json is charged and counted because the columsname in the grid is changed. but the data is empty.
it seems that is because of the change of the columns name, if the json file returned with the same columns name and with the different data, it works.

can you help me on this issue?
thank you very much

[Peter StoevKeymaster]

Hi frankfu,

If you change the column’s datafield, it will work if the column’s datafield finds a matching a datafield name from the source object’s datafields array.

Best Regards,
Peter Stoev

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

[frankfuMember]

Hello peter
i have do some test but still doesn’t works, can you help me to find de problem?

i use an exemple demo of jqwidgets and just add a button to change the source.

<script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "beverages.txt";
            // prepare the data
            var source =
            {
                datatype: "json",
                id: 'id',
                url: url
            };
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: source,
                theme: theme,
                columnsresize: true,
                columns: [
                  { text: 'Name', datafield: 'name', width: 250 },
                  { text: 'Beverage Type', datafield: 'type', width: 250 },
              ]
            });
			
			$("#jqxButton").jqxButton({ width: '150', theme: theme });
			$("#jqxButton").on('click', function () {
				source.url = "beverages2.txt";
				$("#jqxgrid").jqxGrid(
				{
				source: source,
				columns: [
                  { text: 'Name', datafield: 'name2', width: 250 },
                  { text: 'Beverage Type', datafield: 'type2', width: 250 },
				]
				})
             });
        });
    </script>

the txt file beverages.txt is

[{
 "id": "1",
 "name": "Hot Chocolate",
 "type": "Chocolate Beverage"
 }, {
 "id": 2,
 "name": "Peppermint Hot Chocolate",
 "type": "Chocolate Beverage"
}]

the txt file beverages2.txt is

[{
 "id": "1",
 "name2": "Hot Chocolate2",
 "type2": "Chocolate Beverage2"
 }, {
 "id": 2,
 "name2": "Peppermint Hot Chocolate2",
 "type2": "Chocolate Beverage2"
}]

thank you very much for your help

[Peter StoevKeymaster]

Hi frankfu,

The source object is missing the initialization of the datafields Array. That is required.

Best Regards,
Peter Stoev

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

[frankfuMember]

Hi peter:

thank you very much.
you are right, i add just

source.datafields=[]
before source.url = “beverages2.txt”;
and it works.

frankfu

[realtekParticipant]

Hi Frankfu,

Do you have the code from your JSON please as I am trying to do a simular thing but I cannot get the write format for the json_encode you are using.

Thanks

[Author]

Posts