.Hi guys, ive been stuck on this for a while now. Ive implemented jqgrid to show live information from a json endpoint and it works fine with a html file. But im trying to do same from a ASP.NET MVC app but now i’m getting “Uncaught TypeError: $(…)[0].grid.beginReq is not a function” error.
Any Help?
Here’s my code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@{@{ Layout = null;}<!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>jqGrid Loading Data - JSON Live</title> </head><body> <div> <table id="jqGrid" class="table table-responsive table-hover"></table> <div></div> </div> <div><a href="~/Views/Home/griddata.html" rel="nofollow">Here!</a></div> </body> </html> <!-- The jQuery library is a prerequisite for all jqSuite products --><script type="text/ecmascript" src="~/Scripts/jquery-1.12.4.min.js"></script><!-- We support more than 40 localizations --><script type="text/ecmascript" src="~/Scripts/i18n/grid.locale-en.js"></script><!-- This is the Javascript file of jqGrid --><script type="text/ecmascript" src="~/Scripts/jquery.jqGrid.min.js"></script><script src="~/Scripts/tether.min.js"></script><script src="~/Scripts/bootstrap.min.js"></script><!-- This is the localization file of the grid controlling messages, labels, etc.<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom --><link rel="stylesheet" href="~/Content/bootstrap.min.css"><!-- The link to the CSS that the grid needs --><link rel="stylesheet" type="text/css" media="screen" href="~/Content/jquery.jqGrid/ui.jqgrid.css" /><script> //$.jgrid.defaults.width = 780; $.jgrid.defaults.responsive = true; $.jgrid.defaults.styleUI = 'Bootstrap';</script> <script type="text/javascript"> $(document).ready(function () { $("#jqGrid").jqGrid({ colModel: [ { label: 'ID', name: 'ID', width: 80, //formatter: formatTitle }, { label: 'Name', name: 'Name', width: 170, //formatter: formatLink }, { label: 'Country', name: 'Country', width: 80, //sorttype:'integer', //formatter: 'number', align: 'center' }, { label: 'Gender', name: 'Gender', width: 70 } ], viewrecords: true, // show the current page, data rang and total records on the toolbar width: 780, height: 500, rowNum: 5, datatype: 'local', pager: "#jqGridPager", caption: "Customers List" }); $('#jqGrid').navGrid('#jqGridPager', // the buttons to appear on the toolbar of the grid { edit: true, add: true, del: true, search: true, refresh: false, view: false, position: "left", cloneToTop: false }, // options for the Edit Dialog { zIndex: 100, url: 'http://localhost:56851/Customer/Edit', closeOnEscape: true, closeAfterEdit: true, recreateForm: true, afterComplete: function (response) { if (response.responseText) { alert(response.responseText); } } }, // options for the Add Dialog { closeAfterAdd: true, recreateForm: true, errorTextFormat: function (data) { return 'Error: ' + data.responseText } }, // options for the Delete Dailog { errorTextFormat: function (data) { return 'Error: ' + data.responseText } }); fetchGridData(); function fetchGridData() { var gridArrayData = []; // show loading message $("#jqGrid")[0].grid.beginReq(); $.ajax({ url: "http://localhost:62275/customer/getcustomers", success: function (result) { console.log(JSON.stringify(result)); for (var i = 0; i < result.data.length; i++) { var data = result.data<em class="d4pbbc-italic"></em>; gridArrayData.push({ ID: data.CustomerId, Name: data.Name, Country: data.Country, Gender: data.Gender }); } // set the new data $("#jqGrid").jqGrid('setGridParam', { data: gridArrayData}); // hide the show message $("#jqGrid")[0].grid.endReq(); // refresh the grid $("#jqGrid").trigger('reloadGrid'); console.log(JSON.stringify(gridArrayData)); } }); } function formatTitle(cellValue, options, rowObject) { return cellValue.substring(0, 50) + "..."; }; function formatLink(cellValue, options, rowObject) { return "<a href='" + cellValue + "' rel="nofollow">" + cellValue.substring(0, 25) + "..." + "</a>"; }; });</script> |
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top
