jQuery UI Widgets Forums Grid fields name in table having hifen (-) gives error in grid

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

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

  • pankhi
    Participant

    HI I am using following code. the fields name in table is having hifen ‘-‘ (example user-id). Such kind of fields gives error when they were shown in details tab.
    Following is my code please correct me.
    `$ = jQuery.noConflict();
    $(document).ready(function() {
    //===========================
    // show the grid for errorlog
    //===========================
    var url = “/Inventories/dashboardjson”;
    // prepare the data
    var source = {
    datatype: “json”,
    datafields: [{
    name: ‘TimeStamp’,
    type: “date”
    }, {
    name: ‘MerchantID’,
    type: “string”
    }, {
    name: ‘item-name’,
    type: “string”
    }, {
    name: ‘listing-id’,
    type: “string”
    }, {
    name: ‘seller-sku’,
    type: “string”
    }, {
    name: ‘price’,
    type: “string”
    }, {
    name: ‘quantity’,
    type: “string”
    }, {
    name: ‘fulfillment-channel’,
    type: “string”
    }, {
    name: ‘item-condition’,
    type: “string”
    }, {
    name: ‘asin1’,
    type: “string”
    }, ],
    id: ‘Id’,
    url: url,
    pagesize: 30,
    };

    var initrowdetails = function(index, parentElement, gridElement, datarecord) {
    var tabsdiv = null;
    var detail = null;
    var title = null;
    tabsdiv = $($(parentElement).children()[0]);
    if (tabsdiv != null) {
    detail = tabsdiv.find(‘.detail’);
    title = tabsdiv.find(‘.title’);

    var container = $(‘<div style=”margin: 5px;”></div>’)
    container.appendTo($(detail));
    var leftcolumn = $(‘<div style=”float: left; width: 40%;”></div>’);
    var rightcolumn = $(‘<div style=”float: left; width: 60%;”></div>’);

    container.append(leftcolumn);
    container.append(rightcolumn);
    var price = “<div style=’margin: 10px;’><b>Price:</b> ” + datarecord.price + “</div>”;
    var quantity = “<div style=’margin: 10px; ‘><b>Quantity:</b> ” + datarecord.quantity + “</div>”;
    var asin1 = “<div style=’margin: 10px; ‘><b>Asin:</b> ” + datarecord.asin1 + “</div>”;
    var sku = “<div style=’margin: 10px;’><b>Seller Sku:</b> ” + datarecord.seller-sku + “</div>”;
    var fulfillment = “<div style=’margin: 10px;’><b>Fulfillment Channel:</b> ” + datarecord.fulfillment-channel + “</div>”;

    $(leftcolumn).append(sku);
    $(leftcolumn).append(price);
    $(leftcolumn).append(asin1);
    $(rightcolumn).append(quantity);
    $(rightcolumn).append(fulfillment);

    $(tabsdiv).jqxTabs({
    width: 900,
    height: 200,
    theme: KiouiTheme,
    });

    }
    }

    var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function(data) {},
    loadError: function(xhr, status, error) {},
    beforeLoadComplete: function(records, originalData, c) {
    for (var i = 0; i < records.length; i++) {
    if (originalData[i].TimeStamp == “0”) {
    records[i].TimeStamp = “”
    } else {
    records[i].TimeStamp = new Date(originalData[i].TimeStamp * 1000)
    }
    };
    return records;
    },
    });

    var expandData = new Array();

    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid({
    width: ‘100%’,

    theme: KiouiTheme,
    source: dataAdapter,
    pageable: true,
    autoheight: true,
    sortable: true,
    altrows: true,
    enabletooltips: true,
    pagesizeoptions: [’30’, ’60’, ’90’],
    showfilterrow: true,
    filterable: true,
    selectionmode: ‘singlecell’,
    columnsresize: true,
    rowdetails: true,
    enablebrowserselection: true,
    rowdetailstemplate: {
    rowdetails: “<div style=’margin: 10px;’><ul style=’margin-left: 30px;’><li class=’title’>Error Detail<div class=’detail’></div></div>”,
    rowdetailsheight: 230
    },
    ready: function() {
    var data = $(‘#jqxgrid’).jqxGrid(‘getrows’);
    for (var i = 0; i < data.length; i++) {
    expandData.push(false);
    };

    $(“#jqxgrid”).on(“rowclick”, function(event) {
    var column = event.args.column;
    var rowindex = event.args.rowindex;
    var columnindex = event.args.columnindex;
    if (expandData[rowindex] == false) {
    $(‘#jqxgrid’).jqxGrid(‘showrowdetails’, rowindex);
    } else {
    $(‘#jqxgrid’).jqxGrid(‘hiderowdetails’, rowindex);

    };
    });

    $(‘#jqxgrid’).on(‘rowexpand’, function(event) {
    var args = event.args;
    var row = args.rowindex;
    expandData[row] = true;
    });

    $(‘#jqxgrid’).on(‘rowcollapse’, function(event) {
    var args = event.args;
    var row = args.rowindex;
    expandData[row] = false;
    });
    },
    initrowdetails: initrowdetails,
    columns: [{
    text: ‘Date’,
    datafield: ‘TimeStamp’,
    type: ‘date’,
    cellsformat: DateTimeFomat
    }, {
    text: ‘Merchant ID’,
    datafield: ‘MerchantID’
    }, {
    text: ‘Item Name’,
    datafield: ‘item-name’
    }, {
    text: ‘Listing Id’,
    datafield: ‘listing-id’
    },{
    test:’item-condition’,
    datafield:’item-condition’,
    } ],
    });
    // to remove the filter result
    $(‘#clearfilteringbutton’).jqxButton({
    height: 25,
    theme: KiouiTheme
    });
    $(‘#clearfilteringbutton’).click(function() {
    $(“#jqxgrid”).jqxGrid(‘clearfilters’);

    });

    });

    Thanks


    Dimitar
    Participant

    Hello pankhi,

    You can access these datafields as follows:

    datarecord["seller-sku"], datarecord["fulfillment-channel"], etc.

    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.