jQuery UI Widgets Forums Grid Server side editing

This topic contains 3 replies, has 2 voices, and was last updated by  azmat10 9 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Server side editing #72319

    azmat10
    Participant

    Hello,

    I’ve started using JQXGrid and I’m stuck when doing server side editing.

    My requirements are:
    1. Edit row/cell
    2. After edit, the data is updated in the database after going through the asp.net web method for update.

    When doing the update, I’m stuck with an error message ‘Invalid Character’.

    Any help on the above issue.

    My code is as follows:

    <script type=”text/javascript”>
    $(document).ready(function () {
    // Prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘id’, type: ‘string’},
    { name: ‘name’, type: ‘string’},
    { name: ‘serverName’, type: ‘string’},
    { name: ‘databaseName’, type: ‘string’}
    ],
    url: ‘Default.aspx/GetCustomers’,
    cache: false,
    root: ‘data’,
    //record: ‘Table’,
    id: ‘id’,

    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server – send update command

    var data = “update=true&name=” + rowdata.name + “&serverName=” + rowdata.serverName + “&databaseName=” + rowdata.databaseName;
    data = data + “&id=” + rowdata.id;
    alert(‘Data:’ + data);
    $.ajax({
    dataType: ‘json’,
    url: ‘Default.aspx/Update’,
    type: ‘POST’,
    data: data,
    success: function (data, status, xhr) {
    // update command is executed.
    alert(‘Update OK’);
    commit(true);
    },
    error: function (jqXHR, textStatus, errorThrown) {
    alert(‘Error here:’ + jqXHR + ‘ and ‘ + textStatus + ‘ and ‘ + errorThrown);
    commit(false);
    }
    });
    }
    };

    var dataAdapter = new $.jqx.dataAdapter(source,
    {
    contentType: ‘application/json; charset=utf-8’,
    downloadComplete: function(data, textStatus, jqXHR)
    {
    return data.d;
    },
    loadError: function (jqXHR, status, error) {
    alert(‘DataAdapter:’ + error);
    }
    }
    );

    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    source: dataAdapter,
    editable: true,
    pageable: true,
    columns: [
    { text: ‘Customer Name’, dataField: ‘name’, width: 250 },
    { text: ‘Server Name’, dataField: ‘serverName’, width: 200 },
    { text: ‘Database Name’, dataField: ‘databaseName’, width: 200 }
    ]
    });
    </script>

    Server side editing #72325

    Dimitar
    Participant

    Hello azmat10,

    I am not sure where the issue originates, but it seems you have missed the closing }); of $(document).ready(). You can also check out our CRUD with jqxGrid, ASP.NET MVC3 and SQL help topic.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Server side editing #72328

    azmat10
    Participant

    Hello Dimitar,

    I’ve found the issue. I’ve changed the datatype to text which now triggers the following code:

    success: function (data, status, xhr) {
    // update command is executed.
    alert(‘Update OK’);
    commit(true);
    }

    My issue now is that the web method Update() is not being called as it should to perform the update in the database.

    Any help on this one.

    Regards
    Azmat

    Server side editing #72336

    azmat10
    Participant

    Dimitar,

    I’ve been able to resolve the issue.

    1. The AJAX call need to pass the data in the correct format.
    2. Parameters of the web method should be passed correctly from the JavaScript code.

    Regards
    Azmat

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.