I am newbie in stackoverflow and newbie with Kendo UI and newbie with web development ... I was born yesterday :). Joking apart my question is not really a question, I know the forum rules over specific questions but I need help.
My problem is this:
I adapted the Kendo UI MVC Music Store tutorial but with use MVC ASP.net (I work with Delphi) and it not works.
I have two files:
Category.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Administración de Categorías</title>
<link href="kendo/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="kendo/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/menuvir.css" type="text/css"/>
<script src="kendo/js/jquery.min.js" type="text/javascript"></script>
<script src="kendo/js/kendo.web.min.js" type="text/javascript"></script>
</head>
<body>
<div id="categGrid"></div>
<script src="js/category.js type="text/javascript"></script>
</body>
</html>
and Category.js
(function (window, $, kendo) {
var getCategAsync = function () {
var deferred = $.Deferred(),
translateCateg = function (data) {
deferred.resolve($.map(data.result, function(item) {
return {
value: item.ID,
text: item.Description
};
}));
},
loadCateg = function () {
new kendo.data.DataSource({
type: "json",
transport: {
read: "/w/Category?select=ID,Description"
},
schema: {
data: 'result'/*,
total: store.config.wcfSchemaTotal*/
}
}).fetch(function (data) {
translateCateg(data);
});
};
window.setTimeout(loadCateg, 1);
return deferred.promise();
};
var getLangAsync = function () {
var deferred = $.Deferred(),
translateLang = function (data) {
deferred.resolve($.map(data.result, function(item) {
return {
value: item.ID,
text: item.Description
};
}));
},
loadLang = function () {
new kendo.data.DataSource({
type: "json",
transport: {
read: "/w/Language?select=ID,Description"
},
schema: {
data: 'result'/*,
total: store.config.wcfSchemaTotal*/
}
}).fetch(function (data) {
translateLang(data);
});
};
window.setTimeout(loadLang, 1);
return deferred.promise();
};
var initGrid = function (categs, langs, categEditor, langEditor) {
$("#categGrid").kendoGrid({
sortable: true,
groupable: false, //true,
filterable: false, //true,
pageable: true,
editable: "inline",
toolbar: ["create"],
dataSource: {
type: "json",
pageSize: 10,
serverPaging: false, //true,
serverFiltering: false, //true,
serverSorting: false, //true,
sort: { field: "SortOrder", dir: "asc" },
transport: {
type: "json",
read: {
url: "/w/Category?select=ID,Description",
type: "GET"
}/*,
update: {
url: function (data) {
return store.config.albumsUrl + "(" + data.AlbumId + ")"
},
type: "PUT"
},
destroy: {
url: function (data) {
return store.config.albumsUrl + "(" + data.AlbumId + ")";
},
type: "DELETE"
},
create: {
url: store.config.albumsUrl,
type: "POST"
} */
},
schema: {
data: "result",
//total: store.config.wcfSchemaTotal,
model: {
id: "ID",
fields: {
ID: { type: "number" },
Description: { type: "string", validation: {required: true} },
Language: { type: "number", defaultValue: 1 },
SortOrder: { type: "number", defaultValue: 0 },
Status: { type: "number", defaultValue: 0 },
Parent: { type: "number", defaultValue: 0 }
}
}
},
},
columns: [
{ field: "ID", title: "ID", editable: false, filterable: false, width: 20 },
{ field: "Description", title: "Descripción", filterable: false, width: 150 },
{ field: "Language", title: "Idioma", values: langs, editor: langEditor, filterable: false, width: 50 },
{ field: "SortOrder", title: "Orden", filterable: false, width: 20 },
{ field: "Status", title: "Estado", filterable: false, width: 50 },
{ field: "Parent", title: "Subcategoría de", values: categs, editor: categEditor, filterable: false, width: 150 },
{ command: ["edit", "destroy"], title: " ", width: "160px" }
]
});
};
// Wait for both the genres and artists lists to load.
$.when(getCategAsync(), getLangAsync())
.done(function(categs, langs) {
var categEditor = function (container, options) {
$('<input data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '" />')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: categs
});
};
var langEditor = function (container, options) {
$('<input data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '" />')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: langs
});
};
initGrid(categs, langs, categEditor, langEditor);
});
})(window, jQuery, kendo);
When I execute this nothing is showing and no error in Firebug console.
What's wrong ? Any help is appreciatted.
Thanks in advance and sorry for my english.
UPDATE
Sorry, I forgot update the Category.html code here, but I always had the value right "id" and yet it not works. Thanks for the quick response.
Well, for starters your JQuery is attempting to create a KendoGrid on an ID that isn't present in your HTML
$("#categGrid").kendoGrid(
doesn't match anything in your HTML. Did you mean
$("#grid").kendoGrid({
which would find
<div id="grid"></div>
I solved the problem. I changed some options I adapted erroneously.
This is the code that works.
(function (window, $, kendo) {
var getCategAsync = function () {
var deferred = $.Deferred(),
translateCateg = function (data) {
deferred.resolve($.map(data.items, function(item) {
return {
value: item.ID,
text: item.Description
};
}));
},
loadCateg = function () {
new kendo.data.DataSource({
transport: {
read: {
url: "/w/Category?select=ID,Description",
dataType: "json",
type: "GET"
}
},
schema: {
data: 'result'/*,
total: store.config.wcfSchemaTotal*/
}
}).fetch(function (data) {
translateCateg(data);
});
};
window.setTimeout(loadCateg, 1);
return deferred.promise();
};
var getLangAsync = function () {
var deferred = $.Deferred(),
translateLang = function (data) {
deferred.resolve($.map(data.items, function(item) {
return {
value: item.ID,
text: item.Description
};
}));
},
loadLang = function () {
new kendo.data.DataSource({
transport: {
read: {
url: "/w/Language?select=ID,Description",
dataType: "json",
type: "GET"
}
},
schema: {
data: 'result'/*,
total: store.config.wcfSchemaTotal*/
}
}).fetch(function (data) {
translateLang(data);
});
};
window.setTimeout(loadLang, 1);
return deferred.promise();
};
var initGrid = function (categs, langs, categEditor, langEditor) {
$("#categGrid").kendoGrid({
sortable: true,
groupable: false, //true,
filterable: false, //true,
pageable: true,
editable: "inline",
toolbar: ["create"],
dataSource: {
type: "json",
pageSize: 10,
serverPaging: false, //true,
serverFiltering: false, //true,
serverSorting: false, //true,
sort: { field: "SortOrder", dir: "asc" },
transport: {
read: {
url: "/w/Category?select=*",
type: "GET",
dataType: "json"
}/*,
update: {
url: function(data) {
return "/w/Category?ID=" + data.ID;
},
contentType: "application/json",
type: "PUT"
},
destroy: {
url: function (data) {
return store.config.albumsUrl + "(" + data.AlbumId + ")";
},
type: "DELETE"
},
create: {
url: store.config.albumsUrl,
type: "POST"
} */
},
schema: {
data: "result",
total: function(response) {
return response.result.length;
},
model: {
id: "ID",
fields: {
ID: { type: "number" },
Description: { type: "string", validation: {required: true} },
Language: { type: "number", defaultValue: 1 },
SortOrder: { type: "number", defaultValue: 0 },
Status: { type: "number", defaultValue: 0 },
Parent: { type: "number", defaultValue: 0 }
}
}
},
},
columns: [
{ field: "ID", title: "ID", editable: false, filterable: false, width: 20 },
{ field: "Description", title: "Descripción", filterable: false, width: 150 },
{ field: "Language", title: "Idioma", values: langs, editor: langEditor, filterable: false, width: 50 },
{ field: "SortOrder", title: "Orden", filterable: false, width: 20 },
{ field: "Status", title: "Estado", filterable: false, width: 50 },
{ field: "Parent", title: "Subcategoría de", values: categs, editor: categEditor, filterable: false, width: 150 },
{ command: ["edit", "destroy"], title: " ", width: "160px" }
]
});
};
// Wait for both the genres and artists lists to load.
$.when(getCategAsync(), getLangAsync())
.done(function(categs, langs) {
var categEditor = function (container, options) {
$('<input data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '" />')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: categs
});
};
var langEditor = function (container, options) {
$('<input data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '" />')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: langs
});
};
initGrid(categs, langs, categEditor, langEditor);
});
})(window, jQuery, kendo);
Thanks.
Related
in my asp.net mvc, using jqGrid to bind the data. code is as below. But its not loading the data and not hitting the controller action when debugging. what's the problem in this below code. Alert is showing the url but not hitting the controller action. Help would be appreciate. Please let me know if you need more information
#model Stud.Areas.Admin.Models.AdminVM
#using Stud.Common.Extension;
<h2>MD Index</h2>
<br />
<div style="margin-top: -45px">
<div class="col-md-12">
<div id="gridDivmsg" style="clear: both;">
<table id="jqGrid" ></table>
<div id="jqGridPagermsg"></div>
</div>
</div>
</div>
#section scripts{
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
#*<script src="~/Scripts/MDScript.js"></script>*#
#Html.jqGridSetup()
<script>
$(document).ready(function () {
var $grid = $('#jqGrid');
var $gridDiv = $('#gridDivmsg');
function reloadGridmsg() {
var urlName = '#Url.Action("GetMessagesForGrid", "MD")';
$grid.jqGrid("setGridParam", { url: urlName, datatype: "json", page: 1 }).trigger("reloadGridmsg");
$gridDiv.show();
alert(urlName);
}
$grid.jqGrid({
editurl: '#Url.Action("EditRowMessage")',
datatype: 'local',
styleUI: 'Bootstrap',
colNames: ['Id', 'Message Key', 'Message Value', 'Message Status'],
colModel: [
{ name: 'Id', index: 'Id', width: 1, hidden: true, editable: true, edittype: 'text', editrules: { required: true } },
{ name: 'MessageKey', index: 'MessageKey', width: 1, editable: true, edittype: 'text', editrules: { required: true } },
{ name: 'MessageValue', index: 'MessageValue', width: 1, editable: true, edittype: 'textarea', editrules: { required: true } },
{ name: 'MessageStatus', index: 'MessageStatus', width: 1, editable: true, edittype: 'select', editoptions: { value: { 'Active': 'Active', 'InActive': 'InActive' }, defaultValue: 'Active' }, editrules: { required: true } }
],
responsive: true,
loadonce: true,
pager: $('#jqGridPagermsg'),
height: 'auto',
sortname: 'Id',
rowNum: 20,
autowidth: true,
viewrecords: true,
altRows: true,
altclass: 'jqGridAltRow'
});
$grid.jqGrid('filterToolbar', { autosearch: true, searchOnEnter: false, defaultSearch: "cn" });
$grid.jqGrid('navGrid', "#jqGridPagermsg", {
edit: true,
add: true,
del: false,
search: false,
refresh: false,
view: false,
position: "left",
cloneToTop: false
},
{
editCaption: "Edit User",
recreateForm: true,
checkOnUpdate: true,
checkOnSubmit: true,
closeAfterEdit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
},
afterComplete: function () {
reloadGridmsg();
}
},
{
addCaption: "Add User",
closeAfterAdd: true,
recreateForm: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
},
afterComplete: function () {
reloadGridmsg();
}
},
{
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
});
reloadGridmsg();
});
</script>
}
Controller Action method is as below.
public ActionResult GetMessagesForGrid(StudVM model)
{
if (!IsAuthorized(Enums.Rights.Admin))
return View("NoAccess");
var gridData = _activityService.GetVCRMessagesList();
int totalRecords = gridData.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)model.rows);
var jsonData = new
{
total = totalPages,
page = model.page,
records = totalRecords,
rows = gridData.Select(d => new { Id = d.Id, cell = new object[] { d.Id, d.MessageKey, d.MessageValue, d.MessageStatus } }).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
till i'm getting blank grid as below
enter image description here
Your controller is having a parameter model of type StudVM which is not passed in your javascript url.
Try passing parameter of type StudVM. It may resolve your issue.
$grid.jqGrid("setGridParam", { url: urlName,postData: { model:<your model>}, datatype: "json", page: 1 }).trigger("reloadGridmsg");
You need to have the action method follow some method signature as follows
public ActionResult GetMessagesForGrid(string sidx, string sord, int page, int rows, bool _search, string filters)
{
if (!IsAuthorized(Enums.Rights.Admin))
return View("NoAccess");
var gridData = _activityService.GetVCRMessagesList();
int totalRecords = gridData.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / rows);
var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = gridData.Select(d => new { Id = d.Id, cell = new object[] { d.Id, d.MessageKey, d.MessageValue, d.MessageStatus } }).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
I also don't see a reason why you don't make the grid datatype to json and specify the url in the begging when you define the grid instead of making the grid client side and then reloading it
$grid.jqGrid({
editurl: '#Url.Action("EditRowMessage")',
datatype: 'json',
url: '#Url.Action("GetMessagesForGrid", "MD")'
styleUI: 'Bootstrap',
colNames: ['Id', 'Message Key', 'Message Value', 'Message Status'],
colModel: [
{ name: 'Id', index: 'Id', width: 1, hidden: true, editable: true, edittype: 'text', editrules: { required: true } },
{ name: 'MessageKey', index: 'MessageKey', width: 1, editable: true, edittype: 'text', editrules: { required: true } },
{ name: 'MessageValue', index: 'MessageValue', width: 1, editable: true, edittype: 'textarea', editrules: { required: true } },
{ name: 'MessageStatus', index: 'MessageStatus', width: 1, editable: true, edittype: 'select', editoptions: { value: { 'Active': 'Active', 'InActive': 'InActive' }, defaultValue: 'Active' }, editrules: { required: true } }
],
responsive: true,
// loadonce: true,
pager: $('#jqGridPagermsg'),
height: 'auto',
sortname: 'Id',
rowNum: 20,
autowidth: true,
viewrecords: true,
altRows: true,
altclass: 'jqGridAltRow'
});
if you need to know how to make that action method custom look at
This solution
This is my code for kendo the page is displaying multiple time given in
i tried every this but its still not working please suggest me what to do to solve this problem. picture.And validation message is also not showing its validation but not displaying message
$(document).ready(function() {
$("#production-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ProductAttributeList", "Production"))",
type: "POST",
dataType: "json",
contentType: "application/json"
},
create: {
url: "#Html.Raw(Url.Action("SettingAdd", "Production"))",
type: "POST",
dataType: "json"
//data: addAntiForgeryToken
},
update: {
url: "#Html.Raw(Url.Action("SettingUpdate", "Production"))",
type: "POST",
dataType: "json"
//data: addAntiForgeryToken
},
destroy: {
url: "#Html.Raw(Url.Action("SettingDelete", "Production"))",
type: "POST",
dataType: "json"
//data: addAntiForgeryToken
},
parameterMap: function(data, operation) {
if (operation != "read") {
return data;
} else {
//for some reasons only such "Filter" data be parsed
return JSON.stringify(data);
}
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
Image: { editable: false, type: "string" },
IteamId: { editable: false, type: "number" },
ProductId: { editable: false, type: "number" },
UserName: { editable: false, type: "string" },
FoundInProductName: { false: true, type: "string" },
FoundInProductDescription: { editable: false, type: "string" },
TaggedKeyword: { editable: false, type: "string" },
TaggedComment: { editable: false, type: "string" },
AttributeName: { editable: true, type: "string" },
Comment: { editable: true, type: "string" },
ShelfID: { editable: true, type: "string" },
ShelfName: { editable: true, type: "string" },
ProductType: { editable: true, type: "string",
validation: { required: true , message: "Product Type is required" } } ,
Remark: { editable: true, type: "string" },
Id: { editable: false, type: "number" }
}
}
},
requestEnd: function(e) {
if (e.type == "create" || e.type == "update") {
this.read();
}
},
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: 50,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes:[ 50, 100, 150, 200, 250]
},
scrollable: true,
editable: true,
columns: [
{
field: "Id",
headerTemplate: "<input id='mastercheckbox' type='checkbox'/>",
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" },
template: "<input type='checkbox' value='#=Id#' class='checkboxGroups'/>",
width: 50
},{
field: "Image",
title: "Image",
width: 300
},{
field: "IteamId",
title: "IteamId",
width: 300
},
{
field: "ProductId",
title: "ProductId",
width: 300
}, {
field: "UserName",
title: "UserName",
width: 300
}, {
field: "FoundInProductName",
title: "Keyword found(PN)",
width: 300
}, {
field: "FoundInProductDescription",
title: "Keyword found(PD)",
width: 300
}, {
field: "TaggedKeyword",
title: "Tagged Keyword",
width: 300
}, {
field: "TaggedComment",
title: "Tagged Comment",
width: 300
},
{
field: "AttributeName",
title: "Attribute Name(the attribute which is worked upon- E.g. Color)",
width: 300
},
{
field: "Comment",
title: "Comment",
editor: CommentTypeDropDownEditor,
template: "#:Comment#",
width: 300
},
{
field: "ShelfID",
title: "Suggested Shelf ID",
width: 300
},
{
field: "ShelfName",
title: "Suggested Shelf Name",
width: 300
},
{
field: "ProductType",
title: "Product Type",
width: 300
},
{
field: "Remark",
title: "Remarks (Free Text)",
width: 300
}
]
});
i can able to fingure out what the issue and validation message is also not displaying
As I mentioned in the question title I need to trigger an event as soon as Shield-ui grid editable cell textbox destroyed. Couldnt find a solution in their documentation.Any help would be appreciable. Thank you.
Here is my code so far ...
$("#allTransGrid").shieldGrid({
dataSource: {
data: datad,
schema: {
fields: {
mbr_id: {path: "mbr_id", type: String},
lon_id: {path: "lon_id", type: String},
center_name: {path: "center_name", type: String},
grp_name: {path: "grp_name", type: String},
mbr_name: {path: "mbr_name", type: String},
lon_amt: {path: "lon_amt", type: Number},
lon_int_amt: {path: "lon_int_amt", type: Number},
loan_total: {path: "loan_total", type: Number},
ind_inst: {path: "ind_inst", type: Number},
today_pay: {path: "today_pay", type: Number, nullable: false},
lon_id_as: {path: "lon_id_as", type: Number}
}
}
},
sorting: {
multiple: true
},
paging: {
pageSize: 12,
pageLinksCount: 10
},
selection: {
type: "row",
multiple: true,
toggle: false
},
columns: [
{field: "mbr_id", width: "100px", title: "Member ID"},
{field: "lon_id", width: "100px", title: "Loan ID"},
{field: "center_name", title: "Center Name", width: "100px"},
{field: "grp_name", title: "Group Name", width: "70px"},
{field: "mbr_name", title: "Member Name", width: "170px"},
{field: "lon_amt", title: "Loan Amount", width: "100px"},
{field: "lon_int_amt", title: "Interest", width: "100px"},
{field: "loan_total", title: "Total", width: "80px"},
{field: "ind_inst", title: "Installment Amount", width: "120px"},
{field: "today_pay", title: "Today Payment"}
],
events: {
editorCreating: function (e) {
if (e.field == "ind_inst") {
e.options = {enabled: false, max: 1000};
}
if (e.field == "loan_total") {
e.options = {enabled: false, max: 500000};
}
if (e.field == "lon_int_amt") {
e.options = {enabled: false, max: 100000};
}
if (e.field == "lon_amt") {
e.options = {enabled: false, max: 100000};
}
if (e.field == "mbr_name") {
e.options = {enabled: false};
}
if (e.field == "grp_name") {
e.options = {enabled: false};
}
if (e.field == "center_name") {
e.options = {enabled: false};
}
if (e.field == "lon_id") {
e.options = {enabled: false};
}
if (e.field == "mbr_id") {
e.options = {enabled: false};
}
if (e.field == "today_pay") {
e.options = {max: 10000};
}
},
detailCreated: function (e) {
$.ajax({
url: "PaymentCatcherGroupBy",
cache: false,
dataType: 'JSON',
data: {loan_id: e.item.lon_id_as, c_id: center_id},
success: function (data) {
$("<div/>")
.appendTo(e.detailCell)
.shieldGrid({
dataSource: {data: data},
sorting: {
multiple: true
},
paging: {
pageSize: 5
},
columns: [
{field: "installment_num", title: "Week", editable: false},
{field: "installmentAmount", title: "Installment Amount", editable: false},
{field: "paidAmount", title: "Paid Amount", editable: false},
{field: "dueDate", title: "Date Paid", type: Date, editable: false}
], editing: {enabled: false}
});
}, error: function (jqXHR, textStatus, errorThrown) {
alert('error');
}
});
},
command: function (e) {
//selectionChanged doesnt work here....
if (e.commandName == "selectionChanged") {
var toBeSelected = e.toBeSelected;
console.log(toBeSelected);
// e.cancel = true;
}
}
},
editing: {
enabled: true,
event: "doubleclick",
type: "cell"
},
scrolling: true,
height: 600
});
After focus lost of the textbox I need to trigger an event :
There is no destroy event, associated with any of the editors in the control, when in edit mode.
One option, depending on the final goal that you have would be to subscribe to the command event:
http://www.shieldui.com/documentation/grid/javascript/api/events/command
which should be triggered on save, after an edit.
If that is not an option, please supply some additional information on what is the exact end result that you are after.
i am trying to rebind data to ighierarchicalgrid on rowexpanding event and it is throwing error like "Uncaught TypeError: Cannot read property '_expandendnoevents' of undefined". when i will give initialExpandDepth as 1 that time data is binding. if i remove it it is throwing above error.
$(document).ready(function () {
$.ajax({
type: "GET",
url: '#Url.Action("DataStoreData", "DataStore")',
data: JSON.stringify(),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
processData: false,
cache: false,
success: function (result) {
treegriddata = result;
igGridLoading(treegriddata);
collapseAllRows($("#hierarchicalGrid"));
}
});
});
function collapseAllRows(rootGrid) {
var level = 1, children, id, ad;
ad = rootGrid.igHierarchicalGrid("option", "animationDuration");
rootGrid.igHierarchicalGrid("option", "animationDuration", 0);
$(rootGrid.igGrid("allRows")).each(function (index, element) {
rootGrid.igHierarchicalGrid("collapse", element);
});
id = setInterval(function () {
children = rootGrid.igHierarchicalGrid("allChildren").filter("table[data-level='" + level + "']");
if (children.length > 0) {
$(children).each(function (index, element) {
$($(element).igGrid("allRows")).each(function (index, element) {
if ($(element).find("td.ui-iggrid-expandcolumn").length > 0 && ($(element).attr("state") === undefined || $(element).attr("state") === "c")) {
rootGrid.igHierarchicalGrid("collapse", element);
}
});
});
level++;
} else {
clearInterval(id);
rootGrid.igHierarchicalGrid("option", "animationDuration", ad);
}
}, 1000);
}
function igGridLoading(data) {
$("#hierarchicalGrid").igHierarchicalGrid({
width: "100%",
autoGenerateColumns: false,
dataSource: data,
autoCommit: true,
primaryKey: "ProjectId",
dataSourceType: "json",
autoGenerateLayots: false,
initialExpandDepth: 1,
columns: [
{ headerText: "Project Id", key: "ProjectId", dataType: "number", width: "0%", hidden: true },
{ headerText: "Project Ref", key: "ProjectRef", dataType: "string", width: "15%" },
{ headerText: "Project Desc", key: "ProjectDesc", dataType: "string", width: "20%" }
],
childrenDataProperty: "Process",
autoGenerateLayouts: false,
columnLayouts: [
{
key: "Process",
autoCommit: true,
//responseDataKey: "results",
autoGenerateColumns: false,
autofitLastColumn: false,
primaryKey: "ProjProcId",
width: "100%",
columns: [
{ headerText: "Project Process Id", key: "ProjProcId", dataType: "number", width: "100px", hidden: true },
{ headerText: "Process Code", key: "ProcessCode", dataType: "string", width: "100px" },
{ headerText: "Process Name", key: "ProcessName", dataType: "string", width: "150px" }
],
features: [
{
name: "Paging",
pageSize: 10
},
{
name: "Selection",
mode: "row",
multipleSelection: true
},
{
name: "Sorting",
type: "local"
},
{
name: "Filtering",
type: "local"
}
],
childrenDataProperty: "Components",
autoGenerateLayouts: false,
columnLayouts: [
{
key: "Components",
autoCommit: true,
//responseDataKey: "results",
autoGenerateColumns: false,
autofitLastColumn: false,
primaryKey: "ProcCompId",
width: "100%",
columns: [
{ headerText: "Process Component Id", key: "ProcCompId", dataType: "number", width: "100px", hidden: true },
{ headerText: "Component Code", key: "ComponentCode", dataType: "string", width: "120px" },
{ headerText: "Component Desc", key: "ComponentDesc", dataType: "string", width: "150px" },
{ headerText: "Component Value", key: "ComponentValue", dataType: "string", width: "150px" }
],
features: [
{
name: "Paging",
pageSize: 10
},
{
name: "Selection",
mode: "row",
multipleSelection: true
},
{
name: "Sorting",
type: "local"
},
{
name: "Filtering",
type: "local"
}
]
}
]
}
],
rowExpanding: function (e, args) {
var grid = args.owner, expandedRows, i;
expandedRows = $(args.parentrow).closest('tbody').find('tr[state=e]');
for (i = 0; i < expandedRows.length; i++) {
grid.collapse(expandedRows[i]);
}
var childGrid = args.parentrow.next().find("table.ui-iggrid-table");
//args.owner.element.parents("tr[data-container='true']").prevObject[0].rows['2'].parentNode.hidden = true;
var id = $(childGrid).attr("id");
var rows = $('#' + id).igGrid("rows");
if (rows.length === 0) {
$(args.parentrow.find("span")[0]).hide();
$('#' + id).hide();
}
},
features: [
{
name: 'Selection',
mode: 'row',
multipleSelection: false,
activation: true
}
],
rowExpanded: function (e, args) {
alert(e + args);
}
});
$("#hierarchicalGrid").igHierarchicalGrid("dataBind");
$("#hierarchicalGrid").on("ighierarchicalgridrowexpanding", function (evt, ui) {
var message = "ighierarchicalgridrowexpanding";
alert(message);
index = ui.parentrow.attr("data-id");
loadChildGridData(index);
});
}
function loadChildGridData(index) {
$.ajax({
type: "GET",
url: '/DataStore/DataStoreProcessData?key=' + index,
data: JSON.stringify(),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
processData: false,
cache: false,
success: function (result) {
var comp = treegriddata[index - 1].Process[0].Components;
treegriddata[index - 1].Process = result;
for (var i = 0; i < treegriddata[index - 1].Process.length; i++) {
treegriddata[index - 1].Process[i].Components = comp;
}
//Initialize
$("#hierarchicalGrid").igHierarchicalGrid({
initialDataBindDepth: 1
});
igGridLoading(treegriddata);
}
});
}
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
$(document).ready(function () {
jQuery("#tOceanC_ds_list").jqGrid({
// add by default to avoid webmethod parameter conflicts
// add by default to avoid webmethod parameter conflicts
url: "Default.aspx?cmd=select",
datatype: "json",
colNames: ['BOQID', 'BOQType', 'Description', 'Quantity'],
colModel:[
{ name: "BOQID", hidden: true, index: "BOQID", jsonmap: "BOQID",search:true,key:true,editable:true },
{ name: "BOQType", summaryTpl: "{0}", editable: true, searchoptions: {}, index: "BOQType", width: 200, align: "center", jsonmap: "BOQType", searchoptions: {}},
//{ name: "Description", editable: true, index: "Description", width: 200, align: "center", jsonmap: "Description", search: true },
{ "editoptions": { dataInit: function (el) { setTimeout(function () { var ec = 'DatePicker1'; if (typeof (jQuery(el).datepicker) !== 'function') alert('JQDatePicker javascript not present on the page. Please, include jquery.jqDatePicker.min.js'); jQuery(el).datepicker(eval(ec + '_dpid')); }, 200); } }, "summaryTpl": "{0}", "editable": true, "edittype": "text", "searchoptions": { dataInit: function (el) { setTimeout(function () { var ec = 'DatePicker1'; if (typeof (jQuery(el).datepicker) !== 'function') alert('JQDatePicker javascript not present on the page. Please, include jquery.jqDatePicker.min.js'); jQuery(el).datepicker(eval(ec + '_dpid')); }, 200); } }, name: "Description", index: "Description" },
{ name: "Quantity", editable: true, index: "Quantity", width: 200, align: "center", jsonmap: "Quantity", search: true }
],
viewrecords: true, scrollrows: false, postBackUrl: "__doPostBack('#tOceanC_ds_list','jqGridParams')",
editDialogOptions: { editCaption: "Edit Dialog", resize: false, closeAfterEdit: true, processData: "Default.aspx", bSubmit: "Submit", bCancel: "Cancel Editing", modal: true, recreateForm: true, errorTextFormat: function (data) { return 'Error: ' + data.responseText } },
addDialogOptions: { recreateForm: true, errorTextFormat: function (data) { return 'Error: ' + data.responseText } },
delDialogOptions: { errorTextFormat: function (data) { return 'Error: ' + data.responseText } },
searchDialogOptions: {left:300,top:400,resize:false},viewRowDetailsDialogOptions: {},jsonReader: { id: "BOQID" },
rowNum: 10,
height: "60%",
rownumbers: true,
autowidth: true,
shrinkToFit: false,
rowList:[10,20,30,50,100],
pager: jQuery("#OceanC_pager"),
viewrecords: true,
multiselect: false,
sortorder: "desc",
caption:"List of Users",
editurl: "Default.aspx",
//serializeGridData: function (data) {
// return $.toJSON(data);
//},
jsonReader: { repeatitems : false, id: "0" }
});
jQuery("#tOceanC_ds_list").jqGrid("navGrid", "#OceanC_pager", { add: false, edit: true, del: true, search: true, view: true,reload:true}, {}, {}, {}, { multipleSearch: false }, jQuery('#tOceanC_ds_list').getGridParam('editDialogOptions'), jQuery('#tOceanC_ds_list').getGridParam('addDialogOptions'), jQuery('#tOceanC_ds_list').getGridParam('delDialogOptions'), jQuery('#tOceanC_ds_list').getGridParam('searchDialogOptions'), jQuery('#tOceanC_ds_list').getGridParam('viewRowDetailsDialogOptions')).bindKeys()
});
function customPhoto(cellVal, options, rowObject){
return "<img src='assets/img/" + cellVal + "' height='50' width='50' >";
}
</script>
The editurl don't pass the parameter to edit the data like oper, del, edit, add
I want editurl to pass these parameter to code behind when I request.querystring["oper"] it return the empty or request.querystring["del"] it return empty
I am using asp.net webform 3.5 framework