jQuery UI Widgets Forums Grid spreadsheet cell load data

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • spreadsheet cell load data #67659

    mustafa
    Participant

    hello I have 2 problem

    1.How do I load data into cells,Can you give an example?
    2.How can do I load data into left side?

    spreadsheet cell load data #67662

    Dimitar
    Participant

    Hello mustafa,

    1. Here is how to populate the spreadsheet through 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.11.1.min.js"></script>
          <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
          <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
          <script type="text/javascript" src="../../jqwidgets/jqxdata.export.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.edit.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/jqxgrid.export.js"></script>
          <script type="text/javascript" src="../../scripts/demos.js"></script>
          <script type="text/javascript">
              $(document).ready(function () {
                  var sourceColumnsAB = [{ A: 'A1', B: 'B1' }, { A: 'A2', B: 'B2' }, { A: 'A3', B: 'B3' }, { A: 'A4', B: 'B4' }, { A: 'A5', B: 'B5' }, { A: 'A6', B: 'B6' }, { A: 'A7', B: 'B7' }, { A: 'A8', B: 'B8' }, { A: 'A9', B: 'B9' }, { A: 'A10', B: 'B10'}];
      
                  // renderer for grid cells.
                  var numberrenderer = function (row, column, value) {
                      return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>';
                  }
      
                  // create Grid datafields and columns arrays.
                  var datafields = [];
                  var columns = [];
                  for (var i = 0; i < 26; i++) {
                      var text = String.fromCharCode(65 + i);
                      if (i == 0) {
                          var cssclass = 'jqx-widget-header';
                          if (theme != '') cssclass += ' jqx-widget-header-' + theme;
                          columns[columns.length] = { pinned: true, exportable: false, text: "", columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer };
                      }
                      datafields[datafields.length] = { name: text };
                      columns[columns.length] = { text: text, datafield: text, width: 60, align: 'center' };
                  }
      
                  var source =
                  {
                      datafields: [
                          { name: 'A', type: 'string' },
                          { name: 'B', type: 'string' }
                      ],
                      localdata: sourceColumnsAB,
                      updaterow: function (rowid, rowdata) {
                          // synchronize with the server - send update command   
                      }
                  };
      
                  var dataAdapter = new $.jqx.dataAdapter(source);
      
                  // initialize jqxGrid
                  $("#jqxgrid").jqxGrid(
                  {
                      width: 850,
                      source: dataAdapter,
                      editable: true,
                      columnsresize: true,
                      selectionmode: 'multiplecellsadvanced',
                      columns: columns
                  });
                  $("#excelExport").jqxButton({ theme: theme });
                  $("#excelExport").click(function () {
                      $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid', false);
                  });
              });
          </script>
      </head>
      <body class='default'>
          <div id='jqxWidget'>
              <div id="jqxgrid">
              </div>
              <div style='margin-top: 20px;'>
                  <div style='float: left;'>
                      <input type="button" value="Export to Excel" id='excelExport' />
                  </div>
              </div>
          </div>
      </body>
      </html>
    2. What do you mean by “load data into left side”?

    Best Regards,
    Dimitar

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

    spreadsheet cell load data #67676

    mustafa
    Participant

    hello dimitar thank you for reply I will test

    2.question

    my vessel list data

    [0]
       VesselID :    198
       VesselName :  OZAN4   
    
    [1]
       VesselID :    199
       VesselName :  ThunderBirth
    
    and 
    my stock list  data
    
    [0]
       StockID:    1
       StockName:  OIL   
    
    [1]
        StockID:    2
        StockName:  OIL2   
     


    I show left the stock names? and if possible I can stock Id ?

    and question

    3. this my user grid

    
        window.GridUserDataSource =
    
             {
                 datafields: [
                 { name: 'UserID', type: 'string' },
                 { name: 'Name', type: 'string' },
                 { name: 'Surname', type: 'string' },
                 { name: 'Email', type: 'string' },
                 { name: 'UserGroupName', type: 'string' },
                 { name: 'UserGroupID', type: 'string' },
                 { name: 'IsActive', type: 'bool' },
                 { name: 'Password', type: 'string' }
                 ],
                 addrow: function (rowid, rowdata, position, commit) {
                     commit(true);
                 },
                 deleterow: function (rowid, commit) {
                     commit(true);
                 },
                 updaterow: function (rowid, newdata, commit) {
                     commit(true);
                 },
                 localdata: GetUsers(),
                 async: false,
                 datatype: "array",
                 id: 'UserID',
    
             }
    
        var dataAdapter = new $.jqx.dataAdapter(window.GridUserDataSource,
            {
                formatData: function (data) {
                    data.name_startsWith = $("#searchField").val();
                    return data;
                }
            }
        );
         
        $("#GridUser").jqxGrid(
        {   width: '100%',
            source: dataAdapter,
           
            height: '700px',
            pagesize: 30,
            pagesizeoptions: [25, 50, 100],
            theme: "Web",
            editable: false,
            columns: [
              { text: 'Name', datafield: 'Name', width: '20%', },
              { text: 'Surname', datafield: 'Surname', width: '20%', },
              { text: 'Email', datafield: 'Email', width: '20%', },
              { text: 'User Group', datafield: 'UserGroupName', width: '20%' },
              { text: 'Active', datafield: 'IsActive', width: '20%', threestatecheckbox: false, columntype: 'checkbox' },
    
            ],
    
        });

    I want to get the data like this

    thank you very much

    spreadsheet cell load data #67685

    mustafa
    Participant

    thanks

    spreadsheet cell load data #67688

    mustafa
    Participant

    and
    the data does not appear
    Where am I doing wrong?
    thank you

        // renderer for grid cells.
        var numberrenderer = function (row, column, value) {
            return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>';
        }
        var sourceColumnsAB = [{ VesselID : '1',StockKG: '55'},{VesselID : '2', StockKG: '88'}];
    
        var vessels= GetVessels();
        var columns = [];
        var theme = "";
        for (var i = 0; i < vessels.length; i++) {
            var VesselName = vessels[i].Name;
            var VesselID = vessels[i].VesselID;
    
            if (i == 0) {
                var cssclass = 'jqx-widget-header';
                if (theme != '') cssclass += ' jqx-widget-header-' + "web";
                columns[columns.length] = { pinned: true, exportable: false, text: "", columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer };
            }
            datafields[datafields.length] = { name: VesselName, value: VesselID };
            columns[columns.length] = { text: VesselName, datafield: VesselID, width: 60, align: 'center' };
        }
    
        var source =
        {
          
            datafields: [
                        { name: 'StockKG', type: 'string' },
                        { name: 'VesselID', type: 'string' }
            ],
            localdata: sourceColumnsAB,
    
            
            updaterow: function (rowid, rowdata) {
                // synchronize with the server - send update command   
            }
        };
    
        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#GridEstimation").jqxGrid(
               {
                   width: 850,
                   source: dataAdapter,
                   editable: true,
                   columnsresize: true,
                   selectionmode: 'multiplecellsadvanced',
                   columns: columns
               });
    }
    spreadsheet cell load data #67707

    Dimitar
    Participant

    Hi mustafa,

    1. You have a cellsrenderer definition (numberrenderer), which positions the text in the center of the cell. Remove text-align: center; and it should be on the left. In cellsrenderer you can also modify what is displayed and include information from other datafields if you like.
    2. Is your “user grid” not loaded correctly? Are you sure GetUsers() returns the correct data?
    3. Does the image correspond to the code sample underneath it? There is no “VesselName” column in the image. Please clarify how many different grids you have and what are the issues with each of them. If needed, create separate topics for the questions that are not related to populating a spreadsheet grid with data.

    Best Regards,
    Dimitar

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

    spreadsheet cell load data #67715

    mustafa
    Participant

    hello dimitar
    I want to show you my problem step by step

    first 1

      var stocks= GetStocks();
          
        var numberrenderer = function (row, column, value) {
    
            return '<div margin-top: 5px;">' + (stocks[row].Name) + '</div>';
        }
    
    var theme = "";
                 var datafields = [];
                 var columns = [];
                 for (var i = 0; i < data.length; i++) {
                     var text = String.fromCharCode(65 + i);
          
                     if (i == 0) {
                         var cssclass = 'jqx-widget-header';
                         if (theme != '') cssclass += ' jqx-widget-header-' + theme;
                         columns[columns.length] = { pinned: true, exportable: false, text: "", columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer };
                     }
                     datafields[datafields.length] = { name: text };
                     columns[columns.length] = { text: text, datafield: text, width: 60, align: 'center' };


    All does not appear
    Which should I modified the css?

    spreadsheet cell load data #67719

    mustafa
    Participant

    2

    example bind data

    // renderer for grid cells.
        var numberrenderer = function (row, column, value) {
            return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>';
        }
        var sourceColumnsAB = [{ VesselID : '1',StockKG: '55'},{VesselID : '2', StockKG: '88'}];
    
        var vessels= GetVessels();
        var columns = [];
        var theme = "";
        for (var i = 0; i < vessels.length; i++) {
            var VesselName = vessels[i].Name;
            var VesselID = vessels[i].VesselID;
    
            if (i == 0) {
                var cssclass = 'jqx-widget-header';
                if (theme != '') cssclass += ' jqx-widget-header-' + "web";
                columns[columns.length] = { pinned: true, exportable: false, text: "", columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer };
            }
            datafields[datafields.length] = { name: VesselName, value: VesselID };
            columns[columns.length] = { text: VesselName, datafield: VesselID, width: 60, align: 'center' };
        }
    
        var source =
        {
          
            datafields: [
                        { name: 'StockKG', type: 'string' },
                        { name: 'VesselID', type: 'string' }
            ],
            localdata: sourceColumnsAB,
    
            
            updaterow: function (rowid, rowdata) {
                // synchronize with the server - send update command   
            }
        };
    
        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#GridEstimation").jqxGrid(
               {
                   width: 850,
                   source: dataAdapter,
                   editable: true,
                   columnsresize: true,
                   selectionmode: 'multiplecellsadvanced',
                   columns: columns
               });
    }

    spreadsheet cell load data #67721

    mustafa
    Participant

    hi dimitar
    No need to answer the first question

    Ship names seems (headers)
    But the knowledge of each vessel does not appear
    example

    var sourceColumnsAB = [{ MasterID:1, VesselID : ‘1453’,StockKG: ’55’},{MasterID:2, VesselID : ‘1455’, StockKG: ’88’}];

    spreadsheet cell load data #67786

    Dimitar
    Participant

    Hi mustafa,

    Your data is suitable for the following structure:

    _____________________________
    |  |  VesselName  |  VesselID|
    |1 |  Name1       |  ID1     |
    |2 |  Name2       |  ID2     |
    |...

    and not:

    _____________________________
    |  |  Name1  |  Name2  |  ...
    |1 |         |         |

    The issue comes from the fact that you are setting each VesselID value as a datafield, but you should be setting ‘VesselID’ (string) to achieve the first type of table.

    If, however, it is indeed the second structure you wish to have, you can do the following to populate it:

    $("#GridEstimation").jqxGrid({
        width: 850,
        source: dataAdapter,
        editable: true,
        columnsresize: true,
        selectionmode: 'multiplecellsadvanced',
        columns: columns,
        ready: function() {
            for (var i = 0; i < vessels.length; i++) {
                var VesselID = vessels[i].VesselID;
                $("#GridEstimation").jqxGrid('setcellvalue', 0, VesselID, VesselID);
            }
        }
    });

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.