jQWidgets Forums

jQuery UI Widgets Forums Grid loading failed when binding large amount of data to grid

This topic contains 2 replies, has 2 voices, and was last updated by  rani 11 years, 8 months ago.

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

  • Peter Stoev
    Keymaster

    Hi rani,

    The number of records is not much important taking into account that we have a demo with 30000 records. The Grid would display “no data to display’ if the binding to your data source has failed for some reason. You may add the jqxDataAdapter’s loadError callback function and debug why that happens. For more information about loadError, see: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm. The other possible reason is that your data loading requires some additional settings in the jqxDataAdapter’s source object, but I do not know whether that is required, because I do not know what data your try to load and what is its structure.

    Best Regards,
    Peter Stoev

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


    rani
    Participant

    Hello,

    I followed whatever you suggested above.
    but i am not getting large amount of data.
    below is my code.

    $(document).ready(function () {

    //debugger;
    var editrow = -1;
    var AssetId = 1;
    // prepare the data
    var getAdapter = function () {
    var source =
    {

    datatype: “json”,
    datafields: [
    { name: ‘Name’ },
    { name: ‘PKAssetTypeID’ },
    { name: ‘IsActive’, type: ‘bool’ }
    ],
    id: ‘PKAssetTypeID’,
    url: “/AssetType/GetAll”,

    updaterow: function (rowid, rowdata, commit) {
    // that function is called after each edit.

    var rowindex = $(“#AssetTypeGrid”).jqxGrid(‘getrowboundindexbyid’, rowid);
    //editedRows.push({ index: rowindex, data: rowdata });

    //getting update data

    function GetAssetModel() {
    var Asset = {};

    Asset.PKAssetTypeID = rowdata.PKAssetTypeID;
    Asset.Name = rowdata.Name;
    return Asset;
    }

    var test = JSON.stringify(GetAssetModel());

    //**
    $.ajax({
    url: ‘/AssetType/SaveAssettype/’,
    data: test,
    cache: false,
    type: ‘POST’,
    contentType: ‘application/json; charset=utf-8’,
    processData: true,
    success: function (data) {
    ShowSuccessNotifyMessage(data.Message);

    }
    }).fail(
    function (xhr, textStatus, err) {
    alert(err);
    });

    //**

    commit(true);
    }

    };
    var assetTypesdataAdapter = new $.jqx.dataAdapter(source);
    return assetTypesdataAdapter;
    }
    // initialize the popup window and buttons.
    $(“#popupWindow”).jqxWindow({
    title: ‘New Asset Types:’, width: 250, resizable: false, theme: ‘arctic’, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
    });

    $(“#AssetTypeGrid”).jqxGrid(
    {
    width: 600,
    source: getAdapter(),
    pageable: true,
    autoheight: true,
    theme: ‘arctic’,
    selectionmode: ‘singlerecord’,
    sortable: true,
    altrows: true,
    enabletooltips: true,

    editmode: ‘dblclick’,
    editable: true,
    showtoolbar: true,
    rendertoolbar: function (toolbar) {
    // appends buttons to the status bar.
    var container = $(“

    “);
    var addButton = $(“

    Add

    “);
    var deleteButton = $(“

    Delete

    “);

    //var deleteButton = $(“

    Delete

    “);

    container.append(addButton);

    container.append(deleteButton);

    toolbar.append(container);
    addButton.jqxButton({ theme: ‘arctic’, width: 50, height: 10 });

    deleteButton.jqxButton({ theme: ‘arctic’, width: 70, height: 10 });
    // add new row.
    addButton.click(function (event) {

    var offset = $(“#AssetTypeGrid”).offset();
    $(“#popupWindow”).jqxWindow({ resizable: false, theme: ‘arctic’, autoOpen: false });
    $(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 450, y: parseInt(offset.top) + 10 } });
    $(‘#popupWindow’).jqxWindow(‘open’);

    });

    // delete selected row.

    deleteButton.click(function (event) {

    var selectedrowindex = $(“#AssetTypeGrid”).jqxGrid(‘getselectedrowindex’);
    var rowscount = $(“#AssetTypeGrid”).jqxGrid(‘getdatainformation’).rowscount;
    var id = $(“#AssetTypeGrid”).jqxGrid(‘getrowid’, selectedrowindex);
    if (id != null) {

    $.ajax({
    cache: false,
    dataType: ‘json’,
    contentType: “application/json; charset=utf-8”,
    url: ‘/AssetType/DeleteAssettype?assetTypeID=’ + id,
    type: “POST”,
    success: function (data, status, xhr) {
    $(“#AssetTypeGrid”).jqxGrid(‘deleterow’, id);
    ShowSuccessNotifyMessage(data.Message);
    },
    error: function (jqXHR, textStatus, errorThrown) {

    ShowSuccessNotifyMessage(errorThrown);
    }
    });
    }
    else {
    ShowSuccessNotifyMessage(“Please select the record”);
    }
    //});

    });

    },
    columns: [
    { text: ‘Name’, datafield: ‘Name’, width: 250 },
    { text: ‘Active’, datafield: ‘IsActive’, columntype: ‘checkbox’ }

    ]
    });
    //
    var editModes = [‘Click’, ‘Double-Click’, ‘Selected Cell Click’];
    $(“#editmodes”).on(‘select’, function (event) {
    var index = event.args.index;
    var editMode = index == 0 ? ‘click’ : index == 1 ? ‘dblclick’ : ‘selectedcell’;
    $(“#AssetTypeGrid”).jqxGrid({ editmode: editMode });
    });
    //
    // create jqxWindow.
    $(“#popupWindow”).jqxWindow({ resizable: false, theme: ‘arctic’, autoOpen: false, width: 300, height: 250 });

    $(“#Cancel”).jqxButton({ theme: ‘arctic’ });
    $(“#Save”).jqxButton({ theme: ‘arctic’ });
    $(“#Save”).click(function () {

    var row = { Name: $(“#txt”).val(), IsActive: $(“#chk”).is(“:checked”) };

    var test = JSON.stringify(row);
    // debugger;
    $.ajax({
    url: ‘/AssetType/InsertAssettype/’,
    cache: false,
    type: ‘POST’,
    contentType: ‘application/json; charset=utf-8’,
    data: test,
    success: function (data) {
    rowID = data.PKAssetTypeID;
    txt.value = “”;
    chk.checked = false;
    $(“#popupWindow”).jqxWindow(‘hide’);
    $(‘#AssetTypeGrid’).jqxGrid(‘addrow’, rowID, row);
    ShowSuccessNotifyMessage(‘AssetType details are inserted sucessfully’);

    }
    }).fail(
    function (xhr, textStatus, err) {
    alert(err);
    });

    });
    });

    in the above code , i removed the call back functionality.
    once check my code and where i have done a mistake.
    please give me reply.

    Regards,
    sudharani


    rani
    Participant

    Hello,

    I am binding large amount(15000 records) of data to grid,

    but grid is not displaying records.
    it showing “No data to display”.

    below is my code

    var source =
    {

    datatype: “json”,
    datafields: [
    { name: ‘Name’ },
    { name: ‘PKAssetTypeID’ },
    { name: ‘IsActive’, type: ‘bool’ }
    ],
    id: ‘PKAssetTypeID’,
    url: “/AssetType/GetAll”,
    };

    var ListAdapter = new $.jqx.dataAdapter(source);
    $(“#AssetTypeGrid”).jqxGrid(
    {
    width: 600,
    source: ListAdapter,
    pageable: true,
    autoheight: true,
    theme: ‘arctic’,
    selectionmode: ‘singlerecord’,
    sortable: true,
    altrows: true,
    enabletooltips: true,

    editmode: ‘dblclick’,
    editable: true,
    showtoolbar: true,
    rendertoolbar: function (toolbar) {
    // appends buttons to the status bar.
    var container = $(“

    “);
    var addButton = $(“

    Add

    “);
    var deleteButton = $(“

    Delete

    “);

    //var deleteButton = $(“

    Delete

    “);

    container.append(addButton);

    container.append(deleteButton);

    toolbar.append(container);
    addButton.jqxButton({ theme: ‘arctic’, width: 50, height: 10 });

    deleteButton.jqxButton({ theme: ‘arctic’, width: 70, height: 10 });
    // add new row.
    addButton.click(function (event) {

    var offset = $(“#AssetTypeGrid”).offset();
    $(“#popupWindow”).jqxWindow({ resizable: false, theme: ‘arctic’, autoOpen: false });
    $(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 450, y: parseInt(offset.top) + 10 } });
    $(‘#popupWindow’).jqxWindow(‘open’);

    });

    // delete selected row.

    deleteButton.click(function (event) {

    var selectedrowindex = $(“#AssetTypeGrid”).jqxGrid(‘getselectedrowindex’);
    var rowscount = $(“#AssetTypeGrid”).jqxGrid(‘getdatainformation’).rowscount;
    var id = $(“#AssetTypeGrid”).jqxGrid(‘getrowid’, selectedrowindex);
    if (id != null) {

    $.ajax({
    cache: false,
    dataType: ‘json’,
    contentType: “application/json; charset=utf-8”,
    url: ‘/AssetType/DeleteAssettype?assetTypeID=’ + id,
    type: “POST”,
    success: function (data, status, xhr) {
    $(“#AssetTypeGrid”).jqxGrid(‘deleterow’, id);
    ShowSuccessNotifyMessage(data.Message);
    },
    error: function (jqXHR, textStatus, errorThrown) {

    ShowSuccessNotifyMessage(errorThrown);
    }
    });
    }
    else {
    ShowSuccessNotifyMessage(“Please select the record”);
    }
    //});

    });

    },
    columns: [
    { text: ‘Name’, datafield: ‘Name’, width: 250 },
    { text: ‘Active’, datafield: ‘IsActive’, columntype: ‘checkbox’ }

    ]
    });

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

You must be logged in to reply to this topic.