I have an object which has two members:
num which is just an integer and article which is an object that I get through JSON and has a number of members itself. Now I want to use members from article for the name and pris fields in a SlickGrid. The example beneath does not seem to work however:
var columns = [
{ id: "antal", name: "Antal", field: "num", width: 10},
{ id: "namn", name: "Artikelnamn", field: "article.name", width: 50},
{ id: "pris", name: "Totalpris", field: "article.price", width: 50}
];
Can anyone assist me in implementing this correctly based on the code provided?
Use article as the field, and employ a column formatter. So:
var columns = [
{
id: "antal", name: "Antal", field: "num", width: 10
},
{
id: "namn", name: "Artikelnamn", field: "article", width: 50,
formatter : function(row, cell, value, columnDef, dataContext){
return value.name;
}
},
{
id: "pris", name: "Totalpris", field: "article", width: 50,
formatter : function(row, cell, value, columnDef, dataContext){
return value.price;
}
}
];
Related
I have an array of object and i need to convert that into antd table columns format. Here is the online editor link.
const a = [
{
id: 1,
startValue: 1,
endValue: 3,
box: "ele",
},
{
id: 2,
startValue: 3,
endValue: 5,
box: "vcu",
},
{
id: 3,
startValue: 2,
endValue: 6,
box: "mcu",
},
]
// output
// [
// {
// dataindex: id,
// key: id,
// title: id,
// },
// {
// dataindex: startValue,
// key: startValue,
// title: startValue,
// },
// {
// dataindex: endValue,
// key: endValue,
// title: endValue,
// },
// {
// dataindex: box,
// key: box,
// title: box,
// },
// ]
Based on what you provided, I guess you are trying to automatically extract the column names from the given dataSource. Here is what you are looking for (I reused the variable named a :
const columns = Object.keys(a[0]||{})
.map(key => ({dataIndex: key, key, title: key}));
<Table dataSource={a} columns={columns} />
There is little to do to achieve what you want. According to Ant Design documentation your data does not need to be converted into output. It can directly be used as the dataSource array. And you will need to supply the columns array as shown below:
const dataSource = [
{
id: 1,
startValue: 1,
endValue: 3,
box: "ele",
},
{
id: 2,
startValue: 3,
endValue: 5,
box: "vcu",
},
{
id: 3,
startValue: 2,
endValue: 6,
box: "mcu",
}
];
const columns=
[
{
dataindex: "id",
key: "id",
title: "Id"
},
{
dataindex: "startValue",
key: "startValue",
title: "Start value"
},
{
dataindex: "endValue",
key: "endValue",
title: "End value"
},
{
dataindex: "box",
key: "box",
title: "Box"
}
];
// the following JSX expression will create the ant table in a React environment:
<Table dataSource={dataSource} columns={columns} />;
With the columns array you define which property of the dataSource elements you want to display in the table. The title property defines the title to be shown in each column header.
Using ExtJS 4.2.3. Have form with treecolumn xtype field which contains string value with number in begin. Column has 3 lvls of structure. On first lvl sort needs to be in order like (2, 3, 5, 40, 100 and etc).
After picking third lvl value in selection form, value in box will look like:
3.ABC.<BR>3.23.ABCCDD.<BR>3.23.5. ABCC
Sample of code:
enter Picker = new Project.Picker({
title: "Title1",
proxyCfg: {
url: Ext.state.Manager.get("url") + "TreeList",
type: "ajax"},
idProperty: "id",
defaultRootId: "NULL",
nodeParam: "parent_Code",
PickerCfg: [
{ name: "id", type: "string", isSC: false },
{ xtype: "treecolumn", name: "Fieldname", header: "Header1", type: "string", isSC: true, isHC: true },
{ name: "name2", type: "string" },
{ name: "code", header: "Header3", type: "string", isSC: true}],
viewConfig: {
listeners: {
itemdblclick: function (view, record) {
Order_Form.getComponent("Grid").selModel.getSelection()[0].set("id", record.get("id"));
Order_Form.getComponent("Grid").selModel.getSelection()[0].set("Fieldname", record.get("Fieldname"));
Order_Form.getComponent("Grid").selModel.getSelection()[0].set("code", record.get("code"));
trigger.setValue(record.get("name2"));
this.up().up().destroy();
}
}
},
sorters: [{
property: "code",
direction: "ASC"
}]
}).show(this, function () { this.getComponent(0).DMS_search(); Picker.getComponent(0).getView().refresh(); });
}
},
tpl: "<table class='Gridd' style='border-collapse: collapse; border: medium none;'><tr><td><b>[Header1]: </b></td><td style='width:100%;'>{Name2}</td></tr><tr><td><b>[Header3]: </b></td><td>{code}</td></tr></table>"
Asking for help with sorting in selection form.
ExtJS 5
I am using ExtJs 5 Grid. I have a button, when i click on it, age column will be hidden by using below line.
Ext.getCmp('grdSample').columnManager.columns[2].setVisible(false);
I am using listener - beforecellclick just to get the index of clicked column. But when i click on last column (last column = next to hidden column) it still show original index of column. Hidden column still getting their position in grid.
In CSS - If we use visibility: hidden then it hides the component or tag but still take space in web page but if use display: none, it hides as well as it doesn't take space in web page.
I want hidden column should not take space while getting indexing of current clicked column. (Without using CSS).
Can anyone help me to sort this out.
Ext.onReady(function () {
var studentStore = new Ext.data.JsonStore({
autoLoad: true,
pageSize: 10,
fields: ['Name', 'Age', 'Fee'],
data: {
items: [
{ "Name": 'Puneet', "Age": '25', "Fee": '1000' },
{ "Name": 'Ankit', "Age": '23', "Fee": '2000' },
{ "Name": 'Rahul', "Age": '24', "Fee": '3000' }
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
var window = new Ext.Window({
id: 'grdWindow',
width: 400,
title: 'Grid Samples',
items: [
{
xtype: 'panel',
layout: 'fit',
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'hide age column',
handler: function () {
Ext.getCmp('grdSample').columnManager.columns[2].setVisible(false);
}
},
{
xtype: 'grid',
id: 'grdSample',
height: 300,
selModel: Ext.create('Ext.selection.CheckboxModel',
{
}),
store: studentStore,
columns: [
{
header: 'Name',
dataIndex: 'Name',
},
{
header: 'Age',
dataIndex: 'Age',
},
{
header: 'Fee',
dataIndex: 'Fee'
}
],
listeners:{
beforecellclick: function (el, td, cellIndex, record, tr, rowIndex, e, eOpts) {
debugger;
}
},
dockedItems:
[
{
xtype: 'pagingtoolbar',
store:studentStore,
dock:'bottom',
displayInfo:true
}
]
}
]
}
]
});
Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "Name", flex : 1, dataIndex: 'Name'},
{text: "Age", flex : 1, dataIndex: 'Age', id : 'colAge'},
{text: "Fee", flex : 1, dataIndex: 'Fee'}
],
listeners : {
'cellclick' : function (me, td, cellIndex, record, tr, rowIndex, e, eOpts ) {
me.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex)}} // here you get the correct value :)
});
Here is working Fiddle : http://jsfiddle.net/Xpe9V/1623/
Perhaps an overkill, but you could create an array of your columns
var columns= [{dataIndex: 'Name', header: 'Name'}, { dataIndex:'Age', header:
'Age' }, { dataIndex:'Fee', header: 'Fee'}]
2) then remove a column from array by index using javascript splice method
and reconfigure your grid
myGrid.reconfigure(myStore, columns);
I have seen a number of questions on sorting, but I couldn't find any for my very simple case.
I have taken the online example (where if I add the sortable and filterable, they don't work on the category field either), and modified it very slightly, just to use very simple local json data (to make it eaier to see what I am working with while learning the grid.
So, looking at the category field I want to sort and filter, in my columns definition I have ....
columns: [
{
...
{
field: "Category",
title: "Category",
width: "180px",
editor: categoryDropDownEditor,
template: "#=Category.description#"
},
and in the data source, the category field consists on s simple json object with 2 fields code and description (where code it to be the value field, and description is what to display) ...
var gridData = [
{
....
ProductID : 1,
ProductName : "Chai",
Category : {
code : '1',
description : "Beverages",
},
...
];
I have added the sortable, and filterable properties to the grid however the category field show the sort arrows (which toggle when clicked), but the column data does not sort or filter.
How do I will the sort and filter to look at the description field to carry out these operations?
Note I also have a combo cell editor attached
function createCombo(container, options, data) {
var input = $('<input name="' + options.field + '" />')
input.appendTo(container)
var combobox = input.kendoComboBox({
autoBind: true,
filter: "contains",
placeholder: "select...",
suggest: true,
dataTextField: "description",
dataValueField: "code",
dataSource: data,
});
where the data is of form
[
{code: 'code1', description: 'desc1'},
{code: 'code2', description: 'desc2'},
]
So I would need the combo to also populate the field with the correct value.
Thanks in advance for any help!
<script>
var gridData = [
{
ProductID: 1,
ProductName: "Chai",
Category: {
code: '1',
description: "beverages",
}
},
{
ProductID: 1,
ProductName: "bhai",
Category: {
code: '1',
description: "aceverages",
}
},
{
ProductID: 1,
ProductName: "dhai",
Category: {
code: '1',
description: "zeverages",
}
}
];
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: gridData,
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ProductID",
title: "Contact Name",
width: 200
}, {
field: "ProductName",
title: "Contact Title"
}, {
field: "Category.description",
title: "Category",
width: "180px",
template: "#=Category.description#"
}]
});
});
</script>
There is a text box in header, above the check boxes in slick grid that i want to hide. This text box is not having id so i am not sure how to hide without the id.
This is the HTML part
<div id="figuresGrid">
<div id="figuresByClassGrid" class="clearBg dispNone" style="width: 820px; height: 600px;"></div>
</div>
This is the Javascript part
var figGridColumns = [
{ id: "A", name: resources.Number, field: "Number", sortable: true, width: 165 },
{ id: "B", name: "BOM", field: "BOM", width: 115 },
{ id: "C", name: resources.Class, field: "Class", width: 125 },
{
id: "updated",
name: "Updated",
field: "UpdatedDisplay",
width: 165,
formatter: function (row, cell, value) {
return "<span>" + value + "</span>";
}
},
{ id: "user", name: resources.User, field: "User", width: 165 }
];
var gridOptions = { enableCheckBox: true, cssClass: "checkBoxStyle", showHeaderRow: true, enableCellNavigation: true, headerRowHeight: 30, filter: filter };
viewByClassGrid = new gg.sacs.SlickGridWrapper("#figuresByClassGrid", figGridColumns, "FigureId", "Number", gridOptions, figFilters);
The text box i want to hide is being shown before the Number field in header row.
find is their any class for that text box.
or
add class to that textbox, then you can do whatever you want.