editURL not being called - JQGrid

Question

I have an editable jqGrid, inline editing with events, but the EditURL is not being called.

Edit data is a web method in vb.net. When I click on a row the row becomes editable and I am able to make changes but when I hit enter the EditURL is not being called. Please suggest any changes necessary.

<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
<WebMethod()> _
Public Shared Function LoadData() As jqGridResult

    'If MuList.SelectedValue <> "0" AndAlso MuList.SelectedValue <> String.Empty Then
    '    hirNodeMu = hirNodeMu.Parse(MuList.SelectedValue)
    'Else
    '    hirNodeMu = 0
    'End If

    'Dim hirNode As Integer = hirNodeMu
    'If hirNode = 0 Then
    '    hirNode = hirNodeCurrent
    'End If

    Dim sidx As String = ""
    Dim sord As String = "asc"
    Dim page As Integer = 1
    Dim rows As Integer = 1000

    Dim entryFieldsOnly As Integer = 1

    Dim hirNode As Integer = 5
    Dim fiscalYear As Integer = 2012
    Dim fiscalPeriod As Integer = 3

    Dim dtWORData As DataTable = New DataTable()

    Dim ConnectString As String = ConfigurationSettings.AppSettings("DbConnection")

    Using sqlConnection As New SqlConnection(ConnectString)

        Dim Conn As SqlConnection = New SqlConnection(ConnectString)
        Dim Cmd As SqlCommand = New SqlCommand("finWorFactView", Conn)
        Cmd.CommandType = CommandType.StoredProcedure
        Cmd.Parameters.Add("@hirNodeBase", SqlDbType.Int, 4).Value = hirNode
        Cmd.Parameters.Add("@FiscalYear", SqlDbType.Int, 4).Value = fiscalYear
        Cmd.Parameters.Add("@FiscalPeriod", SqlDbType.Int, 4).Value = fiscalPeriod
        Cmd.Parameters.Add("@EntryFieldsOnly", SqlDbType.Int, 4).Value = entryFieldsOnly
        Conn.Open()

        Dim DA As SqlDataAdapter = New SqlDataAdapter(Cmd)

        DA.Fill(dtWORData)

    End Using

    Dim pageIndex As Integer = page
    Dim pageSize As Integer = rows
    Dim startRow As Integer = (pageIndex * pageSize) + 1
    Dim totalRecords As Integer = dtWORData.Rows.Count()
    Dim totalPages As Integer = CInt(Math.Ceiling(CSng(totalRecords) / CSng(pageSize)))

    Dim row As List(Of jqGridRows) = New List(Of jqGridRows)

    For i As Integer = 0 To dtWORData.Rows.Count - 1

        Dim newRow As jqGridRows = New jqGridRows

        newRow.id = Convert.ToInt32(dtWORData.Rows(i)("DisplayOrder"))

        newRow.cell(0) = dtWORData.Rows(i)("DisplayOrder").ToString()
        newRow.cell(1) = dtWORData.Rows(i)("ColumnPosition").ToString()
        newRow.cell(2) = dtWORData.Rows(i)("ColumnName").ToString()
        newRow.cell(3) = dtWORData.Rows(i)("Week1").ToString()
        newRow.cell(4) = dtWORData.Rows(i)("Week2").ToString()
        newRow.cell(5) = dtWORData.Rows(i)("Week3").ToString()
        newRow.cell(6) = dtWORData.Rows(i)("Week4").ToString()
        newRow.cell(7) = dtWORData.Rows(i)("Week5").ToString()
        newRow.cell(8) = dtWORData.Rows(i)("DbFieldName").ToString()
        newRow.cell(9) = dtWORData.Rows(i)("Updateable").ToString()
        newRow.cell(10) = dtWORData.Rows(i)("PayrollActive").ToString()
        newRow.cell(11) = dtWORData.Rows(i)("PurchasingActive").ToString()
        newRow.cell(12) = dtWORData.Rows(i)("hirNode").ToString()
        newRow.cell(13) = dtWORData.Rows(i)("finWor1").ToString()
        newRow.cell(14) = dtWORData.Rows(i)("finWor2").ToString()
        newRow.cell(15) = dtWORData.Rows(i)("finWor3").ToString()
        newRow.cell(16) = dtWORData.Rows(i)("finWor4").ToString()
        newRow.cell(17) = dtWORData.Rows(i)("finWor5").ToString()
        newRow.cell(18) = dtWORData.Rows(i)("finWorP").ToString()
        newRow.cell(19) = dtWORData.Rows(i)("Total").ToString()
        newRow.cell(20) = dtWORData.Rows(i)("Projection").ToString()
        newRow.cell(21) = dtWORData.Rows(i)("HealthCareActive").ToString()

        row.Add(newRow)
    Next

    Dim result As jqGridResult = New jqGridResult

    result.total = totalPages
    result.page = page
    result.records = totalRecords
    result.rows = row

    Return result

End Function

<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
<WebMethod()> _
Public Shared Function EditData(ByVal Week1 As String, ByVal Week2 As String, ByVal Week3 As String, ByVal Week4 As String, _
                                ByVal Week5 As String, ByVal Projection As String, _
                                ByVal DbFieldName As String, ByVal hirNode As String, _
                                ByVal FinWor1 As String, ByVal FinWor2 As String, ByVal FinWor3 As String, ByVal FinWor4 As String, _
                                ByVal FinWor5 As String, ByVal FinWorP As String, ByVal HealthCareActive As String, _
                                ByVal oper As String, ByVal id As String) As Boolean

    Dim objClass As New _Default
    objClass.LogError(Week1 + " " + Week2 + " " + Week3 + " " + Week4 + " " + Week5 + " " + Projection)

    Return True

End Function

This is from firebug - the request body Week1=+767%2C077+&Week2=+727%2C055+&Week3=+719%2C411+&Week4=+738%2C102+&Week5=+290%2C921+&Projection=False&DbFieldName=False&hirNode=&FinWor1=&FinWor2=&FinWor3=&FinWor4=&FinWor5=+3%2C242%2C566+&FinWorP=+2%2C869%2C267+&HealthCareActive=False&oper=edit&id=14

Js Code

jQuery(document).ready(function($) {

var lastsel;

$(document).ready(function() {


    loadGrid();
});

function loadGrid() {
    jQuery("#tblWOR").jqGrid({
        url: 'Default.aspx/LoadData',
        mtype: 'POST',
        datatype: 'json',
        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
        serializeGridData: function(postData) {
            return JSON.stringify(postData);
        },
        rowNum: 1000,
        width: 1200,
        height: 'auto',
        colNames: ['Display Order', 'Column P', 'Column N', 'Week1(1-7)', 'Week2(8-14)', 'Week2(15-21)', 'Week1(22-28)', 'Week1(29-31)',
                    'Total Month' + '</br>' + 'to Date', 'Projection' + '</br>' + 'for Month',
                    'DbFieldName', 'Updateable', 'PayrollActive', 'PurchasingActive', 'hirNode',
                    'WOR1', 'WOR2', 'WOR3', 'WOR4', 'WOR5', 'WORP', 'HealthCareActive',
                ],
        colModel: [
                { name: 'DisplayOrder', index: 'DisplayOrder', hidden: true },
                { name: 'ColumnPosition', index: 'Week1', width: 55 },
                { name: 'ColumnName', index: 'Week1', width: 80 },
                { name: 'Week1', index: 'Week1', width: 55, editable: true, edittype: 'text' },
                { name: 'Week2', index: 'Week2', width: 55, editable: false, edittype: 'text' },
                { name: 'Week3', index: 'Week3', width: 55, editable: false, edittype: 'text' },
                { name: 'Week4', index: 'Week4', width: 55, editable: false, edittype: 'text' },
                { name: 'Week5', index: 'Week5', width: 55, editable: false, edittype: 'text' },
                { name: 'Total', index: 'Total', width: 55 },
                { name: 'Projection', index: 'Projection', width: 55, editable: false, edittype: 'text' },
                { name: 'DbFieldName', index: 'DbFieldName', editable: false, hidden: true },
                { name: 'Updateable', index: 'Updateable', editable: false, hidden: true },
                { name: 'PayrollActive', index: 'PayrollActive', editable: false, hidden: true },
                { name: 'PurchasingActive', index: 'PurchasingActive', editable: false, hidden: true },
                { name: 'hirNode', index: 'hirNode', editable: false, hidden: true },
                { name: 'FinWor1', index: 'FinWor1', editable: false, hidden: true },
                { name: 'FinWor2', index: 'FinWor2', editable: false, hidden: true },
                { name: 'FinWor3', index: 'FinWor3', editable: false, hidden: true },
                { name: 'FinWor4', index: 'FinWor4', editable: false, hidden: true },
                { name: 'FinWor5', index: 'FinWor5', editable: false, hidden: true },
                { name: 'FinWorP', index: 'FinWorP', editable: false, hidden: true },
                { name: 'HealthCareActive', index: 'HealthCareActive', editable: false, hidden: true }
                ],
        pager: '#divWOR',
        jsonReader: {
            root: "d.rows",
            page: "d.page",
            total: "d.total",
            records: "d.records",
            repeatitems: false
        },
        sortname: 'DisplayOrder',
        viewrecords: true,
        sortorder: "asc",
        onSelectRow: function(DisplayOrder) {
            if (DisplayOrder && DisplayOrder !== lastsel) {
                jQuery('#tblWOR').jqGrid('restoreRow', lastsel);
                jQuery('#tblWOR').jqGrid('editRow', DisplayOrder, true);
                lastsel = DisplayOrder;
            }
        },
        cellsubmit: 'remote',
        editurl: "Default.aspx/EditData",
        caption: "WOR View Grid"           
    });
    jQuery("#tblWOR").jqGrid('navGrid', "#divWOR", { edit: false, add: false, del: false });
}

});

I am able to debug my code. The data is being returned by the web method but not being displayed in the grid.

This is the data I am getting.. (I am showing just one row since the data was big)

{"d":{"__type":"LearnEveryday._Default+jqGridResult","total":1,"page":1,"records":25,"rows":[{"id":3,"cell":["3","2","JWO Revenue"," 921,300 "," 899,595 "," 912,983 "," 941,659 "," 805,100 ","RevenueJwo","False","False","False","0","","","","","",""," 4,480,637 "," 5,378,594 ","False",null]}}

There are many small errors in the code which you posted. The usage of `datatype` as function is also very bad and your server code have sure errors too (see [the answer](http://stackoverflow.com/a/11222278/315935) for additional information). To your main question: you wrote "the EditURL is not being called". How you verified it? Do you used Fiddler, Firebug, Developer Tools of IE or other tools to catch HTTP traffic? Could you see no call on saving of row of you just set breakpoint in the method "Default.aspx/EditData"? What is signature (which parameters) of the `EditData` method? — Oleg, Apr 01 '13 at 11:04
If you would have problems with localizing of the errors you can append your question with the code of `LoadData` and `EditData` from `Default.aspx`. — Oleg, Apr 01 '13 at 11:44
Hi, I was checking with the breakpoint. I just checked in Firebug and its being called. When I was working with LoadData I was able to debug vb code so I was thinking its going to hit the breakpoint this time too. — Arshya, Apr 01 '13 at 13:42
If you define `EditData` correctly then `EditData` would be called and you would be able to see breakpoint hitting. So I think, that the error is in *the server code* which you didn't posted. — Oleg, Apr 01 '13 at 13:52
I find wrong to use `ByVal data As Object` as parameter. Look at [the answer](http://stackoverflow.com/a/3918615/315935) for example. If you should use parameters with the same names like all `editable` columns in `colModel`. I believe that it's not the only way, but the way works definitively. Another problem: you don't posted code of `LoadData`. I think that you use unneeded JSON serialization inside. Only because of the error you need use `jQuery.parseJSON(data.d)` in your client code. Call of `jQuery.parseJSON` should be unneeded. — Oleg, Apr 01 '13 at 14:54
I reduced my grid to one editable column Week1 and changed the edit function to `code` _ Public Shared Function EditData(ByVal Week1 As String, ByVal oper As String, ByVal id As String) As Boolean `code` but its still not hitting the breakpoint — Arshya, Apr 01 '13 at 16:04
Probably you have some common problems in the configuration (`web.config`). Probably you should just add `` attribute. In general I would write the most part of code in another way. For example I would save the code in page with ASMX extension (Default.asmx/LoadData). By the way `LoadData` should return `jqGridResult` instead of string. ASP.NET will convert the object to JSON of XML **automatically**. After you replace the last lines of the code to `Return result` you need modify client code and replace `jQuery.parseJSON(data.d);` to `data.d`. — Oleg, Apr 01 '13 at 17:40
Hi Oleg, I made all the changed u suggested but data is not being displayed in grid.. I think something wrong with the way I wroe jsonReader. Please take a look — Arshya, Apr 02 '13 at 11:38
You should remove `repeatitems: false` from `jsonReader`. I recommend you add additionally `gridview: true` option to improve performance. You should also remove `$(document).ready(function() {` handler which inside of `$(document).ready(function() {` handler. You can replace `jQuery('#tblWOR')` to `$(this)` inside of callbacks (`onSelectRow` for example) — Oleg, Apr 02 '13 at 11:59
The data is showing now. I am going to make other changes u suggested and proceed to edit code. Will update the post once the update code is working. I really appreciate your help. Thank you! — Arshya, Apr 02 '13 at 12:25
You are welcome! If would be good if you modify your question one more time and include both initial code of client and server parts and the modified code. The main goal of stackoverflow is *sharing common problems and the solution of the problems*. So to help other visitors of the page we can prepare the results in the form. I will add my suggestions with comments in my answer (the problem is that comments to the question/answer will be not indexed by searching engine so one should post important information in the text of questions and answers to help other). — Oleg, Apr 02 '13 at 12:48
Hi Oleg, I included the edit function and request parameters. The server side code is still not executing nor am I ale to debug it. — Arshya, Apr 03 '13 at 10:02
One more small remark: you have right to vote 30 answers or questions **per day** (see [here](http://meta.stackexchange.com/a/5213/147495)). You are member on stackoverflow since 2 years, 11 months and have used the right only 22 times. Voting is *very important*. It helps other visitors to find information on the stackoverflow because searching engine use voting count as the main criteria for searching *helpful* information. So **if you want help other users to find information you should use your voting right and mark *all information on stackoverflow which you find helpful***. — Oleg, Apr 03 '13 at 11:53

Oleg · Accepted Answer · 2013-04-03T10:23:17.633

You need add serializeRowData callback in the same way like you added serializeGridData. In the same way you need add ajaxRowOptions which looks like ajaxGridOptions. The options defines option of $.ajax executed during editing of rows:

ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
ajaxRowOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
    return JSON.stringify(postData);
},
serializeRowData: function (postData) {
    return JSON.stringify(postData);
}

You should remove unneeded second $(document).ready(function() handler registered inside of $(document).ready. I mean that the code

jQuery(document).ready(function($) {

    var lastsel;

    $(document).ready(function() {
        loadGrid();
    });

    function loadGrid() {
        jQuery("#tblWOR").jqGrid({
            ...
        });
        jQuery("#tblWOR").jqGrid('navGrid', "#divWOR", { edit: false, add: false, del: false });
    }
});

should be replaced to

jQuery(document).ready(function($) {
    var lastsel;
    $("#tblWOR").jqGrid({
        ...
    }).jqGrid('navGrid', "#divWOR", { edit: false, add: false, del: false });
});

I removed loadGrid function additionally, because the function create the grid. The function could be called only once. Which sense is to define some code in a function if the function could be called only once?

Its working!!!! Thank you so much.. I will edit my post to include both old and new code — Arshya, Apr 03 '13 at 10:59
@Arshya: The option `cellsubmit: 'remote'` are used only in case of usage cell editing. You use inline editing. So you can remove the option. I am wonder also *why you have so many hidden columns* in the grid. It seems me unneeded. Typically one need have only `id` of the row. All other information exists already on the server. One don't need sent the information to client and back. Isn't so? — Oleg, Apr 03 '13 at 11:20

editURL not being called - JQGrid

1 Answers1