1. <script type="text/javascript">
  2. var lastsel;
  3.  
  4. var mygrid = $("#list"),
  5. mygetUniqueNames = function (columnName) {
  6. var texts = mygrid.jqGrid('getCol', columnName), uniqueTexts = [],
  7. textsLength = texts.length, text, textsMap = {}, i;
  8. for (i = 0; i < textsLength; i++) {
  9. text = texts[i];
  10. if (text !== undefined && textsMap[text] === undefined) {
  11. // to test whether the texts is unique we place it in the map.
  12. textsMap[text] = true;
  13. uniqueTexts.push(text);
  14. }
  15. }
  16. return uniqueTexts;
  17. };
  18. var mydata = [
  19. { id: "1", Name: "Miroslav Klose", Category: "sport", Subcategory: "football" },
  20. { id: "2", Name: "Michael Schumacher", Category: "sport", Subcategory: "formula 1" },
  21. { id: "3", Name: "Albert Einstein", Category: "science", Subcategory: "physics" },
  22. { id: "4", Name: "Blaise Pascal", Category: "science", Subcategory: "mathematics" }
  23. ];
  24.  
  25.  
  26. jQuery(document).ready(function () {
  27.  
  28.  
  29. jQuery("#list").jqGrid({
  30. url: '@Url.Action("GetProductList")',
  31. datatype: 'json',
  32.  
  33. loadonce: true, // to enable sorting on client side
  34. sortable: true, //to enable sorting
  35. ajaxSelectOptions: { type: "POST", dataType: "json" },
  36. mtype: 'GET',
  37.  
  38. colNames: ['DSVareId', 'VendorId', 'EAN Nummer', 'Brand', '@Html.Encode(ViewData["Message1"])', '@Html.Encode(ViewData["Message2"])', '@Html.Encode(ViewData["Message3"])', 'Produkt Navn'],
  39. colModel: [
  40. { name: 'id', index: 'id', key: true, width: 65, editable: false, sortable: true, editrules: { edithidden: false} },
  41. { name: 'vendorId', index: 'vendorId', editable: true, sortable: true, editrules: { edithidden: false }, hidden: true },
  42. { name: 'EanNummer', index: 'EanNummer', width: 65, sortable: true, editable: true },
  43. { name: 'Brand', index: 'Brand', align: 'left', width: 50, sortable: true, editable: true, edittype: "select", editoptions: { dataUrl: '@Url.Action("GetBrands")',
  44. buildSelect: function (data) {
  45. var response = typeof (data) === "string" ? jQuery.parseJSON(data.responseText) : data;
  46. var s = '<select>';
  47. if (response && response.length) {
  48. for (var i = 0, l = response.length; i < l; i++) {
  49. var ri = response[i];
  50. s += '<option value="' + ri + '">' + ri + '</option>';
  51. }
  52. }
  53. return s + '</select>';
  54. }
  55. }
  56. },
  57.  
  58. { name: 'Custom1', index: 'Custom1', align: 'left', width: 50, sortable: true, editable: true, edittype: "select", editoptions: { dataUrl: '@Url.Action("GetCustumer1")',
  59.  
  60. buildSelect: function (data) {
  61. var response = typeof (data) === "string" ? jQuery.parseJSON(data.responseText) : data;
  62. var s = '<select>';
  63. if (response && response.length) {
  64. for (var i = 0, l = response.length; i < l; i++) {
  65. var ri = response[i];
  66. s += '<option value="' + ri + '">' + ri + '</option>';
  67. }
  68. }
  69. return s + '</select>';
  70. }
  71. }
  72. },
  73. { name: 'Custom2', index: 'Custom2', align: 'left', width: 50, sortable: true, editable: true, edittype: "select", editoptions: { dataUrl: '@Url.Action("getCustomer2")',
  74.  
  75. buildSelect: function (data) {
  76. var response = typeof (data) === "string" ? jQuery.parseJSON(data.responseText) : data;
  77. var s = '<select>';
  78. if (response && response.length) {
  79. for (var i = 0, l = response.length; i < l; i++) {
  80. var ri = response[i];
  81. s += '<option value="' + ri + '">' + ri + '</option>';
  82. }
  83. }
  84. return s + '</select>';
  85. }
  86. }
  87. },
  88.  
  89. { name: 'Custom3', index: 'Custom3', align: 'left', width: 50, sortable: true, editable: true, edittype: "select", editoptions: { dataUrl: '@Url.Action("GetCustumer3")',
  90.  
  91. buildSelect: function (data) {
  92. var response = typeof (data) === "string" ? jQuery.parseJSON(data.responseText) : data;
  93. var s = '<select>';
  94. if (response && response.length) {
  95. for (var i = 0, l = response.length; i < l; i++) {
  96. var ri = response[i];
  97. s += '<option value="' + ri + '">' + ri + '</option>';
  98. }
  99. }
  100. return s + '</select>';
  101. }
  102. }
  103. },
  104. { name: 'ProductName', index: 'ProductName', sortable: true, editable: true },
  105.  
  106. ],
  107.  
  108. loadComplete: function () {
  109.  
  110. if (grid.getGridParam('datatype') === 'json') {
  111. // build the set 'source' parameter of the autocomplete
  112. grid.jqGrid('setColProp', 'EanNummer', {
  113. searchoptions: {
  114. sopt: ['bw'],
  115. dataInit: function (elem) {
  116. $(elem).autocomplete({
  117. source: mydata,
  118. delay: 0,
  119. minLength: 0
  120. });
  121. }
  122. }
  123. });
  124.  
  125. }
  126.  
  127. jQuery("#list").trigger("reloadGrid", { stringResult: true, searchOnEnter: true, defaultSearch: "cn" }); // Call to fix client-side sorting
  128.  
  129. },
  130.  
  131. gridComplete: function () {
  132. var gr = jQuery('#list'); gr.setGridHeight("auto", true);
  133. },
  134.  
  135.  
  136. onSelectRow: function (id) {
  137. if (id && id !== lastsel) {
  138. jQuery('#list').jqGrid('restoreRow', lastsel);
  139.  
  140. jQuery('#list').jqGrid('editRow', id, true);
  141. lastsel = id;
  142.  
  143. }
  144. },
  145. autowidth: true,
  146. editurl: '@Url.Action("GridSave")',
  147. rowNum: 50000,
  148. rowList: [5, 10, 20, 50],
  149. sortname: 'DSVareId',
  150. sortorder: "desc",
  151. viewrecords: true
  152.  
  153. });
  154. jQuery("#list").jqGrid('navGrid', "#page", { edit: false, add: false, del: false });
  155. });
  156.  
  157. </script>