I have a requirement where I need to set column headers in knockout grid dynamically. I tried using observable but didn't help as initially whatever value is assigned that only it is keeping .
self.ItemsGrid = new ko.grid.viewModel({
columns: [
{ field: "ItemCode", headerText: self.lblItemHeader, sort: self.GetItems },
{ field: "Mark", headerText: self.lblMark, sort: self.GetItems },
{ field: "Equipment", headerText: self.lblEquipment, sort: self.GetItems },
{ field: "RiskCategory", headerText: lblRiskCateg, sort: self.GetItems },
{ field: "Region", headerText: lblRegion, sort: self.GetItems },
{ field: "SerialNumber", headerText: lblSerialNo, sort: self.GetItems },
{ field: "RiskArea", headerText: lblRiskArea, sort: self.GetItems },
{ field: "RiskType", headerText: lblRiskType, sort: self.GetItems },
{ field: "RiskValue", headerText: lblRiskVal, sort: self.GetItems },
{ field: "", headerText: '' }
],
rowTemplate: "itemsTemplate",
paginate: self.GetItems,
pageSizeChange: self.GetItems,
pageSizeOptions: [10, 20, 30],
currentPageIndex: 1,
root: self
});
For first three columns I have used observables. These observables I am setting in a function and value is getting updated for these observables but still does not reflect in header.
Related
i am getting array of objects from api.
The data looks like this.
Array [
Object {
"code": 230,
"name": "טרגט",
"themeColor": "#009fe8",
},
Object {
"code": 270,
"name": "קוסל",
"themeColor": "#9c3ab4",
},
Object {
"code": 465,
"name": "מעיין",
"themeColor": "#0bb694",
},
Object {
"code": 485,
"name": "מעיין תיכונים",
"themeColor": "#009fe8",
},
Object {
"code": 700,
"name": "משרד החינוך",
"themeColor": "#9c3ab4",
},
Object {
"code": 701,
"name": "מ.החינוך אולפני",
"themeColor": "#0bb694",
},
Object {
"code": 702,
"name": "חינוך התישבותי",
"themeColor": "#009fe8",
},
Object {
"code": 984,
"name": "לא לגעת -חברת הדגמה ",
"themeColor": "#9c3ab4",
},
]
i want to add a dropdown which contain items as array of objects "name" value from
api.
i am using RNPickerSelect from "react-native-picker-select";
const [selectedComp, setSelectedComp] = useState("");
const changeLanguage = (value) => {
setSelectedComp(value);
};
<RNPickerSelect
placeholder={{ label: i18n.t("SET_LANGUAGE") }}
style={pickerSelectStyles}
onValueChange={(value) => changeLanguage(value)}
items={companyName}
doneText={"בוצע"}
value={selectedComp}
useNativeAndroidPickerStyle={false}
fixAndroidTouchableBug={true}
/>
i want the names for the dropdown list coming from array of object list like below one.
טרגט
קוסל
מעיין
מעיין תיכונים
משרד החינוך
מ.החינוך אולפני
חינוך התישבותי
לא לגעת -חברת הדגמה
How can i add name from array list for dropdown list?
According to the official react-native-picker-select documentation, the data you want to display in the dropdown, should have the keyword label, but you are trying to display name keyword.
The items for the component to render
Each item should be in the following format: {label: 'Orange', value: 'orange', key: 'orange', color: 'orange', inputLabel:
'Orange!'}
label and value are required
Something like this:
<RNPickerSelect
onValueChange={(value) => console.log(value)}
useNativeAndroidPickerStyle={false}
placeholder={{ label: "Select your favourite language", value: null }}
items={[
{ label: "JavaScript", value: "JavaScript" },
{ label: "TypeStript", value: "TypeStript" },
{ label: "Python", value: "Python" },
{ label: "Java", value: "Java" },
{ label: "C++", value: "C++" },
{ label: "C", value: "C" },
]}
/>
I have used vue-easytable plugin version 2.8.2 to display a table inside a Vue component. I have a problem of finding how to conditionally display a table column.
In a demo displayed in here when either of the "Row Radio" or "Row Checkbox" switches are switched on we can see a column is added to the demo table dynamically. So I think this feature/functionality should be there already in vue-easytable, but I couldn't find how to achieve this referring to the documentation.
Within my Vue component the columns array I pass to vue-easytable is as follows.
columns: [
{
field: "entity",
key: "c",
title: "Entity",
align: "left",
sortBy: "asc",
},
{
field: "version",
key: "d",
title: "Version",
align: "center",
},
{
field: "test_date",
key: "e",
title: "Test Date",
align: "center",
},
{
field: "score",
key: "f",
title: "Score",
align: "center",
},
{
field: "score_percentage",
key: "g",
title: "Score (%)",
align: "center",
},
{
field: "result",
key: "h",
title: "Result",
align: "center",
}
]
I want to show the "Entity" column when a condition is satisfied. What should I do to achieve that?
You can find the vue-easytable documentation here.
In the source code of the demo, the column is being added to the columns array like so:
if (this.enableRowCheckbox) {
columns.push({
field: "checkbox",
key: "checkbox",
title: "",
width: 100,
fixed: this.enableColumnFixed ? "left" : "",
type: "checkbox",
});
}
For your use case you might be better off setting the defaultHiddenColumnKeys option and/or the hiddenColumnsByKeys and showColumnsByKeys instance methods. See the link for examples.
Or you can use the cellStyleOption, like so:
cellStyleOption: {
headerCellClass: ({ column }) => {
if (column.field === "entity") {
return someCondition?'text-visible-class':'text-hidden-class';
}
},
bodyCellClass: ({ column }) => {
if (column.field === "entity") {
return someCondition?'text-visible-class':'text-hidden-class';
}
},
},
I am working on a project in which I need to display List of objects in Kendo Grid.
below is the code for data binding.
$("#GridProperty").kendoGrid({
dataSource: {
transport: {
read: {
dataType: "json",
url: $_BindPropertyData,
data: { "LegalEntityId": LegalEntityId, "DatasetId": DatasetId },
async: true,
}
},
schema: {
model: {
fields: {
GeoId: { type: "int" },
GeoDescription: { type: "string" },
GeoAbbreviation: { type: "string" },
//ComponentDesc: { type: "string", from: "CompModelList.ComponentDesc" },
Id: { type: "int" },
Amount1: { type: "decimal", from: "CompModelList.SaDataModel.Amount1" },
Amount2: { type: "decimal"}
//lstcompModel: {type: ""}
}
}
},
},
noRecords: {
template: "<p style='margin-top:5px;'>There are currently no items available<p>"
},
height: 525,
reorderable: true,
groupable: true,
sortable: true,
filterable: true,
resizable: true,
columnMenu: true,
selectable: "row",
dataBound: function () {
},
columns: Columns
});
Description :
I am returning list of objects as json from my Action . but i am not able to bind the list of objects in kendo grid.
I am breaking my head for last four days. Please help.
Thanks
I have an app that worked great for 2.0p5. I was able to set the various columns in the chart specific colors. In the chart config, I added
colors: [
'#89A54E',
'#4572A7',
'#AA4643'
],
When I upgraded to 2.0rc1, the colors no longer seem to get set. My chart config is:
Ext.create('Rally.ui.chart.Chart', {
animate: true,
chartData: {
series: [{
type: 'column',
name: 'Data1',
data: data1
},
{
type: 'column',
name: 'Data2',
data: data2
},
{
type: 'column',
name: 'Data3',
data: data3
}],
categories: xAxisData
},
chartConfig: {
chart: {
type: 'column'
},
title: {
text: 'Show Data'
},
yAxis: {
min: 0,
title: {
text: 'yAxis Info'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
colors: [
'#89A54E',
'#4572A7',
'#AA4643'
],
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'white'
}
}
}
}
});
Any ideas why I lost my color setting capabilities in 2.0rc1?
An example from one of my apps:
var series = [{
name : 'Col 1',
data : [],
showInLegend : false
},{
name : 'Col 2',
data : [],
showInLegend : false
},{
name : 'Col 3',
data : [],
showInLegend : false
}];
Ext.Array.each(records, function(record) {
//HighCharts Data
record.set('name', ...);
record.set('y', ...);
record.set('color', ...);
//Add record to series
series[index].data.push(record.data);
// Add to chartData
});
Hope this helps/works for you!
I am trying to connect a RallyChart using the type specifier set to pie with a Rally.data.custom.Store. When the RallyChart has the type set to column or is blank, the data shows correctly. When the type is set to pie, I get a pie with all 0%s returned.
Here's what my store looks like:
var myStore = Ext.create('Rally.data.custom.Store', {
data: mySeries,
fields: [
{ name: 'WorkItems', type: 'string' },
{ name: 'Count', type: 'int' }
]
});
Here's what my chart configuration function looks like:
_buildChart: function(myStore) {
this.myChart = Ext.create('Rally.ui.chart.Chart', {
height: 400,
store: myStore,
series: [{
type: 'pie',
name: 'Count',
dataIndex: 'Count'
}],
xField: 'WorkItems',
chartConfig: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Work Breakdown in Selected Sprint'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
}
}
});
this.add(this.myChart);
}
My data incoming looks like:
['Defects', 4],
['Feature A', 4]
['Feature B', 4]
Any ideas why column charts can show it, but pie cannot?
I bet this is a bug in the 2.0p5 version of the chart. We just released version 2.0rc1 of the SDK which includes a better version of the chart. The following code example shows how to create a pie with your data and Rally.ui.chart.Chart in 2.0rc1:
//from inside your app
this.add({
xtype: 'rallychart',
height: 400,
chartData: {
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Defects', 4], ['Feature A', 4], ['Feature B', 4]
]
}]
},
chartConfig: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
xAxis: {},//must specify empty x-axis due to bug
title: {
text: 'Work Breakdown in Selected Sprint'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
}
}
});
Note it is no longer necessary to create an intermediate store to pass to the chart- you can simply pass in your series as part of the chartData config.