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.
-
Author
-
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
Hello pankhi,
You can access these datafields as follows:
datarecord["seller-sku"]
,datarecord["fulfillment-channel"]
, etc.Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.