jQWidgets Forums

jQuery UI Widgets Forums TreeGrid Unable to display msg "No Data to Display"

This topic contains 6 replies, has 2 voices, and was last updated by  harishkpv 11 years, 1 month ago.

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

  • harishkpv
    Participant

    Hi,

    I am able to display data using virtual mode. However, when I get an empty json, i.e. “[]”, the TreeGrid does not show “No data to display” or similar message as Grid shows. Is there any property, which needs to be enabled to handle empty json? Please suggest.

    I am using virtual mode with URL. When JSON has data, I am able to show the data without any problems.

    Regards,
    Harish


    Peter Stoev
    Keymaster

    Hi Harish,

    If there’s no data in the TreeGrid, it will display the “No data to display” message. Could you give me an example which shows how you use that widget in virtual mode?

    Best Regards,
    Peter Stoev

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


    harishkpv
    Participant

    Hi Peter,

    The code is as below,

    var gridsource =
    {
    dataType: “jsonp”,
    dataFields: dataFieldArray,
    hierarchy:
    {
    keyDataField: { name: “TempUniqueField” },
    parentDataField: { name: treeParentIDColumn }
    },
    id: “TempUniqueField”,
    root:”,
    url: requestServiceURL + “:8085/Relation/”
    };

    $(“#treeGrid_” + webpartid).jqxTreeGrid(
    {
    width: _width * 0.99,
    //source: adapter,
    sortable: false,
    columnsResize: true,
    //ready: function () {
    // $(“#treeGrid_” + webpartid).jqxTreeGrid(‘expandRow’, ‘2’);
    //},
    virtualModeCreateRecords: function (expandedRecord, done) {
    var adapter = new $.jqx.dataAdapter(gridsource, {
    formatData:function(data){
    if (expandedRecord === null){
    data.storedProc = storeprocedure;
    data.itemID = itemID + “~” + rootcitype;
    data.depth = 1;
    }
    else {
    var nodekey = $(“#treeGrid_” + webpartid).jqxTreeGrid(‘getKey’, expandedRecord);
    var itemParam = (expandedRecord.LinkKey === null ? (itemID + “~” + rootcitype) : expandedRecord.LinkKey + “~” + expandedRecord.ItemTier2);
    if ($(“#treeGrid_” + webpartid).jqxTreeGrid(‘getRow’, nodekey).parent !== undefined) {
    var parent = $(“#treeGrid_” + webpartid).jqxTreeGrid(‘getRow’, nodekey).parent;
    var parentCIName = parent[treeParentNodeIdentifier];
    itemParam = encodeURIComponent(itemParam + “~” + parentCIName);
    }
    data.storedProc = storeprocedure;
    data.itemID = itemParam;
    data.depth = 2;
    }
    return data;
    },
    downloadComplete: function (edata, textStatus, jqXHR) {
    if (edata !== “[]”) {
    var data = $.parseJSON(edata);
    return data;
    }
    //else {

    // return $.parseJSON(“[{null}]”);
    //}
    },
    loadComplete: function () {
    done(adapter.records);
    },
    loadError: function (xhr, status, error) {
    done(false);
    throw new Error(error.toString());
    }
    });
    adapter.dataBind();
    },
    virtualModeRecordCreating: function (record) {

    if (record.level == treeDepth) {
    record.leaf = true;
    }
    },
    columns: columnsArray
    });

    The condition (edata !== “[]”) has been added to prevent the page from going in loop to access data. When no data is present, the url returns “[]”.
    If data is present (this is the first node in both cases), JSON is as below,

    [{“TempRelationID”:1,”TempUniqueField”:null,”DisplayCIName”:”LNAPP016A”,”RelatedCIName”:null,”DisplayCIReconciliationId”:”RE219890227800SNvwMGiUAA3gUB”,
    “ItemTier1″:null,”ItemTier2″:null,”ItemType”:null,”ItemRelType”:null,”RelatedItemTier1″:null,”RelatedItemTier2″:null,”RelatedItemType”:null,
    “RelatedItemRelType”:null,”LinkKey”:null,”LinkURL”:null,”ParentCIName”:”108″,”ParentID”:-1,”ChildCIName”:”108″,”ParentCIReconciliationId”:null,
    “ChildCIReconciliationID”:null,”RelationShipName”:null,”RelationshipLevel”:0,”RelationshipPath”:”108″,”HasChildren”:false}]

    I am using 3.2.2 version

    Please suggest.

    Regards,
    Harish


    Peter Stoev
    Keymaster

    Hi harishkpv,

    Could you repost your code, but this time, format it by using the “code” button of the toolbar.

    Best Regards,
    Peter Stoev

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


    harishkpv
    Participant

    Hi Peter,

    This is the code which is used for displaying data

    function displaygrid(objectid, storeprocedure, itemID, webpartid, requestServiceURL) {
    
        var initialRelationshiplevel = 0;
    
        dataFieldArray = buildDataArray(metadata, "");
        var strColumnDisplay = Enumerable.From(metadata)
        .Where(function (x) { return x.category === "Column Control" && x.key === "Columns"; })
        .Select(function (x) { return x.value; }).ToString();
    
        var arrColumnDisplay = strColumnDisplay.split(",");
        columnsArray = buildColumnArray(metadata, arrColumnDisplay, requestServiceURL);
    
        var TreeProperty = new TreeRenderProperty.TreeRenderProperty(metadata);
    
        var treeIDColumn = TreeProperty.TreeIDColumn;// getTreeIDColumn(metadata);
        var treeParentIDColumn = TreeProperty.TreeParentIDColumn; //getTreeParentIDColumn(metadata);
        var treeParentNodeIdentifier = TreeProperty.ParentNodeIdentifier; //getTreeLabel(metadata);
        var rootcitype = TreeProperty.RootCIType;// getRootCIType(metadata);
        var treeDepth = TreeProperty.TreeDepth;
        var theme = getDemoTheme();
    
        var gridsource =
                {
                    dataType: "jsonp",
                    dataFields: dataFieldArray,
                    hierarchy:
                    {
                        keyDataField: { name: "TempUniqueField" },
                        parentDataField: { name: treeParentIDColumn }
                    },
                    id: "TempUniqueField",
                    root:'',
                    url: requestServiceURL + "/Relation/"
                };
    
        $("#treeGrid_" + webpartid).jqxTreeGrid(
                   {
                       width: _width * 0.99,
                       //source: adapter,
                       sortable: false,
                       columnsResize: true,
                       virtualModeCreateRecords: function (expandedRecord, done) {
                           var adapter = new $.jqx.dataAdapter(gridsource, {
                               formatData:function(data){
                                   if (expandedRecord === null){
                                       data.storedProc = storeprocedure;
                                       data.itemID = itemID + "~" + rootcitype;
                                       data.depth = 1;
                                   }
                                   else {
                                       var nodekey = $("#treeGrid_" + webpartid).jqxTreeGrid('getKey', expandedRecord);
                                       var itemParam = (expandedRecord.LinkKey === null ? (itemID + "~" + rootcitype) : expandedRecord.LinkKey + "~" + expandedRecord.ItemTier2);
                                       if ($("#treeGrid_" + webpartid).jqxTreeGrid('getRow', nodekey).parent !== undefined) {
                                           var parent = $("#treeGrid_" + webpartid).jqxTreeGrid('getRow', nodekey).parent;
                                           var parentCIName = parent[treeParentNodeIdentifier];
                                           itemParam = encodeURIComponent(itemParam + "~" + parentCIName);
                                       }
                                       data.storedProc = storeprocedure;
                                       data.itemID = itemParam;
                                       data.depth = 2;
                                   }
                                   return data;
                               },
                               downloadComplete: function (edata, textStatus, jqXHR) {
                                   if (edata !== "[]") {
                                       var data = $.parseJSON(edata);
                                       return data;
                                   }
                                   else {
                                       
                                       return $.parseJSON("[{}]");
                                   }
                               },
                               loadComplete: function () {
                                   done(adapter.records);
                               },
                               loadError: function (xhr, status, error) {
                                   done(false);
                                   throw new Error(error.toString());
                               }
                           });
                           adapter.dataBind();
                       },
                       virtualModeRecordCreating: function (record) {
    
                           if (record.level == treeDepth) {
                               record.leaf = true;
                           }
                       },
                       columns: columnsArray
                   });
    }

    The condition (edata !== “[]“) has been added to prevent the page from going in loop to access data. When no data is present, the url returns “[]“.
    If data is present (this is the first node in both cases), JSON is as below,

    [{"TempRelationID":1,"TempUniqueField":null,"DisplayCIName":"LNAPP016A","RelatedCIName":null,"DisplayCIReconciliationId":"RE219890227800SNvwMGiUAA3gUB",
    "ItemTier1":null,"ItemTier2":null,"ItemType":null,"ItemRelType":null,"RelatedItemTier1":null,"RelatedItemTier2":null,"RelatedItemType":null,
    "RelatedItemRelType":null,"LinkKey":null,"LinkURL":null,"ParentCIName":"108","ParentID":-1,"ChildCIName":"108","ParentCIReconciliationId":null,
    "ChildCIReconciliationID":null,"RelationShipName":null,"RelationshipLevel":0,"RelationshipPath":"108","HasChildren":false}]

    I am using 3.2.2 version.

    Please suggest

    Regards,
    Harish


    Peter Stoev
    Keymaster

    Hi Harish,

    You can call done(false); if you resultin Array is empty.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    harishkpv
    Participant

    Thanks! That worked.

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

You must be logged in to reply to this topic.