jQWidgets Forums

Forum Replies Created

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • in reply to: Dynamic columns and data types Dynamic columns and data types #77864

    ThanZel
    Participant

    ^
    Hey Loko
    the format for the JSON data was:

    
    [  
       {  
          "datafields":[//the datafields definition (data[0].datafields) for the dataAdapter 
             {  
                "name":"I",
                "type":"string"
             },
             {  
                "name":"1710",
                "type":"string"
             },
    
    ...
    ...
          ]
       },
       {  
          "columns":[//the columns definition (data[1].columns) for the grid 
             {  
                "text":"ID",
                "datafield":"I",
                "width":"84"
             },
             {  
                "text":"Field Name",
                "datafield":"1710",
                "width":"210"
             },
    ...
    ...
          ]
       },
       {  
          "total":67,//the total number of records (data[2].total) for the virtual pager
          "data":[  //the actual data in records (data[2].data)
             {  
                "I":"1700_1010",
                "1710":"Account Name",
    ...
    ...
             },
             {  
                "I":"1700_2310",
                "1710":"Appllication Name",
    ...
    ...
             },
             {  
                "I":"1700_1840",
                "1710":"Calculated",
    ...
    ...
             },
    ...
    ...
          ]
       }
    ]
    
    in reply to: Dynamic columns and data types Dynamic columns and data types #77848

    ThanZel
    Participant

    Success!!!

    I did it! I used LoadComplete. It is actually pretty simple. Here is the code for anyone interested:

    $(document).ready(function () {
    var url = “GetGridData.php”;

    var source={
    datatype: “json”,
    url: url,
    cache: false,
    root: “data”,// the data is mapped actually in JSON data[2].data
    beforeprocessing: function(data){
    source.datafields = data[0].datafields;
    source.totalrecords = data[2].total;
    },
    id: ‘I’,
    pagenum: 0,
    pagesize: 10
    };

    var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function (data){
    // data is loaded.
    $(“#jqxgrid”).jqxGrid(‘hideloadelement’);
    $(“#jqxgrid”).jqxGrid(‘beginupdate’, true);
    $(“#jqxgrid”).jqxGrid({
    columns: data[1].columns
    });
    $(“#jqxgrid”).jqxGrid(‘endupdate’);
    },
    loadError: function (xhr, status, error){
    // data is not loaded.
    }
    });

    $(“#jqxgrid”).jqxGrid({
    width: 850,
    source: dataAdapter,
    columnsresize: true,
    sortable: true,
    pageable: true,
    virtualmode: true,
    autoheight: true,
    rendergridrows: function(obj){
    return obj.data;
    },
    });
    $(“#jqxgrid”).jqxGrid(‘showloadelement’);
    });

    in reply to: Dynamic columns and data types Dynamic columns and data types #77843

    ThanZel
    Participant

    First of all I want to congatulate the jqwidgets developing team who has done a wonderful job creating very useful and fast jquery widgets however there are some issues they need consideration

    in response to Loko I have to say that I have a similar problem although kind of different nature

    my goal was to create a fully dynamic jqwidget grid which takes all info from json via php. So, I wrote a simple php code which simulates a database connection with paging, filtering and sorting and sends JSON data to the DataAdapter. The JSON structure contains the datafield mapping, the columns mapping, the total row count and the data records.

    I tried 3 approaches each one having a certain problem

    • first approach: simply took datafield and data from JSON but I couldnt manage to transfer columns data from the initial DataAdapter source in order to to initiate the grid. (If I use standard columns everything works great, paging, sorting… etc)

      var source={
      datatype: “json”,
      url: url,
      cache: false,
      root: “data”,
      beforeprocessing: function(data){
      source.datafields = data[0].datafields;
      source.totalrecords = data[2].total;
      },
      id: ‘I’,
      pagenum: 0,
      pagesize: 10
      };
      var dataAdapter = new $.jqx.dataAdapter(source);
      $(“#jqxgrid”).jqxGrid(
      {
      width: 400,
      source: dataAdapter,
      columnsresize: true,
      columns: [
      {
      “text”:”ID”,
      “datafield”:”I”,
      “width”:”84″
      },
      {
      “text”:”Field Name”,
      “datafield”:”1710″,
      “width”:”210″
      },

      ]
      });

      My question is how I can access the dataAdapter source within the Grid declaration something like this: (the code is hypothetical, it doesn’t work)

      
      var source={
          datatype: "json",
          url: url,
          cache: false,
          root: "data",
          beforeprocessing: function(data){		
      	source.datafields = data[0].datafields;
      	source.totalrecords = data[2].total;
          },
          id: 'I',
          pagenum: 0,
          pagesize: 10
      };
      var dataAdapter = new $.jqx.dataAdapter(source);
      $("#jqxgrid").jqxGrid(
      {
          width: 400,
          source: dataAdapter,
          columnsresize: true,
          columns: dataAdapter.source.data[1].columns //assuming columns refers to an actual JSON mapping
      ...
      });
      

      ultimely it would be useful if someone would like to pass more info for the grid (styling, initial settings etc…) in the JSON mapping

    • second apporach: i used an implementation of the dynamic column demo which uses a second DataAdapter on DownloadComplete to retrieve the columns, everything worked fine but paging, sorting and filtering didnt work finally in the grid.
      
      ...
                  var dataAdapter = new $.jqx.dataAdapter(source, {
      		autoBind: true,
                      downloadComplete: function (data) {
      		    var columns = data[1].columns;
                          var gridAdapter = new $.jqx.dataAdapter({
      			datafields: source.datafields,
                              id: 'I',
                              localdata: data[2].data,
      			totalrecords: source.totalrecords,
      			root: source.root,
      			pagenum: 0,
      			pagesize: 10
                          });
      		    
                          $("#jqxgrid").jqxGrid('hideloadelement');
                          $("#jqxgrid").jqxGrid('beginupdate', true);
                          $("#jqxgrid").jqxGrid({
      			source: gridAdapter,
                              columns: columns
      ...
      
    • third approach was a hybrid between them using downloadComplete to retrieve the columns but finally using the same initial dataAdapter.
      
      ...
                  var dataAdapter = new $.jqx.dataAdapter(source, {
      		autoBind: true,
                      downloadComplete: function (data) {
      		    var columns = data[1].columns;
                          $("#jqxgrid").jqxGrid('hideloadelement');
                          $("#jqxgrid").jqxGrid('beginupdate', true);
                          $("#jqxgrid").jqxGrid({
                              columns: columns
      ...
                  $("#jqxgrid").jqxGrid({
                      width: 850,
      		source: dataAdapter,
      ...
      

      Everything phenomenally worked fine but using a developer tool I discover that they were two calls to the php url and there was also an uncought error saying the loading didnt finish

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