i'm starter in jqgrid. i write this code for load jqgrid data and create some icon Button for show custom panel papup for insert and update.
$(function () {
$("#txtFullName").autocomplete({
source: function (request, response) {
$.ajax({
url: "AutoCompleteHandler.ashx",
dataType: "json",
data: {
term: request.term,
Person: 1
},
contentType: "application/json",
converters: {
"json json": function (msg) {
return msg.hasOwnProperty('d') ? msg.d : msg;
}
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Label,
value: item.Value,
id: item.Id
}
}));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 1,
change: function (event, ui) { $("#PersonId").val(ui.item.id); }
});
var grid = $('#list');
grid.jqGrid({
url: 'jQGridHandler.ashx',
editurl: 'jQGridHandler.ashx',
postData: { ActionPage: 'SecurityUser', Action: 'Fill' },
ajaxGridOptions: { cache: false },
loadonce: true,
direction: "rtl",
pgtext: "صفحه {0} از {1}",
datatype: 'json',
height: 490,
colNames: ['کد کاربری', 'شماره پرسنلی', 'مدیر؟', 'نام کاربری ', 'رمز عبور', 'قفل؟', 'تاریخ ایجاد', ],
colModel: [
{ name: 'USER_ID', width: 100, sortable: true, hidden: true },
{ name: 'PERSON_ID', width: 200, sortable: true },
{ name: 'USER_TYPE', width: 100, sortable: true, editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", formatoptions: { disabled: false} },
{ name: 'USER_NAME', width: 100, sortable: true },
{ name: 'USER_PASSWORD', width: 100, sortable: true },
{ name: 'USER_LOCK', width: 50, sortable: true, editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", formatoptions: { disabled: false} },
{ name: 'CREATE_DATE', width: 30, sortable: true, hidden: true },
],
gridview: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
sortname: 'USER_ID',
viewrecords: true,
sortorder: 'ASC',
caption: 'درخواست ها......',
rownumbers: true
});
grid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: true }, {}, {},
{ url: "JQGridHandler.ashx?ActionPage=SecurityUser&Action=Delete", reloadAfterSubmit: false }, { multipleSearch: true, overlay: false, width: 460 })
.navButtonAdd("#pager", {
caption: "",
buttonicon: "ui-icon-plus",
onClickButton: function () {
$("#PersonId").val('');
$("#chkAdmin").attr("checked", 'false');
$("#txtUserName").val('');
$("#txtPassword").val('');
$("#chkActive").attr("checked", 'false');
$("#hdnUserId").val('');
$("#btnUpdate").css("display", 'none');
$("#btnAdd").css("display", 'inline');
$("#POPUP1").dialog({ width: 730 });
},
position: "first"
})
.navButtonAdd("#pager", {
caption: "",
buttonicon: "ui-icon ui-icon-pencil",
onClickButton: function () {
$("#PersonId").val('');
$("#chkAdmin").attr("checked", 'false');
$("#txtUserName").val('');
$("#txtPassword").val('');
$("#chkActive").attr("checked", 'false');
$("#hdnUserId").val('');
var myGrid = grid;
var selRowId = myGrid.jqGrid('getGridParam', 'selrow');
$("#PersonId").val(myGrid.jqGrid('getCell', selRowId, 'PERSON_ID'));
$("#chkAdmin").attr("checked", myGrid.jqGrid('getCell', selRowId, 'USER_TYPE'));
$("#txtUserName").val(myGrid.jqGrid('getCell', selRowId, 'USER_NAME'));
$("#txtPassword").val(myGrid.jqGrid('getCell', selRowId, 'USER_PASSWORD'));
$("#chkActive").attr("checked", myGrid.jqGrid('getCell', selRowId, 'USER_LOCK'));
$("#btnAdd").css("display", 'none');
$("#btnUpdate").css("display", 'inline');
$("#hdnUserId").val(myGrid.jqGrid('getCell', selRowId, 'USER_ID'));
$("#POPUP").dialog({ width: 400 });
},
position: "first"
});
function add() {
$.ajax({
url: 'JQGridHandler.ashx',
contentType: "application/json; charset=utf-8",
data: { PERSON_ID: $("#PersonId").val(), USER_TYPE: $("#chkAdmin").is(":checked"),
USER_NAME: $("#txtUserName").val(), USER_PASSWORD: $("#txtPassword").val(),
USER_LOCK: $("#chkActive").is(":checked"), ActionPage: 'SecurityUser', Action: 'Insert'
},
dataType: "json",
success: function (data) {
$("#list").trigger("reloadGrid", [{ current: true}]); ??????
}
});
}
function update() {
$.ajax({
url: 'JQGridHandler.ashx',
contentType: "application/json; charset=utf-8",
data: { USER_ID: $("#hdnUserId").val(), PERSON_ID: $("#PersonId").val(), USER_TYPE: $("#chkAdmin").is(":checked"),
USER_NAME: $("#txtUserName").val(), USER_PASSWORD: $("#txtPassword").val(),
USER_LOCK: $("#chkActive").is(":checked"), ActionPage: 'SecurityUser', Action: 'Update'
},
dataType: "json",
success: function (data) { }
});
}
$("#btnAdd").click(function () {
add();
//$("#list").jqGrid("reloadGrid");
});
$("#btnUpdate").click(function () {
update();
});
});
and html form For create jqGrid and popup panel
<div>
<table id="list">
</table>
<div id="pager">
</div>
<div id="POPUP" dir="rtl">
<table width="100%" class="tbl">
<tr>
<td>
FullName
</td>
<td>
<input type="text" id="txtFullName" />
</td>
</tr>
<tr>
<td>
PersonId
</td>
<td>
<input type="text" id="PersonId" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" id="chkAdmin" />IsAdmin?
</td>
</tr>
<tr>
<td>
UserName
</td>
<td>
<input type="text" id="txtUserName" />
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type="password" id="txtPassword" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" id="chkActive" checked="checked" />IsActive
</td>
</tr>
<tr>
<td colspan="2">
<input id="btnAdd" type="button" value="Add" />
<input id="btnUpdate" type="button" value="Edit" />
<br />
<input id="hdnUserId" type="hidden" />
</td>
</tr>
</table>
</div>
</div>
i want when user click in btnAdd and record insert in database jqGrid data reload(I want refresh jqGrid data). but i get 2 errors
Error: no element found
Source File: http://localhost:1041/Clerance_New/JQGridHandler.ashx?PERSON_ID=1001&USER_TYPE=false&USER_NAME=tttt&USER_PASSWORD=tttt&USER_LOCK=true&ActionPage=SecurityUser&Action=Insert
Line: 1
and
Error: uncaught exception: jqGrid - No such method: reloadGrid
and for reload in ?????? line not run server side code in handler, I do not know why.
please help me. thanks all
