multiple edit and delete buttons on jqGrid reload

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 alt text

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 });

}

score 1 · Accepted Answer · edited May 23 '17 at 12:19

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.

yes ... this is being called everytime we click the button.. is there any better way to load the grid on click of a button or any way to avoid the navgrid being rendered twice? — Rakesh, Nov 09 '10 at 12:53
@Rakesh: you should create jqGrid one time (on the same place where you define $("#list").jqGrid({...}).jqGrid('navGrid', ...); $("#yourButton").bind('click', function() {/**/));). Inside of click event handle you should call only `$("#list").trigger("reloadGrid");` and nothing more. If the description not help you to fix the problem you should append your question with more full JavaScript code, then I'll modify it and pasted fixed code in my answer. — Oleg, Nov 09 '10 at 13:28
Thank you very very very much... i m quiet new to jquery and asp.net mvc ... and your help is brilliant...thank you again... everything works fine... now i m only struggling with custom validations..hope to overcome that problem too :) — Rakesh, Nov 10 '10 at 08:18

score 0 · Answer 2 · answered Nov 09 '10 at 13:59

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>

multiple edit and delete buttons on jqGrid reload

2 Answers2