Question

Im using jqgrid wherein i need to pass addtional data to the controller while editing… but i m not able to do so… here is my code below..

 <script type="text/javascript">

//

        var checkMileageLimit = function (value, colname) {

            var clName = (colname == 'MileageLimitPM' ? 'MileageLimitAM' : 'MileageLimitPM');

            if (parseInt(value) + parseInt($('#' + clName).val()) > parseInt($("#TotalMileage").val())) {
                return [false, "sum of AM and PM mileage should not  exceed Total Mileage", ""];
            }
            else return [true, "", ""];
        };

        var checkTouchLimit = function (value, colname) {

            var clName = (colname == 'TouchLimitPM' ? 'TouchLimitAM' : 'TouchLimitPM');

            if (parseInt(value) + parseInt($('#' + clName).val()) > parseInt($("#TotalTouches").val())) {
                return [false, "sum of AM and PM Touches should not  exceed Total Touches", ""];
            }
            else return [true, "", ""];
        };

        var lastsel;
        $("#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').length == 0 ? -1 : $('#ListFacility').val(); }
            },
            colNames: ['RowID', 'SiteID', 'CalDate', 'Store Open', 'Start Time', 'End Time',
                   'MileageLimit AM', 'MileageLimit PM', 'TouchLimit PM',
                   'TouchLimit AM', 'Total Touches', 'Total Mileage', 'WeekDay'],
            colModel: [
            { name: 'RowID', index: 'RowID', width: 40, key: true, editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
            { name: 'SiteID', index: 'SiteID', width: 40, /* key: true,*/editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
            { name: 'CalDate', index: 'CalDate', width: 100, formatter: 'date', datefmt: 'm/d/Y', editable: false, 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'} }, width: "40" },
            { 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, formatter: 'integer',
                edittype: 'text', editrules: { custom: true, custom_func: checkMileageLimit,
                    required: true
                }, formoptions: { elmsuffix: ' *' }
            },
            { name: 'MileageLimitPM', index: 'MileageLimitPM', width: 50, editable: true, edittype: 'text', formatter: 'integer', editrules: { custom: true, custom_func: checkMileageLimit, required: true }, formoptions: { elmsuffix: ' *'} },
            { name: 'TouchLimitAM', index: 'TouchLimitAM', width: 50, editable: true, edittype: 'text', formatter: 'integer', editrules: { custom: true, custom_func: checkTouchLimit, required: true }, formoptions: { elmsuffix: ' *'} },
            { name: 'TouchLimitPM', index: 'TouchLimitPM', width: 50, editable: true, edittype: 'text', formatter: 'integer', editrules: { custom: true, custom_func: checkTouchLimit, 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,
            gridview: true,
            id: "RowID",    

            ondblClickRow: function (id) {

                if (id && id !== lastsel) {
                    jQuery('#list').jqGrid('restoreRow', lastsel);
                    jQuery('#list').jqGrid('editGridRow', id,{ onclickSubmit});
                    lastsel = id;
                }

            }
          , editurl: '<%= Url.Action("UpdateGrid", "TouchSchedule") %>'

        }).navGrid('#listPager',
               { edit: true, add: false, del: false, search: false, refresh: true },
                 {width:400,height:400,closeAfterEdit:true,
                onclickSubmit:function(params) {   var ajaxData = {};

                var list = $("#list");
                var selectedRow = list.getGridParam("selrow");
                rowData = list.getRowData(selectedRow);
                ajaxData = { CalDate: rowData.CalDate };

                return ajaxData; }}

    );

        $('#btnSubmit').click(function () {
            $("#list").clearGridData();
            $("#list").trigger("reloadGrid");

        });
    });

//]]>

Please let me know where i m going wrong… also i have observed that if i use inline editing then the custom validation is not being fired? how to solve this problem via inline editing?

thanks in advance…

Answer 1

First of all you don’t use inline editing at all in your code. You use editGridRow and in a wrong way:

jQuery('#list').jqGrid('editGridRow', id,{ onclickSubmit});

instead of the usage of editRow used in the inline editing mode.

You should at least set a value for the onclickSubmit event handle:

jQuery('#list').jqGrid('editGridRow', id,
                       { onclickSubmit : function(params, posdata) {
                                             alert ("in onclickSubmit");
                                             // ...
                                         }
                       });

Moreover you try to use validation based not on the value parameter which you receive as a parameter of the custom validation function. You try to read another text fields. You should understand, that it is not the best way. Moreover in case of inline editing the text fields will nave the ids not like the corresponding names of the columns. So the usage of $("#TotalMileage") will be OK for the form editing, but it should be $("#"+rowid+"_TotalMileage") in case of inline editing.

You can consider to use beforeCheckValues function additionally which will get use all fields of the data which will be posted. The function will be called before verifying of every field of the form. In case of inline editing this is not possible, so you will have to detect in any way the mode which you use (for example you can set a variable which define the current manually) and use the corresponding name conversion of the field ids. Another way is the usage of dataEvents with for example 'change' event handler.

To send additional data in case of form editing you can use editData, return the object with the additional data from onclickSubmit or you custom serializeEditData function. You can also modify the url used during data posting inside of the onclickSubmit function.

To send additional data in inline editing mode you can use extraparam parameter of the editRow or use inlineData parameter of the jqGrid.

One more remark at the end. You should start to use voting up of your answers and accepting the answers. At least you have comment another answer and post additional information needed to answer on your questions. For example some time ago you asked already almost the same question and I asked you to post HTML code. Many other your questions stay uncommented and it is not clear whether you at least read there. It so will be continued you will be receive less or no answers at all.