jQWidgets Forums

Tagged: datagrid control, javascript datagrid control

This topic contains 2 replies, has 2 voices, and was last updated by mustafa 10 years, 12 months ago.

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

Author

grid emptydata binding Posts

June 3, 2014 at 2:32 pm grid emptydata binding #55277

mustafa

Participant

hello I’m doing bind data after to the grid ,I want first time empty load to grid

example

function LoadCertificateGrid() {

    window.CertificateSource =
     {
         dataFields: [
          { name: 'Cce_ID', type: 'string' },
          { name: 'Types ', type: 'string' },
          { name: 'OrderNo', type: 'string' },
          { name: 'CertificateName', type: 'string' },
          { name: 'CertificateNo', type: 'string' },
          { name: 'IssusePlace', type: 'string' },
          { name: 'IssuseDate', type: 'date' },
          { name: 'EndDate', type: 'date' },
          { name: 'Renew', type: 'string' },
          { name: 'Description', type: 'string' },
          { name: 'LastWarningDate', type: 'date' }
         ],
         root: "Certificates",
         dataType: "json",
         cache: false,
         async: false,
         id: 'Cce_ID'  
     };
                     
    var dataAdapter = new $.jqx.dataAdapter(window.CertificateSource, {
            loadComplete: function () {

            }
        });
 
        $("#CertificateGrid").jqxGrid(
               {
                   width: '98%',
                   source: dataAdapter,
                   pageable: true,                 
                   sortable: true,
                   altrows: true,
                   height:'420px',
                   theme: 'arctic',
                   enabletooltips: true,
                   editable: true,
                   selectionmode: 'multiplecellsadvanced',
                   columns: [
                     { text: 'Certificate No', columngroup: 'CertificateDetail', datafield: 'CertificateNo', cellsalign: 'right', align: 'right', width: 100 },
                     { text: 'Certificate Name', columngroup: 'CertificateDetail', datafield: 'CertificateName', cellsalign: 'right', align: 'right', width: 250 },
                     { text: 'Certificate Type', columngroup: 'CertificateDetail', datafield: 'Types', cellsalign: 'right', width: 150 },
                     { text: 'Order No', datafield: 'OrderNo', cellsalign: 'right', align: 'right', width: 150 },
                     { text: 'Issuse Place', datafield: 'IssusePlace', cellsalign: 'right', align: 'right', width: 150 },
                     { text: 'Issuse Date', datafield: 'IssuseDate', cellsalign: 'right', cellsformat: 'd', width: 120 },
                     { text: 'Last Warning Date', datafield: 'LastWarningDate', cellsalign: 'right', cellsformat: 'd', align: 'right', width: 120 },
                     { text: 'Renew', datafield: 'Renew', cellsalign: 'right', align: 'right', width: 100 },
                     { text: 'Description', datafield: 'Description', cellsalign: 'right', align: 'right', width: 200 },

                   ],
                   columngroups: [
                       { text: 'Certificate Detail', align: 'center', name: 'CertificateDetail' }
                   ]
               });

dynamic grid load data

button load click

function GridDynamicDataBind(gridData) {

CertificateSource.localdata = gridData;
$(“#CertificateGrid”).jqxGrid(‘updatebounddata’, ‘cells’);

}

function is working.. but when loading the first page I see this error “grid length 0 error” because dataAdapter variable empty..
0x800a138f – JavaScript runtime error: Unable to get property ‘length’ of undefined or null reference
What can I do? thank you

June 3, 2014 at 2:53 pm grid emptydata binding #55279

Peter Stoev

Keymaster

Hi mustafa,

If you don’t want to bind the Grid, don’t set the source property. Set it after that, when you want to bind it. I would like to suggest you also the use ver. 3.3.0, because I was not able to replicate an issue with it.

Here’s my test demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example illustrates how to dynamically update and clear the Grid's source.</title>
    <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/jqxdata.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/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source =
                {
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'total', type: 'number' }
                    ],
                    datatype: "array"
                };

            var dataAdapter = new $.jqx.dataAdapter(source);
            var columns = [
                  { columngroup: 'CertificateDetail', text: 'First Name', dataField: 'firstname', width: 130 },
                  { columngroup: 'CertificateDetail', text: 'Last Name', dataField: 'lastname', width: 130 },
                  { text: 'Product', dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                ];

            var theme = "";
            // create data grid.
            $("#grid").jqxGrid(
            {
                width: '98%',
                source: dataAdapter,
                pageable: true,
                sortable: true,
                altrows: true,
                height: '420px',
                theme: 'arctic',
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                width: 850,
                height: 300,
       //         source: dataAdapter,
                columns: columns,
                columngroups: [
                    { text: 'Certificate Detail', align: 'center', name: 'CertificateDetail' }
                ]
            });

            // init buttons.
            $("#refresh").jqxButton({ theme: theme });
            $("#clear").jqxButton({ theme: theme });

            $("#refresh").click(function () {
                source.localdata = generatedata(500);
                // passing "cells" to the 'updatebounddata' method will refresh only the cells values when the new rows count is equal to the previous rows count.
                $("#grid").jqxGrid('updatebounddata', 'cells');
            });

            $("#clear").click(function () {
                $("#grid").jqxGrid('clear');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="grid">
        </div>
        <div style="margin-top: 10px;">
            <input id="refresh" type="button" value="Refresh Data" />
            <input id="clear" type="button" value="Clear" />
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

June 4, 2014 at 6:47 am grid emptydata binding #55296

mustafa

Participant

thank you peter

Author

Posts

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

You must be logged in to reply to this topic.