jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid – unable to populate grid with data
Tagged: datagrid
This topic contains 2 replies, has 2 voices, and was last updated by Keshavan 11 years, 4 months ago.
Viewing 3 posts - 1 through 3 (of 3 total)
-
Author
-
Hi,
I am unable to populate grid (productGrid) with data, i am making an ajax call in the clicked event of ‘GetOrder/s’ button,
to populate grid as per requirement.Below is my code, (relevant code is in BOLD). Please help.
Thanks,
Keshavan
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>In order to enter in edit mode, click any of the 'Edit' buttons. To save the changes, click the 'Save' button in the popup dialog. To cancel the changes click the 'Cancel' button in the popup dialog.</title> <link rel="stylesrIdheet" href="/Content/Site.css" type="text/css" /> <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.ui-sunny.css" type="text/css" /> <script type="text/javascript" src="/JqWidgets/scripts/gettheme.js"></script> <script type="text/javascript" src="/JqWidgets/scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxvalidator.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.grouping.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.columnsreorder.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxselection.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getDemoTheme(); // prepare the data var dataAdapter; var generaterow1 = function (id) { var row = {}; row["OrderDetailId"] = id; row["ProductId"]; row["CategoryId"]; row["BrandId"]; row["OrderId"]; row["ProductCode"] = "AAAA"; row["ProductDesc"] = " "; row["StockQty"] = 0; row["Quantity"] = 0; row["SellPrice"] = 0; row["ItemValue"] = 0; return row; } var source2 = { datatype: "json", datafields: [ { name: 'OrderDetailId', type: 'number' }, { name: 'ProductId', type: 'number' }, { name: 'CategoryId', type: 'number' }, { name: 'BrandId', type: 'number' }, { name: 'OrderId', type: 'number' }, { name: 'ProductCode' }, { name: 'ProductDesc' }, { name: 'StockQty' }, { name: 'Quantity' }, { name: 'SellPrice' }, { name: 'ItemValue' } ], id: 'OrderDetailId', } dataAdapter = new $.jqx.dataAdapter(source2); <strong> $("#getorderbutton").bind('click', function () { $.ajax ({ datatype: "json", cache: false, async: false, id: 'OrderDetailId', url: '/AmendOrder/GetOrderDetails', success: function (data, status, xhr) { $("#productGrid").jqxGrid ({ width: 960, height: 250, source: dataAdapter, theme: 'ui-sunny', pageable: true, sortable: true, filterable: true, columnsresize: true, autoshowfiltericon: true, enabletooltips: true, editable: true, selectionmode: 'singlerow', columns: [ { text: 'OrderDetailId', datafield: 'OrderDetailId', hidden: false, width: 80 }, { text: 'Code', datafield: 'ProductCode', editable: false, width: 130 }, { text: 'Description', datafield: 'ProductDesc', editable: false, width: 360 }, { text: 'Available Qty', datafield: 'StockQty', editable: false, width: 80 }, { text: 'Order Qty', datafield: 'Quantity', editable: true, width: 80}, { text: 'Price', datafield: 'SellPrice', editable: false, width: 80 }, { text: 'Item Value', datafield: 'ItemValue', editable: false, width: 130 }] }) }, error: function (jqXHR, textStatus, errorThrown) { alert(errorThrown); } }); })</strong> $("#productGrid").bind('rowselect', function (event) { rselect = event.args.rowindex; }); $("#productGrid").bind('rowunselect', function (event) { var uind = event.args.rowindex; }) $('#productGrid').jqxDragDrop({ tolerance: 'fix' }); $("#addrowbutton").jqxButton({ width: '45', height: '30', theme: 'ui-sunny' }); $("#checkoutbutton").jqxButton({ width: '90', height: '30', theme: 'ui-sunny' }); $("#deleterowbutton").jqxButton({ width: '90', height: '30', theme: 'ui-sunny' }); $("#getorderbutton").jqxButton({ width: '90', height: '30', theme: 'ui-sunny' }); $("#TotalAmt").jqxNumberInput({ width: '70px', height: '25px', inputMode: 'simple', digits: 3, decimalDigits: 2, theme: 'ui-sunny' }); $("#TotalQty").jqxNumberInput({ width: '70px', height: '25px', inputMode: 'simple', digits: 3, decimalDigits: 2, theme: 'ui-sunny' }); $("#jqxDateTimeInput").jqxDateTimeInput({ width: '130px', height: '25px', formatString: 'MM/dd/yyyy', theme: 'ui-sunny' }); $("#jqxDateTimeInput").jqxDateTimeInput('setMinDate', new Date()); $("#jqxDateTimeInput").jqxDateTimeInput('setMaxDate', new Date()); var source3 = { datatype: "json", datafields: [ { name: 'CustomerId' }, { name: 'CustomerName' } ], id: 'CustomerId', url: '/Customer/GetCustomer', async: false } var dataAdapter3 = new $.jqx.dataAdapter(source3); $("#jqxDropDownSalesPeople").jqxDropDownList ({ source: dataAdapter3, displayMember: 'CustomerName', valueMember: 'CustomerId', width: 230, height: 30, theme: 'ui-sunny' }); $("#jqxDropDownSalesPeople").on('select', function (event) { if (event.args) { var item = event.args.item; if (item) { var eno = item.value; var ena = item.label; customerid = item.value; customername = item.label; } } }); var source4 = { datatype: "json", datafields: [ { name: 'OrderId' }, ], id: 'OrderId', url: '/Order/GetOrders', async: false } var dataAdapter4 = new $.jqx.dataAdapter(source4); $("#jqxDropDownOrders").jqxDropDownList ({ source: dataAdapter4, displayMember: 'OrderId', valueMember: 'OrderId', width: 100, height: 30, theme: 'ui-sunny' }); $("#jqxDropDownOrders").on('select', function (event) { if (event.args) { var item = event.args.item; if (item) { var eno = item.value; orderid = item.value; } } }); var generaterow2 = function (id) { var row = {}; row["OrderId"] = id; row["OrderDate"]; return row; } var source4 = { datatype: "json", datafields: [ { name: 'OrderId' }, { name: 'OrderDate' } ], id: 'OrderId', url: 'Order/AddOrder', async: false } var dataAdapter4 = new $.jqx.dataAdapter(source4); }); var menuNo = 10; var lenth = 12; for (var j = 1; j <= lenth; j++) { if (j == menuNo) { $(("#") + (j)).css("background-color", "maroon"); } else $(("#") + (j)).css("background-color", "null"); } </script> </head> <body > <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left; "> <table style="margin-left: 1px;"> <tr> <td> <div id="order-no" style="margin-left: 580px;" > </div> </td> </table> <table style="margin-left: 1px;"> <tr> <td> <div id='jqxDropDownSalesPeople' style="margin-left: 1px;"></div> </td> <td> <div id="jqxDateTimeInput" style="margin-left: 1px;"> </div> </td> <td> <input id="getorderbutton" type="button" style="margin-left: 1px;" value="Get Order/s" /> </td> <td> <div id='jqxDropDownOrders' style="margin-left: 1px;"></div> </td> <td> <input id="checkoutbutton" type="button" style="margin-left: 1px;" value="Save" /> </td> <td> <div id='log1' style="margin-left: 1px;"></div> </td> <td> <div id='log2' style="margin-left: 1px;"></div> </td> </tr> </table> <div> <div id="productGrid" style="margin-left: 1px; margin-top:1px;"></div> <div id="grid1" style="margin-left: 1px; margin-top: 2px;"></div> </div> </div> </body> </html>Hi Keshavan,
The Grid would not be created due to the fact that the dataAdapter does not have “url” or “localdata” specified i.e you end up with empty data source. For data binding the Grid, I would suggest you to look at the Data Sources help article on our Documentation page or any of the Live Demos.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Thanks!! I have fixed the issue as you mentioned.
Thanks,
Keshavan
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.