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
Could you please help me how I could do to delete multiple records selected in my jqgrid? I've tried a number of ways, but so far not got any success. I will be grateful to anyone who can help me.
jQuery("#grid-table").jqGrid({
//direction: "rtl",
url: "/Lojas/GetLojas",
datatype: 'json',
mtype: 'Get',
height: '100%',
colNames: [ ' ',
'Name',
'Description'
],
colModel: [
{
name: 'myac', index: '', width: 65, fixed: true, sortable: false, resize: false,
formatter: 'actions',
formatoptions: {
keys: true,
delOptions: { recreateForm: true, url: '/Lojas/Delete', beforeShowForm: beforeDeleteCallback },
editformbutton: true, editOptions: { recreateForm: true, url: '/Lojas/Edit', closeAfterEdit: true, beforeShowForm: beforeEditCallback, closeOnEscape: true }
}
},
{ key: true, hidden: true, name: 'Id', index: 'Id', sorttype: "int", editable: false },
{ key: false, name: 'Name', index: 'Name', editable: true},
{ key: false, name: 'Description', index: 'Description', editable: true}
],
viewrecords: true,
loadonce: true,
rowNum: 10,
rowList: [5, 10, 15],
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
pager: pager_selector,
altRows: true,
autowidth: true,
multiselect: true,
multiboxonly: true,
sortorder: "desc",
multiboxonly: true,
caption: "Lojas Cadastradas"
});
//navButtons
jQuery("#grid-table").jqGrid('navGrid', pager_selector,
{
edit: true,
add: true,
del: true,
search: true,
refresh: true,
view: true,
},
{
url: '/Lojas/Edit',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true
},
{
url: '/Lojas/Create',
closeOnEscape: true,
closeAfterAdd: true,
recreateForm: true
},
{
url: '/Lojas/Delete',
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true
},
{
//search form
recreateForm: true,
closeOnEscape: true,
closeAfterSearch: true,
multipleSearch: true
},
{
//view record form
recreateForm: true
}
)
Code in my controller:
public ActionResult Delete(Loja loja)
{
Loja lojaToDelete = db.Lojas.Find(loja.Id);
if (lojaToDelete == null)
{
return HttpNotFound();
}
db.Lojas.Remove(lojaToDelete);
db.SaveChanges();
return View(loja);
}
I recommend you to change prototype of Delete function public ActionResult Delete(Loja loja) to
public void Delete(string id)
The main problem in your code is the following. Corresponds to the documentation jqGrid post id parameter to url: '/Lojas/Delete'. You can rename the name of id parameter using prmNames. In the case you can use prmNames: {id: "Id"}, but it's not really required.
If multiple rows needed be deleted then id string will be comma separated and you can use something like
public void Delete(string id)
{
var ids = id.Split(',');
foreach (lojaId in ids) {
Loja lojaToDelete = db.Lojas.Find(lojaId);
if (lojaToDelete == null)
throw new HttpResponseException(HttpStatusCode.NotFound);
db.Lojas.Remove(lojaToDelete);
}
db.SaveChanges();
}
Only WWID column is disabled not both columns are disabledenter code here please help me to disable two or more columns
colNames: ['UserName','WWID', 'Generic', 'Mac'],
colModel: [
{ name: 'UserName', index: 'UserName', key: true, width: '200', editable: true, sortable: true, align: 'center' },
{ name: 'WWID', index: 'WWID', width: '250' , editable: true, sortable: true,sorttype:'int', align: 'center' },
{ name: 'Generic', index: 'generic', width:'200', editable: true, sortable: true,sorttype:'text', align: 'center' },
{ name: 'Mac', index: 'mac', width:'200', editable: true, sortable: true,sorttype:'int', align: 'center' },
],
...............
});
jQuery("#gridId").jqGrid('navGrid', '#gridpager',
{ edit: true, add: true, del: true, search: true, excel: true, exceltext: 'Excel', cloneToTop: true },
{ // edit option
url: "Uploading.ashx", closeAfterEdit: true,afterSubmitCell: function () { $('#gridId').trigger('reloadGrid');},
beforeShowForm: function (form) { $('#tr_UserName', form).hide(); },
beforeShowForm: function(form) { $('#tr_WWID', form).hide(); }
},
{ // add option
url: "Uploading.ashx", closeAfterAdd: true,
beforeShowForm: function(form) { $('#tr_UserName', form).show(); },
beforeShowForm: function (form) { $('#tr_WWID', form).show(); }
},
You should provide only one beforeShowForm callback which will show/hide both rows. In your case only the last one provided is being used. Your code should be like this:
jQuery("#gridId").jqGrid('navGrid', '#gridpager',
{ edit: true, add: true, del: true, search: true, excel: true, exceltext: 'Excel', cloneToTop: true },
//Edit options
{
url: "Uploading.ashx",
closeAfterEdit: true,
afterSubmitCell: function () { $('#gridId').trigger('reloadGrid'); },
beforeShowForm: function (form) { $('#tr_UserName', form).hide(); $('#tr_WWID', form).hide(); }
},
//Add options
{
url: "Uploading.ashx",
closeAfterAdd: true,
beforeShowForm: function(form) { $('#tr_UserName', form).show(); $('#tr_WWID', form).show(); }
},
...
);
jQuery("#gridId").jqGrid('navGrid', '#gridpager',
{ edit: true, add: true, del: true, search: true, excel: true, exceltext: 'Excel', cloneToTop: true },
//Edit options
{
url: "Uploading.ashx",
closeAfterEdit: true,
afterSubmitCell: function () { $('#gridId').trigger('reloadGrid'); },
beforeShowForm: function (form) { $('#tr_UserName', form).hide(); $('#tr_WWID', form).hide(); }
},
//Add options
{
url: "Uploading.ashx",
closeAfterAdd: true,
beforeShowForm: function(form) { $('#tr_UserName', form).show(); $('#tr_WWID', form).show(); }
},
...
);
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.
I am new to JQGrid, i am developing a screen where i need to use a tool bar in JQ Grid and perform search operation accordingly.
I have a date field in my JqGrid and i have added the DtPicker in the Search option also.
But when i select the date from DTPicker, search for the selected date is not performed.
Please let me know how to perform search for selected date.
<table id="test">
</table>
<div id="divtest">
</div>
<div>
<asp:Label ID="count" runat="server" Text="Label"></asp:Label>
</div>
<script type="text/javascript">
$(document).ready
(
function CreateGrid()
{
var lastSel,lastSel1, Status = ["All", "Active", "InActive"],defaultStatus="Active";
jQuery("#test").jqGrid
(
{
url:'Test.aspx',
datatype:'json',
contentType: "application/json; charset=utf-8",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
colNames:[ 'EMPID',
'EMPName',
'DOB',
'Designation',
'Genders',
'Status',
'Remarks',
'EMPType',
''
],
colModel:
[
{
name:'EMPID',
index:'EMPID',
width:120,
sorttype:'int',
editable:false,
key:true,
sortable: true,
search:true,
editoptions:{readonly:true}
},
{
name:'EMPName',
index:'EMPName',
width:250,
sortable: true,
align:"left",
editable:true,
size:100,
editrule:{custom:true,custom_func:checkName}
},
{
name:'DOB',
index:'DOB',
width:250,
sortable: true,
align:"left",
size:100,
editable:true,
sorttype:"date",
formatter: "date",
formatoptions: {newformat:'m/d/Y'},
editrule:{custom:true,custom_func:checkName}
,editoptions:
{"dataInit":function(el)
{setTimeout(function(){if(jQuery.ui){
if(jQuery.ui.datepicker)
{
jQuery(el).datepicker({"disabled":false,
"dateFormat":"mm/dd/yy"
,changeMonth: true,
changeYear: true,
recreateForm: true});
jQuery('.ui-datepicker').css({'font-size':'69%'});
}
}},100);}
}
,searchoptions:
{"dataInit":function(el)
{setTimeout(function(){if(jQuery.ui) {
if(jQuery.ui.datepicker)
{
jQuery(el).datepicker({"disabled":false,
"dateFormat":"mm/dd/yy"
,changeMonth: true,
changeYear: true,
recreateForm: true});
jQuery('.ui-datepicker').css({'font-size':'69%'});
}
}},100);}
},
search:true
},
{
name:'Designation',
index:'Designation',
width:250,
align:"left",
editable:true,
size:100,
sortable: true,
formatter:'select',
edittype: 'select',
editoptions: {value:"0:select;1:CEO;2:HR;3:Manager;4:Team Lead;5:Software Engineer; 6:Tester;7:Sales;8:Others"}
,editrule:{custom:true,custom_func:checkDropDown}
,stype:'select',
searchoptions: {
sopt:['eq'],value:":All;1:CEO;2:HR;3:Manager;4:Team Lead;5:Software Engineer;6:Tester;7:Sales;8:Others"
}
},
{
name:'Gender',
index:'Gender',
width:150,
align: 'left',
editable:true,
size:100,
sortable: true,
formatter:'select',
edittype: 'select',
editoptions: {value: "0:select;1:Male;2:Female"},
editrule:{custom:true,custom_func:checkDropDown},
stype:'select',
searchoptions: {
sopt:['eq'],value:":All;1:Male;2:Female"
}
},
{
name:'Status',
index:'Status',
width:150,
align: 'left',
editable:true,
size:100,
sortable: true,
formatter:'select',
edittype: 'select',
editoptions: {value: "0:select;1:Active;2:InActive"}
,editrule:{custom:true,custom_func:checkDropDown},
stype:'select'
,searchoptions: {
sopt:['eq'],value:":All;1:Active;2:InActive"
}
},
{
name:'Remarks',
index:'Remarks',
width:150,
sortable: true,
align:"left",
editable:true,
edittype:"textarea",
editoptions:{rows:'3',cols:'10'},
size:100
},
{
name:'Emptype',
index:'Emptype',
sortable: true,
formatter:'checkbox',
editable:true,
edittype:"checkbox",
stype:'select',
searchoptions: {
sopt:['eq','ne'],value:":All;true:In;false:Out"
}
},
{
name:'action',
index: 'action',
sortable:false,
align:'center',
formatter:"actions",
formatoptions:{key:true},
search:false
}
],
rowNum:10,
rowList:[2,5,10,15],
pager:'#divtest',
viewrecords:true,
width:0.96*screen.width,height:0.42*screen.height,
caption:'jqGrid',
emptyrecords: "No Results Found",
sortable:true,
sortorder: "desc",
search:true,
ignoreCase:true,
loadonce:true,
multiselect: true,
shrinkToFit:true,forceFit:true
,editurl:"Test4.aspx",
onAfterSaveCell:
function reload(result)
{
$("#grid").trigger("reloadGrid");
}
,onSelectRow:
function (id)
{ var tr;
if (id && id !== lastSel)
{
if (typeof lastSel !== "undefined")
{
$("#test").jqGrid('restoreRow', lastSel);
$("#test").trigger("reloadGrid",[{current:true}]);
}
lastSel = id;
}
}
}
).jqGrid('navGrid','#divtest',
{ edit:false,
add:true,
del:false,
search:false
},
//for Edit
{
},
//for Add
{
top:0.20*screen.height,
left:(screen.width-(0.65*screen.width)),
width: 0.35*screen.width,
align:'Center',
resizeable: true,
closeAfterAdd:true,
reloadAfterSubmit:true,
serializeEditData: function(data)
{
return (data);
},
beforeShowForm: function(form)
{
$("#DOB").datepicker
({
changeMonth: true,
recreateForm: true,
changeYear: true
});
}
},
//for Delete
{
},
//for Search
{ multipleSearch: true,
multipleGroup:true,
//showQuery: true,
closeOnEscape: true,
closeAfterSearch: true,
overlay: 0,
beforeShowSearch:function()
{
$("#test")[0].toggleToolbar();
},
onClose: function()
{
$("#test")[0].toggleToolbar();
}
}
).jqGrid('navButtonAdd','#divtest',
{
caption:" ",
width:'15',
buttonicon:"ui-icon-search",
onClickButton: function()
{
$("#test")[0].toggleToolbar();
},
position:"last"
})
//For displaying the blank tool bar on the grid
.jqGrid('filterToolbar',
{
stringResult: true,
searchOnEnter: false,
defaultSearch: "cn"
}
)
.jqGrid('inlineNav',"#pager",{
edit:false,
editicon: "ui-icon-pencil",
add:true,
addicon:"ui-icon-plus",
cancel: true,
cancelicon:"ui-icon-cancel",
save: true,
saveicon:"ui-icon-disk"
}
);
//The Date DTPicker field in the Edit portion.
var initDateEdit =
function(elem)
{
setTimeout(function()
{
$(elem).datepicker(
{
dateFormat: 'mm/dd/yy',
autoSize: true,
//showOn: 'button',
changeYear: true,
changeMonth: true,
showButtonPanel: true,
recreateForm: true,
showWeek: true
});
},100);
}
,
//The Date DTPicker field in the Search portion.
//But not working in this.
initDateSearch =
function(elem)
{
setTimeout(function()
{
$(elem).datepicker(
{
dateFormat: 'mm/dd/yy',
autoSize: true,
//showOn: 'button',
changeYear: true,
changeMonth: true,
showButtonPanel: true,
recreateForm: true,
showWeek: true
});
},100);
}
;
//To hide the check box or select box in the Header of the JQGrid.
var myGrid = $("#test");
$("#cb_"+myGrid[0].id).hide();
var grid = $("#test"),
getColumnIndexByName = function (grid, columnName)
{
var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i++)
{
if (cm[i].name === columnName)
{return i;}
}
return -1;
};
}
);
</script>
Thanks and Regards,
NMB
You just need to add this after your Filter tool bar..
.change(function(){$("#table_ID")[0].toggleToolbar()})