jQuery UI Widgets Forums ASP .NET MVC update the data from API when we change/update the page number

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 2 weeks, 2 days ago.

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

  • Mohan Madhugundu
    Participant

    Hi,

    Actually i am getting the total number records of the table and showing the pagination in grid. I need to get the 5 to 10 row for first hit and when i changed the paging number i need to hit the API and get the data and show those data in grid.Here i am sharing my code.

    var source =
    {
    datatype: “array”,
    datafields: [
    { name: ‘ID’, type: ‘string’ },
    { name: ‘DepartmentName’, type: ‘string’ },
    { name: ‘SchoolID’, type: ‘number’ },
    { name: ‘Status’, type: ‘string’ },
    { name: ‘CreatedBy’, type: ‘string’ },
    { name: ‘CreatedAt’, type: ‘date’ },
    { name: ‘UpdatedBy’, type: ‘string’ },
    { name: ‘UpdatedAt’, type: ‘date’ },
    { name: “Operation”, type: “string” }
    ],
    totalrecords: 1000000,
    url: “/Department/GetAllDepts?Sid=” + $(“#hdn_SIDD”).val() + “”
    };

    var cellsrenderer = function (row, column, value, defaulthtml, columnproperties, rowdata ) {
    var Edit = 0, Delete = 1;
    var build = “<div style=’text-align:center;padding-top:1%;’>”;
    build += ‘Edit<span style=”color:#23527c;”> | </span>’;
    build += ‘Delete‘;
    build += ‘</div>’;
    return build;
    };

    // generate sample data.
    var generatedata = function (startindex, endindex) {
    debugger;
    var data = {};

    var Sid = {
    Sid: parseInt($(“#hdn_SIDD”).val())
    };

    $.ajax({
    cache: false,
    type: “POST”,
    url: “../Department/GetAllDepts/”,
    data: JSON.stringify(Sid),
    dataType: “json”,
    contentType: ‘application/json; charset=utf-8’,
    success: function (datas) {
    debugger;
    data = datas;
    },
    error: function (ex) {

    }
    });
    return data;
    };

    var rendergridrows = function (params) {
    debugger;
    var data = generatedata(params.startindex, params.endindex);
    return data;
    };
    var totalcolumnrenderer = function (row, column, cellvalue) {
    debugger;
    var cellvalues = $.jqx.dataFormat.formatnumber(cellvalue, ‘c2’);
    return ‘<span style=”margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;”>’ + cellvalues + ‘</span>’;
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    // initialize jqxGrid
    $(“#grid”).jqxGrid({
    width: ‘100%’,
    height: 250,
    source: dataAdapter,
    pageSize: 5,
    pageable: true,
    pagerMode: ‘advanced’,
    filterable: true,
    showfilterrow: true,
    autoshowfiltericon: true,
    filterMode: ‘advanced’,
    selectionMode: ‘multiplerows’,
    keyboardnavigation: false,
    columnsResize: true,
    columns: [
    { text: “ID”, datafield: “ID” },
    { text: “Dept.Name”, datafield: “DepartmentName” },
    { text: “Status”, datafield: “Status” },
    { text: “Created By”, datafield: “CreatedBy”, hidden: true },
    { text: “Created At”, datafield: “CreatedAt”, hidden: true },
    { text: “Updated By”, datafield: “UpdatedBy”, hidden: true },
    { text: “Updated At”, datafield: “UpdatedAt”, hidden: true },
    { text: “Operation”, datafield: “Operation”, hidden: false, cellsrenderer: cellsrenderer, cellsformat: ‘c2’, align: ‘center’, cellsAlign: ‘center’}
    ]
    });

    var listSource = [
    { label: ‘ID’, value: ‘ID’, checked: true },
    { label: ‘Dept.Name’, value: ‘DepartmentName’, checked: true },
    { label: ‘Status’, value: ‘Status’, checked: true },
    { label: ‘Created By’, value: ‘CreatedBy’, checked: false },
    { label: ‘Created At’, value: ‘CreatedAt’, checked: false },
    { label: ‘Updated By’, value: ‘UpdatedBy’, checked: false },
    { label: ‘Updated At’, value: ‘UpdatedAt’, checked: false },
    { label: ‘Operation’, value: ‘Operation’, checked: true }
    ];

    $(“#jqxlistbox”).jqxListBox({ source: listSource, width: ‘100%’, height: 235, checkboxes: true });
    $(“#jqxlistbox”).on(‘checkChange’, function (event) {
    $(“#grid”).jqxGrid(‘beginupdate’);
    if (event.args.checked) {
    $(“#grid”).jqxGrid(‘showcolumn’, event.args.value);
    }
    else {
    $(“#grid”).jqxGrid(‘hidecolumn’, event.args.value);
    }
    $(“#grid”).jqxGrid(‘endupdate’);
    });

    I am not able to see the data in grid even it is first time. Can any one help for this to me.


    Peter Stoev
    Keymaster

    Hi,

    Please, refer to: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-grid-server-side-paging.htm. The documentation page shows how to implemetn server paging with Grid used in ASP .NET environment.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.