jQWidgets Forums

Tagged: datagrid columns, jquery datagrid, jquery grid widget, jqxgrid

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

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

Author

Columns Dynamically in grid? Posts

September 6, 2012 at 9:27 pm Columns Dynamically in grid? #7488

Member

Hi, i need create a grid with columns dynamics but it doesnt work !! it is possible. that my code.

   $.ajax({
            type: 'POST',
            url: URl,
            data: data ,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: sucess,
            error: error
        });
		function sucessokey(result) {

            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'avarible' },
                ]
            };
            var respuesta = $.parseJSON(result.d);
            source.localdata = respuesta.result.Table;
            var cantidad = respuesta._columnInfos.length;

            for (var i = 0; i < cantidad; i++) {
                var fila = respuesta._columnInfos[i];
                gridColumns.push({ text: fila.hearder, dataField: fila.datafield, cellsalign: 'left', width: 120 }); //add a column
            }
            cantidad = respuesta._datas.length;
            for (var i = 0; i < cantidad; i++) {
                source.datafields.push({ name: respuesta._datas[i].datafields });// add a new datafield
            }

            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#SuperGrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                ready: function () {
                },
                columns: [
                  { text: 'avarible', datafield: 'avarible', width: 250 }
              ]
            });
        }
 $("#SuperGrid").jqxGrid({ columns: columns });
i tried put this function in  property  " ready"  and " bind("bindingcomplete", function () {" but nothing happen

I could see that  my columns exist but the grid doesn't refresh and it shows one columns.
I need to do this because i don't know which it is the number or name of my columns.
any solution?
best regards

September 7, 2012 at 3:32 am Columns Dynamically in grid? #7493

Peter Stoev

Keymaster

Hi jose Ivan,

You can find below a working sample which changes the Grid columns dynamically. The columns are changed when the user clicks on a button. The sample is tested with jQWidgets 2.4.

<!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.7.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 data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'CompanyName' },
                    { name: 'ContactName' },
                    { name: 'ContactTitle' },
                    { name: 'Address' },
                    { name: 'City' },
                    { name: 'Country' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var columns = [
                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                    { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                    { text: 'City', datafield: 'City', width: 120 },
                    { text: 'Country', datafield: 'Country', width: 120 }
                ]
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columnsresize: true,
                columns: [{ text: 'Company Name', datafield: 'CompanyName', width: 250}]
            });
            $("#Button").click(function () {
                $("#jqxgrid").jqxGrid({ columns: columns });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
    <input type="button" value="Click me" id="Button" />
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 18, 2015 at 8:43 pm Columns Dynamically in grid? #75996

edison2228

Participant

ayudemen por favor como hago que mi jqxGri sea dinamico en columnas y filas, actualmente ya me imprime las etiquetas de las columans pero los campos de datos no me imprime,
estas son las etiquetas traidas de una base de dtos de SQL:
[ { “c1”: “Nombre” }, { “c1”: “Valor” }, { “c1”: “Cantidad” }, { “c1”: “Activo” }, { “c1”: “Pasivo” } ] // esto si mi imprime en mi grid

estos son los campos de datos: no me imprime esto en mi grid ayudemen por favor me muestra un error: en el datafield
[ { “c1”: “Bancos”, “c2”: 69774.12, “c3”: 4, “c4”: 69774.12, “c5”: 0 }, { “c1”: “Clientes”, “c2”: 8889.92, “c3”: 5, “c4”: 8889.92, “c5”: 0 }, { “c1”: “Proveedores”, “c2”: -11605.7, “c3”: 1, “c4”: -14763.7, “c5”: 3158 }, { “c1”: “Inventarios”, “c2”: 103385.74, “c3”: 121, “c4”: 103385.74, “c5”: 0 }, { “c1”: “Activos Fijos”, “c2”: 0, “c3”: 0, “c4”: 0, “c5”: 0 } ]

$(document).ready(function(){
///// ROWS //////////
$.get(“http://192.168.181.47:8081/mbamovil/pages/clientes/?vSesion=”+SessionID+”&vSQL=SELECT Json_Datos FROM RSRV_Reportes_Impresion WHERE (codigo = ‘Emp_Saldo_Resu1’) AND (CORP = ‘CONMX’) ORDER BY Fecha_Creacion DESC LIMIT 1 INTO :atGen1”, function(data, status){
var myobj = JSON.parse(data);
var datafields = new Array();
for (var j=0; j<(myobj.length);j++) {

var colStr = $.trim(myobj[j][‘c1’]);
datafields.push({name:$.trim(myobj[j][‘c1’])});
// alert(“DUDA”+colStr)
};
//////// ETIQUETAS COLUMNAS //////////
$.get(“http://192.168.181.47:8081/mbamovil/pages/clientes/?vSesion=”+SessionID+”&vSQL=SELECT Json_Etiquetas FROM RSRV_Reportes_Impresion WHERE (codigo = ‘Emp_Saldo_Resu1’) AND (CORP = ‘CONMX’) ORDER BY Fecha_Creacion DESC LIMIT 1 INTO :atGen1″, function(data, status){
var myobj1 = JSON.parse(data);

/*for(var i=0;i<(myobj.length);i++){
var j=1;
var res;
res= j+i
// var colStr = $.trim(myobj[0][‘c’+res]);
alert(“Prueba”+$.trim(myobj[i][‘c’+res]));
//columns.push({ text:$.trim(myobj1[i][‘c1’]), dataField: colStr.datafield});
datafields.push({name:$.trim(myobj[0][‘c’+res])});
}

var source =
{
datatype: “json”,
datafields: datafields,

id: ‘c1’,
localdata: myobj1
};

var dataaptartercharts = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid({
width: ‘100%’,
theme: ‘energyblue’,
//columnsresize: true,
source: dataaptartercharts,
columns:columns

});
});
});

});

September 19, 2015 at 7:22 am Columns Dynamically in grid? #76006

Peter Stoev

Keymaster

Hi edison2228,

Sorry, I do not understand your language. Dynamic columns demo however is available in jqxGrid’s demos.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.