multiple edit and delete buttons on jqGrid reload - asp.net-mvc

Question

i m using jqGrid along with asp.net mvc2... the problem is that i m calling a grid on button click event.. now evertime if i click the button the grid is getting reloaded but the edit and refresh buttons are displayed more than once.. how to solve this problem?
here is the image
function BindGrid() {
if (!firstClick) {
$("#list").trigger("reloadGrid");
}
firstClick = false;
/* Refreshes the grid */
$("#list").jqGrid({
url: '<%= Url.Action("GetScheduleInfo", "TouchSchedule") %>',
datatype: 'json',
mtype: 'GET',
postData: { StartDate: $('#StartDate').val(), EndDate: $('#EndDate').val(),
siteId: $('#ListFacility') ? $('#ListFacility').val() : -1 },
colNames: ['SiteID', 'Cal Date', 'Store Open', 'Start Time', 'End Time',
'MileageLimit AM', 'MileageLimit PM', 'TouchLimit PM',
'TouchLimit AM', 'Total Touches', 'Total Mileage', 'IsWeekend'],
colModel: [
{ name: 'SiteID', index: 'SiteID', width: 40, align: 'left',
/* key: true,*/editable: false, editrules: { edithidden: false },
hidedlg: true, hidden: false },
{ name: 'CalDate', index: 'CalDate', width: 100, align: 'left',
formatter: 'date', datefmt: 'm/d/Y', editable: true, edittype: 'text',
editrules: { required: true, date: true },
formoptions: { elmsuffix: ' *'} },
{ name: 'StoreOpen', index: 'StoreOpen', width: 40, align: 'left',
editable: true, edittype: 'select', formatter: 'select',
editrules: { required: true }, formoptions: { elmsuffix: ' *' },
editoptions: { dataInit: function (elem) {
$(elem).empty()
.append("<option value='1'>o</option>")
.append("<option value='2'>c</option>");
}
} },
{ name: 'StartTime', index: 'StartTime', width: 100, align: 'left',
formatter: 'date', datefmt: 'g:i A', editable: true, edittype: 'text',
editrules: { required: true, date: true },
formoptions: { elmsuffix: ' *'} },
{ name: 'EndTime', index: 'EndTime', width: 100, align: 'left',
formatter: 'date', datefmt: 'g:i A', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitAM', index: 'MileageLimitAM', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitPM', index: 'MileageLimitPM', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitAM', index: 'TouchLimitAM', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitPM', index: 'TouchLimitPM', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalTouches', index: 'TotalTouches', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalMileage', index: 'TotalMileage', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'IsWeekend', index: 'IsWeekend', width: 200,
align: 'left', editable: false, hidden: false}
],
pager: $('#listPager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'CalDate',
sortorder: "desc",
viewrecords: true,
caption: 'Schedule Calendar',
autowidth: true,
afterInsertRow: function (rowid, rowdata) {
if (rowdata.IsWeekend)
$(this).jqGrid('setRowData', rowid, false, { color: 'blue' });
}
}).navGrid('#listPager',
{ edit:true, add:false, del:false, search:false, refresh:true });
}

Answer 1

You should create the grid with $("#list").jqGrid({...}) and add the navigator buttons with navGrid only once. I suppose that your BindGrid function will be called twice in your program, so you have all buttons two times. You can easy verify this adding an additional alert("in BindGrid"); somewhere inside of BindGrid function.
UPDATED: I read your code and here is my suggestion:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$("#StartDate").datepicker({
changeMonth: false,
changeYear: false
});
$("#EndDate").datepicker();
var checkMileageLimit = function(value, colname) {
alert($("#TotalMileage").val());
if (value > $("#TotalMileage").val()) {
alert(false);
return ["false", "value shuld be less"];
} else {
alert(true);
return ["true",""];
}
};
$("#list").jqGrid({
url: '<%= Url.Action("GetScheduleInfo", "TouchSchedule") %>',
datatype: 'json',
mtype: 'GET',
postData: {
StartDate: function() { return $('#StartDate').val(); },
EndDate: function() { return $('#EndDate').val(); },
siteId: function() { return $('#ListFacility') ? $('#ListFacility').val() : -1; }
},
colNames: ['SiteID', 'Cal Date', 'Store Open', 'Start Time', 'End Time',
'MileageLimit AM', 'MileageLimit PM', 'TouchLimit PM',
'TouchLimit AM', 'Total Touches', 'Total Mileage', 'WeekDay'],
colModel: [
{ name: 'SiteID', index: 'SiteID', width: 40, /* key: true,*/editable: false, editrules: { edithidden: false }, hidedlg: true, hidden: false },
{ name: 'CalDate', index: 'CalDate', width: 100, formatter: 'date', datefmt: 'm/d/Y', editable: true, edittype: 'text', editrules: { required: true, date: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'StoreOpen', index: 'StoreOpen', width: 40, editable: true, edittype: 'select', formatter: 'select', editrules: { required: true }, formoptions: { elmsuffix: ' *' }, editoptions: { value: { o: 'Open', c: 'closed'}} },
{ name: 'StartTime', index: 'StartTime', width: 100, editable: true, formatter: 'date', masks: 'ShortTime', edittype: 'text', editrules: { time: true, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'EndTime', index: 'EndTime', width: 100, editable: true, edittype: 'text', editrules: { time: true, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitAM', index: 'MileageLimitAM', width: 50, editable: true,
edittype: 'text', editrules: { custom: true, custom_func: checkMileageLimit,
required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitPM', index: 'MileageLimitPM', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitAM', index: 'TouchLimitAM', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitPM', index: 'TouchLimitPM', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalTouches', index: 'TotalTouches', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalMileage', index: 'TotalMileage', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'WeekDay', index: 'WeekDay', width: 200, editable: false, hidden: false}
],
pager: $('#listPager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'CalDate',
sortorder: "desc",
viewrecords: true,
caption: 'Schedule Calendar',
autowidth: false,
afterInsertRow: function (rowid, rowdata) {
if (rowdata.IsWeekend) {
$(this).jqGrid('setRowData', rowid, false, { color: 'blue' });
}
}
}).navGrid('#listPager',
{ edit: true, add: false, del: false, search: false, refresh: true }
);
$('#btnSubmit').click(function () {
$("#list").trigger("reloadGrid");
});
});
//]]>
</script>
I recommend you to use postData with properties as functions, then at every refresh will be called the function and you can get actual values from the corresponding HTML controls. You can read more about the technique in my old answer. Other small changes you will probably find yourself.
Moreover the statement
$('#ListFacility') ? $('#ListFacility').val() : -1;
seems incorrect for me because $('#ListFacility') will be always an object. Because you don't post and HTML code I could not fix it. You should do this yourself.
Moreover it can be that you will have better performance in your grid if you will use gridview:true and set the color inside of loadComplete function instead of the usage of afterInsertRow function. See this old answer as an example and description of the gridview option.

Answer 2

Thanks for your answer... it worked i have placed an if else in the button click to check if its a first click or subsequent clicks and then it worked... but when i call reloadgrid i still see the same old parmaeters are passed to the controller.. ther are textboxes and dropdowns whose values changes and then i click the submit button which reloads the grid.. i m using postData parameter to pass additional values to the controller
<script type="text/javascript">
var firstClick = true;
$(document).ready(function () {
$("#StartDate").datepicker({
changeMonth: false,
changeYear: false
});
$("#EndDate").datepicker();
var updateDialog = {
url: '<%= Url.Action("UpdateGrid", "TouchSchedule") %>'
, closeAfterAdd: true
, closeAfterEdit: true
};
$('#btnSubmit').click(function () {
$("#list").clearGridData();
if (!firstClick) {
alert($('#ListFacility').val());
$("#list").trigger("reloadGrid");
}
else {
firstClick = false;
/* Refreshes the grid */
$("#list").jqGrid({
url: '<%= Url.Action("GetScheduleInfo", "TouchSchedule") %>',
datatype: 'json',
mtype: 'GET',
postData: { StartDate: $('#StartDate').val(), EndDate: $('#EndDate').val(), siteId: $('#ListFacility') ? $('#ListFacility').val() : -1 },
colNames: ['SiteID', 'Cal Date', 'Store Open', 'Start Time', 'End Time', 'MileageLimit AM', 'MileageLimit PM', 'TouchLimit PM', 'TouchLimit AM', 'Total Touches', 'Total Mileage', 'WeekDay'],
colModel: [
{ name: 'SiteID', index: 'SiteID', width: 40, align: 'left', /* key: true,*/editable: false, editrules: { edithidden: false }, hidedlg: true, hidden: false },
{ name: 'CalDate', index: 'CalDate', width: 100, align: 'left', formatter: 'date', datefmt: 'm/d/Y', editable: true, edittype: 'text', editrules: { required: true, date: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'StoreOpen', index: 'StoreOpen', width: 40, align: 'left', editable: true, edittype: 'select', formatter: 'select', editrules: { required: true }, formoptions: { elmsuffix: ' *' }, editoptions: { value: { o: 'Open', c: 'closed'}} },
{ name: 'StartTime', index: 'StartTime', width: 100, align: 'left', editable: true, formatter: 'date', masks: 'ShortTime', edittype: 'text', editrules: { time: true, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'EndTime', index: 'EndTime', width: 100, align: 'left', editable: true, edittype: 'text', editrules: { time: true, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitAM', index: 'MileageLimitAM', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { custom: true, custom_func: CheckMileageLimit, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitPM', index: 'MileageLimitPM', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitAM', index: 'TouchLimitAM', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitPM', index: 'TouchLimitPM', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalTouches', index: 'TotalTouches', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalMileage', index: 'TotalMileage', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'WeekDay', index: 'WeekDay', width: 200, align: 'left', editable: false, hidden: false}],
pager: $('#listPager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'CalDate',
sortorder: "desc",
viewrecords: true,
caption: 'Schedule Calendar',
autowidth: false,
afterInsertRow: function (rowid, rowdata) {
if (rowdata.IsWeekend)
$(this).jqGrid('setRowData', rowid, false, { color: 'blue' });
}
}).navGrid('#listPager',
{
edit: true, add: false, del: false, search: false, refresh: true
}
);
}
});
});
function CheckMileageLimit(value, colname)
{
alert($("#TotalMileage").val());
if (value > $("#TotalMileage").val())
{
alert(false);
return ["false", "value shuld be less"];
}
else
{
alert(true);
return ["true",""];}
}
</script>