Databases
StackOverflow2013
Postsdbo
POHow to implement inline editing (Edit) of Azure Mobile Services Tables. How to process errors handling
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to implement inline editing (Edit) of Azure Mobile Services Tables. How to process errors handling
    primarykey
    data
    text
    <p>I am using jqGrid (<code>inlineNav</code>) with data from azure service and interested in learning about inline editing and error handling with azure mobile service table.</p> <p>Please share thoughts.</p> <p><strong>Code update 1</strong>: Code update based on Oleg's suggested way of using <code>ondblClickRow</code>, <kbd>Enter</kbd> and <kbd>Escape</kbd> machanism</p> <pre class="lang-js prettyprint-override"><code>$("#list4").jqGrid({ url: myTableURL, datatype: "json", height: "auto", colNames: ['RowNo', 'RouteId', 'Area'], colModel: [ { name: 'id', width: 70, editable: false }, { name: 'RouteId', width: 70 }, { name: 'Area', width: 150 }} ], cmTemplate: { editable: true, editrules: { required: true} }, rowList: [10, 20, 30], rowNum: 10, sortname: "id", prmNames: { search: null, nd: null }, ondblClickRow: function (rowid) { var $self = $(this); $self.jqGrid("editRow", rowid, { mtype: "PATCH", keys: true, url: myTableURL + "/" + $.jgrid.stripPref($self.jqGrid("getGridParam", "idPrefix"), rowid) }); }, ajaxGridOptions: { contentType: "application/json", headers: { "X-ZUMO-APPLICATION": "myKey" } }, serializeGridData: function (postData) { if (postData.sidx) { return { $top: postData.rows, $skip: (parseInt(postData.page, 10) - 1) * postData.rows, $orderby: postData.sidx + " " + postData.sord, $inlinecount: "allpages" }; } else { return { $top: postData.rows, $skip: (parseInt(postData.page, 10) - 1) * postData.rows, $inlinecount: "allpages" }; } }, serializeRowData: function (postData) { var dataToSend = $.extend(true, {}, postData); if (dataToSend.hasOwnProperty("oper")) { delete dataToSend.oper; } if (dataToSend.hasOwnProperty("id")) { delete dataToSend.id; } return JSON.stringify(dataToSend); }, beforeProcessing: function (data, textStatus, jqXHR) { var rows = parseInt($(this).jqGrid("getGridParam", "rowNum"), 10); data.total = Math.ceil(data.count / rows); }, jsonReader: { repeatitems: false, root: "results", records: "count" }, loadError: function (jqXHR, textStatus, errorThrown) { alert('HTTP status code: ' + jqXHR.status + '\n' + 'textStatus: ' + textStatus + '\n' + 'errorThrown: ' + errorThrown); alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText); }, pager: '#pager1', viewrecords: true, caption: "Schedule Data", gridview: true, autoencode: true }); </code></pre> <p>Combined code of inline editing and server side paging :</p> <pre><code> var $grid = $("#list4"), azureHeaders = { "X-ZUMO-APPLICATION": "mykey" }, myTableURL = "https://mohit.azure-mobile.net/tables/Schedules", inlineNavParams = { save: false, // we want to add Save button manually. So we needn't no standard button edit: true, add: true, del: true, editParams: { mtype: "PATCH" }, addParams: { addRowParams: { //mtype: "POST", // default value aftersavefunc: function (rowid, response) { var rowData = $.parseJSON(response.responseText), newId = rowData.id, $self = $(this), idPrefix = $self.jqGrid("getGridParam", "idPrefix", newId), selrow = $self.jqGrid("getGridParam", "selrow", newId), selArrayRow = $self.jqGrid("getGridParam", "selarrrow", newId), oldId = $.jgrid.stripPref(idPrefix, rowid), dataIndex = $self.jqGrid("getGridParam", "_index", newId), i; // update id in the _index if (dataIndex != null &amp;&amp; dataIndex[oldId] !== undefined) { dataIndex[newId] = dataIndex[oldId]; delete dataIndex[oldId]; } // update id attribute in &lt;tr&gt; $("#" + $.jgrid.jqID(rowid)).attr("id", idPrefix + newId); // update id of selected row if (selrow === rowid) { $self.jqGrid("setGridParam", { selrow: idPrefix + newId }); } // update id in selarrrow array // in case of usage multiselect:true option if ($.isArray(selArrayRow)) { i = $.inArray(rowid, selArrayRow); if (i &gt;= 0) { selArrayRow[i] = idPrefix + newId; } } // the next line is required if we use ajaxRowOptions: { async: true } $self.jqGrid("showAddEditButtons"); } } } }; // set common options which we want to use in inline editing $.extend(true, $.jgrid.inlineEdit, { keys: true, afterrestorefunc: function () { $(this).jqGrid("showAddEditButtons"); }, aftersavefunc: function () { $(this).jqGrid("showAddEditButtons"); }, }); $grid.jqGrid({ colNames: ['RouteId', 'Area'], colModel: [ { name: 'RouteId', index: 'RouteId', width: 70 }, { name: 'Area', index: 'Area', width: 150 } ], cmTemplate: { editable: true, editrules: { required: true} }, // the parameters below are needed to load the grid data from the server // we use loadonce: true option below. One can use server side pading instead. // see http://stackoverflow.com/a/15979809/315935 for the changes url: myTableURL, rownumbers: true, datatype: "json", rowNum: 10, rowList: [10, 20, 30], prmNames: {search: null, nd: null, sort: null, rows: null}, ajaxGridOptions: { contentType: "application/json", headers: azureHeaders }, // jsonReader: { // repeatitems: false, // root: function (obj) { return obj; } // }, jsonReader: { repeatitems: false, root: "results", records: "count" }, loadError: function (jqXHR, textStatus, errorThrown) { alert('HTTP status code: ' + jqXHR.status + '\n' + 'textStatus: ' + textStatus + '\n' + 'errorThrown: ' + errorThrown); alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText); }, gridview: true, autoencode: true, height: "auto", // we implement additionally inline editing on double-click. // it's optional step in case of usage inlineNav ondblClickRow: function (rowid) { var $self = $(this); $self.jqGrid("editRow", rowid, { mtype: "PATCH", keys: true, url: myTableURL + "/" + $.jgrid.stripPref($self.jqGrid("getGridParam", "idPrefix"), rowid) }); }, // next options are important for inline editing ajaxRowOptions: { contentType: "application/json", headers: azureHeaders }, editurl: myTableURL, serializeRowData: function (postData) { var dataToSend = $.extend(true, {}, postData); if (dataToSend.hasOwnProperty("oper")) { delete dataToSend.oper; } if (dataToSend.hasOwnProperty("id")) { delete dataToSend.id; } return JSON.stringify(dataToSend); }, serializeGridData: function (postData) { if (postData.sidx) { return { $top: postData.rows, $skip: (parseInt(postData.page, 10) - 1) * postData.rows, $orderby: postData.sidx + " " + postData.sord, $inlinecount: "allpages" }; } else { return { $top: postData.rows, $skip: (parseInt(postData.page, 10) - 1) * postData.rows, $inlinecount: "allpages" }; } }, beforeProcessing: function (data, textStatus, jqXHR) { var rows = parseInt($(this).jqGrid("getGridParam", "rowNum"), 10); data.total = Math.ceil(data.count/rows); }, viewrecords: true, rownumbers: true, height: "auto", pager: "#pager1", caption: "Windows Azure Mobile Services REST API" }).jqGrid("navGrid", "#pager1", { edit: false, add: false, del: false, search: false }); $grid.jqGrid("inlineNav", "#pager1", inlineNavParams); $grid.jqGrid("navButtonAdd", "#pager1", { caption: $.jgrid.nav.savetext || "", title: $.jgrid.nav.savetitle || "Save row", buttonicon: "ui-icon-disk", id: $grid[0].id + "_ilsave", onClickButton: function () { var $self = $(this), gridIdSelector = $.jgrid.jqID(this.id), savedRow = $self.jqGrid("getGridParam", "savedRow"), prmNames = $self.jqGrid("getGridParam", "prmNames"), editUrl = $self.jqGrid("getGridParam", "editurl"), rowid = savedRow != null ? savedRow[0].id : "", id = $.jgrid.stripPref($self.jqGrid("getGridParam", "idPrefix"), rowid), tmpParams = {}; if (rowid != null) { if ($("#" + $.jgrid.jqID(rowid), "#" + gridIdSelector).hasClass("jqgrid-new-row")) { if (!inlineNavParams.addParams.addRowParams.extraparam) { inlineNavParams.addParams.addRowParams.extraparam = {}; } inlineNavParams.addParams.addRowParams.extraparam[prmNames.oper] = prmNames.addoper; tmpParams = inlineNavParams.addParams.addRowParams; } else { if (!inlineNavParams.editParams.extraparam) { inlineNavParams.editParams.extraparam = {}; } inlineNavParams.editParams.extraparam[prmNames.oper] = prmNames.editoper; inlineNavParams.editParams.url = editUrl + "/" + id; tmpParams = inlineNavParams.editParams; } if ($self.jqGrid("saveRow", rowid, tmpParams)) { $self.jqGrid("showAddEditButtons"); } } else { $.jgrid.viewModal("#alertmod", {gbox: "#gbox_" + gridIdSelector, jqm: true}); $("#jqg_alrt").focus(); } } }); $("#" + $grid[0].id + "_ilsave").addClass("ui-state-disabled"); </code></pre> <p>Code update 3 : </p> <pre><code> var $grid = $("#list4"); var myTableURL = 'https://mohit.azure-mobile.net/tables/Schedules'; var azureHeaders = { "X-ZUMO-APPLICATION": ", mykey" }; $grid.jqGrid({ url: myTableURL, editurl: myTableURL, datatype: "json", height: "auto", colNames: ['RowNo', 'RouteId', 'Area', 'BusStop', 'Seater', 'Lat', 'Long', 'Timing', 'FromTo', 'KeyPoint'], colModel: [ { name: 'id', index: 'id', width: 70, editable: false }, { name: 'RouteId', index: 'RouteId', width: 70 } ], cmTemplate: { editable: true, editrules: { required: true} }, rowList: [10, 20, 30], rowNum: 10, sortname: "id", prmNames: { search: null, nd: null}, ondblClickRow: function (rowid) { var $self = $(this); $self.jqGrid("editRow", rowid, { mtype: "PATCH", keys: true, url: myTableURL + "/" + $.jgrid.stripPref($self.jqGrid("getGridParam", "idPrefix"), rowid) }); }, ajaxGridOptions: { contentType: "application/json", headers: azureHeaders }, ajaxRowOptions: { contentType: "application/json", headers: azureHeaders }, serializeGridData: function (postData) { if (postData.sidx) { return { $top: postData.rows, $skip: (parseInt(postData.page, 10) - 1) * postData.rows, $orderby: postData.sidx + " " + postData.sord, $inlinecount: "allpages" }; } else { return { $top: postData.rows, $skip: (parseInt(postData.page, 10) - 1) * postData.rows, $inlinecount: "allpages" }; } }, serializeRowData: function (postData) { var dataToSend = $.extend(true, {}, postData); if (dataToSend.hasOwnProperty("oper")) { delete dataToSend.oper; } if (dataToSend.hasOwnProperty("id")) { delete dataToSend.id; } return JSON.stringify(dataToSend); }, beforeProcessing: function (data, textStatus, jqXHR) { var rows = parseInt($(this).jqGrid("getGridParam", "rowNum"), 10); data.total = Math.ceil(data.count / rows); }, jsonReader: { repeatitems: false, root: "results", records: "count" }, loadError: function (jqXHR, textStatus, errorThrown) { alert('HTTP status code: ' + jqXHR.status + '\n' + 'textStatus: ' + textStatus + '\n' + 'errorThrown: ' + errorThrown); alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText); }, pager: '#pager1', viewrecords: true, caption: "Bus Schedule Data", gridview: true, autoencode: true }); inlineNavParams = { save: false, // we want to add Save button manually. So we needn't no standard button edit: true, add: true, del: true, editParams: { mtype: "PATCH" }, addParams: { addRowParams: { aftersavefunc: function (rowid, response) { var rowData = $.parseJSON(response.responseText), newId = rowData.id, $self = $(this), idPrefix = $self.jqGrid("getGridParam", "idPrefix", newId), selrow = $self.jqGrid("getGridParam", "selrow", newId), selArrayRow = $self.jqGrid("getGridParam", "selarrrow", newId), oldId = $.jgrid.stripPref(idPrefix, rowid), dataIndex = $self.jqGrid("getGridParam", "_index", newId), i; if (dataIndex != null &amp;&amp; dataIndex[oldId] !== undefined) { dataIndex[newId] = dataIndex[oldId]; delete dataIndex[oldId]; } $("#" + $.jgrid.jqID(rowid)).attr("id", idPrefix + newId); if (selrow === rowid) { $self.jqGrid("setGridParam", { selrow: idPrefix + newId }); } if ($.isArray(selArrayRow)) { i = $.inArray(rowid, selArrayRow); if (i &gt;= 0) { selArrayRow[i] = idPrefix + newId; } } $self.jqGrid("showAddEditButtons"); } } } }; $grid.jqGrid("navGrid", "#pager1", { edit: false, add: false, del: false, search: false }); $grid.jqGrid("inlineNav", "#pager1", inlineNavParams); $grid.jqGrid("navButtonAdd", "#pager1", { caption: $.jgrid.nav.savetext || "", title: $.jgrid.nav.savetitle || "Save row", buttonicon: "ui-icon-disk", id: $grid[0].id + "_ilsave", onClickButton: function () { var $self = $(this), gridIdSelector = $.jgrid.jqID(this.id), savedRow = $self.jqGrid("getGridParam", "savedRow"), prmNames = $self.jqGrid("getGridParam", "prmNames"), editUrl = $self.jqGrid("getGridParam", "editurl"), rowid = savedRow != null ? savedRow[0].id : "", id = $.jgrid.stripPref($self.jqGrid("getGridParam", "idPrefix"), rowid), tmpParams = {}; if (rowid != null) { if ($("#" + $.jgrid.jqID(rowid), "#" + gridIdSelector).hasClass("jqgrid-new-row")) { if (!inlineNavParams.addParams.addRowParams.extraparam) { inlineNavParams.addParams.addRowParams.extraparam = {}; } inlineNavParams.addParams.addRowParams.extraparam[prmNames.oper] = prmNames.addoper; tmpParams = inlineNavParams.addParams.addRowParams; } else { if (!inlineNavParams.editParams.extraparam) { inlineNavParams.editParams.extraparam = {}; } inlineNavParams.editParams.extraparam[prmNames.oper] = prmNames.editoper; inlineNavParams.editParams.url = editUrl + "/" + id; tmpParams = inlineNavParams.editParams; } if ($self.jqGrid("saveRow", rowid, tmpParams)) { $self.jqGrid("showAddEditButtons"); } } else { $.jgrid.viewModal("#alertmod", {gbox: "#gbox_" + gridIdSelector, jqm: true}); $("#jqg_alrt").focus(); } } }); $.extend(true, $.jgrid.inlineEdit, { keys: true, afterrestorefunc: function () { $(this).jqGrid("showAddEditButtons"); }, aftersavefunc: function () { $(this).jqGrid("showAddEditButtons"); }, }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMohit
    1. USMohit
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to implement inline editing (Edit) of Azure Mobile Services Tables. How to process errors handling
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to implement inline editing (Edit) of Azure Mobile Services Tables. How to process errors handling
      1. This table or related slice is empty.
      1. VTModeratorReview
    1. COI modified a little your code. I did the following 1) removed `index` property from all columns of colModel where the value of `index` is the same as the value of `name`. 2) changed formatting of the code so that the code could be read without usage of horizontal scrolling permanently 3) brought colors in the code (see [here](http://meta.stackexchange.com/questions/63800/interface-options-for-specifying-language-prettify)) 4) improved `serializeGridData` for the case `postData.sidx` is empty. You can additional consider whether you need to show `id` column. You can remove it.
      singulars
      1. POHow to implement inline editing (Edit) of Azure Mobile Services Tables. How to process errors handling
      1. USOleg
    2. COI need to keep id column. Does it work for you? I still get same error messages.
      singulars
      1. POHow to implement inline editing (Edit) of Azure Mobile Services Tables. How to process errors handling
      1. USMohit
    3. COall code which I posted is from workings demos. Which error exactly you have? Which demo demonstrate the problem?
      singulars
      1. POHow to implement inline editing (Edit) of Azure Mobile Services Tables. How to process errors handling
      1. USOleg
 

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