Databases
StackOverflow2013
Postsdbo
POJQgrid Web Api Json on a SPA
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQgrid Web Api Json on a SPA
    primarykey
    data
    text
    <p>I just found JQGrid , and think that JQgrid is very mature and perfect to use with Web API </p> <p>I have a few questions: we are using Web Api and have the following HTML code and Controller. The Image field loses its data when It comes back to the controller. Google debugger shows data for the image field on the HTML, but if I set a breakpoint on the Put method inside the controller, Visual Studio , I can see the product entity with all its fields filled with data, all but one; the image field is null.</p> <p>It took me some digging to get this working , therefore I decided to share the HTML code + the WebApi controller it with the community.</p> <p>1- am I am doing this right (Grid parameters) ?</p> <p>2-Why the image fields comes back null ?</p> <p>3-How can I implement a search ? this will not get called</p> <p>public dynamic GetProducts4JqGrid1(string sidx, string sord, int page, int rows, bool _search, string searchField, string searchOper, string searchString)</p> <p>4-why i Must pass the Entity ID to the controller ? I tried many other ways and it always come back as "0" so must pass the Id to the Put method , is this the only way ?</p> <p>JQGrid is awesome with Web Api</p> <p>nice to have everything under one roof <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs" rel="nofollow">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs</a></p> <pre><code>using System; using System.Collections.Generic; using System.Globalization; using System.Linq; using System.Net; using System.Net.Http; using RoboMVC.Contracts; using RoboMVC.Model; namespace RoboMVC.Web.Controllers.jQgrid { public class ProductsJQgridController : ApiControllerBase { public ProductsJQgridController(IRoboMVCUow uow) { Uow = uow; } public dynamic GetProducts4JqGrid(string sidx, string sord, int page, int rows) { //var products = Uow.Product.GetAllProducts().OrderBy(e =&gt; e.ProductId) as IEnumerable&lt;Product&gt;; var pageIndex = Convert.ToInt32(page) - 1; var pageSize = rows; var totalRecords = Uow.Product.Count(); var totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize); var products = Uow.Product.GetAllProducts().OrderBy(e =&gt; e.ProductId).Skip(pageIndex * pageSize).Take(pageSize) as IEnumerable&lt;Product&gt;; return new { total = totalPages, page = page, records = totalRecords, rows = ( from product in products select new { id = product.ProductId, cell = new object[] { product.ProductId, product.Description, product.SalePrice, product.SaleCommissionFactor, product.Stock, product.StockMax, product.StockMin, product.DateOfEntry, product.LastDateOfSale, product.SKU, product.LastCostPaid, product.Weight, product.Image, product.Categoy, } }).ToList() }; } public HttpResponseMessage Put( int id, Product product) { product.ProductId = Convert.ToInt32(id); Uow.Product.Update(product); Uow.Commit(); var result = new HttpResponseMessage(HttpStatusCode.NoContent); return result; } public HttpResponseMessage Post(int id, Product product) { product.ProductId = Convert.ToInt32(id); product = Uow.Product.Add(product); Uow.Commit(); var response = Request.CreateResponse&lt;Product&gt;(HttpStatusCode.Created, product); string uri = Url.Route(null, new { id = product.ProductId }); response.Headers.Location = new Uri(Request.RequestUri, uri); return response; } public HttpResponseMessage Delete(int id) { Uow.Product.Delete(id); Uow.Commit(); var result = new HttpResponseMessage(HttpStatusCode.NoContent); return result; } } } &lt;script&gt; var API_URL = "/api/ProductsJQgrid/"; jQuery("#gridMain").jqGrid({ //http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options url: "/api/ProductsJQgrid/GetProducts4JqGrid/", datatype: 'json', mtype: 'GET', pager: '#pagernav', viewrecords: true, height: '60%', width: '100%', hoverrows: true, rownumbers: true, shrinkToFit: true, gridview: true, search: true, ignoreCase:true, loadonce: false, viewsortcols: [false, "horizontal", true], imgpath: '../../Content/jquery.jqGrid/content/images/', rowNum: 10, cache: true, rowList: [10, 20, 30], sortable: true, sortname: 'productId', sortorder: "desc", // sorttype: "text", caption: "CRUD With ASP.NET Web API", autowidth: true, colNames: ['productId', 'Description', 'SalePrice', 'SaleCommissionFactor', 'Stock', 'StockMax', 'StockMin', 'DateOfEntry', 'LastDateOfSale', 'SKU', 'LastCostPaid', 'Weight', '&lt;image src=images/arrow-right.gif width=16 height=16&gt;', 'Categoy'], colModel: [ //http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options { key:true, name: 'productId', index: 'productId', width: 40, search : true , sorttype: "int", editable: false }, { name: 'description', index: 'description', editable: true, edittype: 'text', width: 70 }, { name: 'salePrice', index: 'salePrice', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "float", formatter: "number" }, { name: 'saleCommissionFactor', index: 'saleCommissionFactor', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "float", formatter: "number" }, { name: 'stock', index: 'stock', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "int" }, { name: 'stockMax', index: 'stockMax', editable: true, cellEdit:true, edittype: 'text', width: 50, align: "right", sorttype: "int"}, { name: 'stockMin', index: 'stockMin', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "int"}, { name: 'dateOfEntry', index: 'dateOfEntry', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "date", formatter: "date" }, { name: 'lastDateOfSale', index: 'lastDateOfSale', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "date", formatter: "date" }, { name: 'sKU', index: 'sKU', editable: true, edittype: 'text', width: 70 }, { name: 'lastCostPaid', index: 'lastCostPaid', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "float", formatter: "number" }, { name: 'weight', index: 'weight', editable: true, edittype: 'text', width: 70 }, { name: 'image', index: 'image', editable: false, search:false, width: 50, align: "right", }, { name: 'categoy', index: 'categoy', editable: true, edittype: 'text', width: 70 } ], jsonReader: { root: "rows", page: "page", total: "total", records: "records", repeatitems: true, id: "id", // from the controller returned value cell: "cell", search: "_search" }, subGrid: true }); function updateDialog(action) { return { url: "/api/ProductsJQgrid/" , closeAfterAdd: true , closeAfterEdit: true , afterShowForm: function (formId) { } , modal: true , onclickSubmit: function (params) { var list = $("#gridMain"); var selectedRow = list.getGridParam("selrow"); var rowData = list.getRowData(selectedRow); params.mtype = action; params.url += rowData.productId; debugger; // image has the right data here } , width: "600" }; } jQuery("#gridMain") .jqGrid('navGrid', '#pagernav', { add: true, edit: true, del: true, search: true,refresh: true }, updateDialog('Put'), updateDialog('Post'), updateDialog('Delete'), { sopt: ["cn"] } // Search options. Some options can be set on column level ) // .filterToolbar({ autoSearch: false, searchOnEnter: false, stringResult: true }) ; $(window).bind('resize', function () { jQuery("#gridMain").setGridWidth($('#parentDiv').width() - 30, true); }).trigger('resize'); &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USOscar Agreda
    1. USOscar Agreda
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POJQgrid Web Api Json on a SPA
      1. This table or related slice is empty.
      1. VTUpMod
    1. COFixed the "non saving image" issue JQgrid needs to know that an image is there when editing { name: 'image', index: 'image', editable: true, edittype: 'image', search: false, width: 50, align: "right", }, http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
      singulars
      1. POJQgrid Web Api Json on a SPA
      1. USOscar Agreda
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload