jQuery UI Widgets Forums Grid Virtual Grid with asp.net mvc with sort doesn´t work

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • rubenfernande3
    Participant

    (sorry for my english).
    I´m testing the library with asp.net mvc (framework 4.5) tecnology.
    I have found a problem when i have to use a grid with virtual mode true and sort enabled.
    I have a delete button in renderbarstatus and when i click it i call to $(“#jqxgrid”).jqxGrid(‘deleterow’, rowid);

    In the call back of the deleterow after deleting the data in the data base i make a commit(true) for refreshing the grid.

    Everything works ok if i dont sort previosly any column. When i sort a column, and then i delete when i commit(true) i receive an exception from jqxgrid.js althought i see the server side is giving me json data perfectly.

    For resolving this, i´m using the $(‘#jqxgrid’).jqxGrid(‘updatebounddata’); to update the grid after the row deleting. In server side with updatebounddata i dont receive the pagenumber updated when i delete the last element of the page so i have to calculate the page number with this:
    if (total <= (pagesize * pagenum))
    {
    pagenum = pagenum – 1;
    }

    This is the code of the client side:
    @section scripts {
    <script type=”text/javascript”>
    $(document).ready(function () {
    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields:
    [{ name: ‘id’, type: ‘int’ },
    { name: ‘productoDescripcion’, type: ‘string’ }
    ],
    url: ‘/Productoes/GetDatos’,
    // update the grid and send a request to the server.
    filter: function () {
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
    },
    // update the grid and send a request to the server.
    sort: function () {
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
    },
    root: ‘Rows’,
    beforeprocessing: function (data) {

    source.totalrecords = data.TotalRows;
    },
    deleterow: function (rowid,commit) {

    var row = $(‘#jqxgrid’).jqxGrid(‘getrowdatabyid’, rowid);

    $.ajax({
    dataType: ‘json’,
    cache: false,
    data: row,
    url: ‘/Productoes/Delete’,
    type: “POST”,
    success: function (resultado, status, xhr)
    {
    if (resultado != “”)
    {
    alert(resultado);
    }
    else
    {
    commit(true);
    }
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
    alert(jqXHR.responseText);
    commit(false);
    }
    });
    }
    };

    var theme = ‘energyblue’;

    var dataadapter = new $.jqx.dataAdapter(source,
    {
    loadError: function (xhr, status, error) {

    alert(error);
    }
    });

    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid({
    source: dataadapter,
    filterable: true,
    sortable: true,
    autoheight: true,
    autorowheight: true,
    pageable: true,
    theme: theme,
    width: ‘95%’,
    virtualmode: true,
    pagesize: 3,
    showstatusbar: true,
    statusbarheight: 45,
    rendergridrows: function (obj) {

    return obj.data;

    },
    renderstatusbar: function (statusbar) {
    // appends buttons to the status bar.
    var container = $(“<div style=’overflow: hidden; position: relative; margin: 5px;’></div>”);
    var anadir = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; ‘>Añadir</span></div>”);
    var delete = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; ‘>Borrar</span></div>”);

    container.append(anadir);
    container.append(delete);
    statusbar.append(container);

    anadir.jqxButton({ theme: theme, width: 100, height: 20 });
    delete.jqxButton({ theme: theme, width: 100, height: 20 });

    anadir.click(function (event) {
    window.location.href = “@Url.Action(“Create”, “Productoes”)”;
    });

    delete.click(function (event) {

    var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
    var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount)
    {
    var rowid = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
    $(“#jqxgrid”).jqxGrid(‘deleterow’, rowid);
    }
    });
    },
    columns: [
    { text: ‘id’, datafield: ‘id’ },
    { text: ‘productoDescripcion’, datafield: ‘productoDescripcion’ }
    ]
    });
    });
    </script>

    Anyone knows how to do this with commit(true)?. I think with commit is more elegant.


    Dimitar
    Participant

    Hello rubenfernande3,

    Your code seems correct. Could you, please, share the exception thrown by jqxgrid.js? Please also make sure you are using the latest version of jQWidgets (3.9.1).

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.