I have few tabs in which each of tab is having data table.
I'm trying to use tabulator and based on active tab I'm trying to set columns.
I used setColumns method but I'm getting an error:
Cannot read property 'forEach' of undefined
Please find jsfiddle link with my code in it:
var table = new Tabulator("#example-table", {
layout: "fitColumns",
//data : tabledata,
autoColumns: true,
});
if (this.activeTabName == "Role Card") {
let columns: [{
title: "Name",
field: "name",
sorter: "string",
width: 200
},
{
title: "Progress",
field: "progress",
sorter: "number",
formatter: "progress"
},
{
title: "Gender",
field: "gender",
sorter: "string"
},
{
title: "Rating",
field: "rating",
formatter: "star",
align: "center",
width: 100
},
{
title: "Favourite Color",
field: "col",
sorter: "string"
},
]
table.setColumns(columns)
}
https://jsfiddle.net/qc9r8t4p/
Please help me out in achieving this.
There is an error in your code that is resulting in the columns variable being undefined when you pass it into the setColumns function
where you assign the value to the variable
let columns: [{
you have a colon instead of an equals sign, it should be:
let columns = [{
Related
I exactly followed the examples on Kendo UI's website. All data shows fine, but all the operation of "sum" not happening. So in the groupFooterTemplate, all columns shows the last item in the grid including the "average" column. I have been working on this for a few days and just cannot figure out what went wrong.
Did this happen to anyone?
$scope.vmResyncGridOptions = {
dataSource: {
data: $scope.vmDataSource,
scheme: {
model: {
id: "vmName",
fields: {
vmName: { type: "string" },
vdiskName: { type: "string" },
total: { type: "number" },
synced: { type: "number" },
percent: { type: "number" }
}
}
},
group: {
field: "vmName",
aggregates: [
{ field: "vdiskName", aggregate: "count" },
{ field: "total", aggregate: "sum" },
{ field: "synced", aggregate: "sum" },
{ field: "percent", aggregate: "average" }
]
},
aggregate: [
{ field: "vdiskName", aggregate: "count" },
{ field: "total", aggregate: "sum" },
{ field: "synced", aggregate: "sum" },
{ field: "percent", aggregate: "average" }
]
},
sortable: false,
scrollable: true,
pageable: true,
groupable: true,
//height: ($scope.screenHeight-110)*0.70-8,
columns: [
{
field: "vdiskName",
title: $scope.translation.Resync_Table_VDisk_Name,
aggregates: ["count"],
groupFooterTemplate: "Count: #=count#"
},
{
field: "total",
title: $scope.translation.Resync_Table_Total_Bytes,
aggregates: ["sum"],
groupFooterTemplate: "Total: #=sum#"
},
{
field: "synced",
title: $scope.translation.Resync_Table_Has_Resynced,
aggregates: ["sum"],
groupFooterTemplate: "Total Resynced: #=sum#"
},
{
field: "percent",
title: $scope.translation.Resync_Table_VDisck_Completed,
aggregates: ["average"],
groupFooterTemplate: "Percent: #=average#"
}
]
};
Initially check all the table data. There is a possibility of spaces or newline characters in the table columns. Even if the columns, which are not aggregated. After the changes recheck the solution.
You group by the same column as the datasource id:
id: "vmName",
fields: {
vmName: { type: "string" },
vdiskName: { type: "string" },
total: { type: "number" },
synced: { type: "number" },
percent: { type: "number" }
}
}
},
group: {
field: "vmName",
Thats why you don't get sum and averages.
The issue here is that the data is only cast according to the datasource schema (i.e. type: "number") during transport operations. In your case, I'm assuming you're applying the data directly using the Datasource.data([array]) method. When you apply the data yourself, the datatypes in your supplied array are preserved. So, if you pass a numberic value as a string, it will remain as a string in the datasource despite the model indicating that it should be a number. Numeric data that is cast as a string will not sum; only the last value will be returned. Look at the data you're trying to sum; see what datatype it is within the datasource. My guess is that if you're only seeing the last value then your datatype is a string.
I am trying to make a cell in a jqxGrid editable depending on the value of another column in the row (with the name Editable).
{ text: "Percentage", datafield: "Percentage", columntype: 'numberinput', width: 100, cellsformat: 'p2',
editable: function (index, datafield, value, defaultvalue, column, rowdata) {
return rowdata.Editable;
}
},
This does not work. The cell is always editable regardless of the value of rowdata.Editable.
Replacing return rowData.Editable; with return false; does not work either.
I am using jqWidgets 3.9.0 in combination with JQuery 1.7.1.
Can anybody explain why this does not work and how to get it to work?
I got this to work by doing the following:
Replacing the url in the data source with localdata which references a local array called "data".
This array is filled using the original source url.
var data = [{}];
var source =
{
datatype: "json",
datafields: [
{ name: 'Id', type: 'number' },
{ name: 'Name', type: 'string' },
{ name: 'Percentage', type: 'string' },
{ name: 'Editable', type: 'bool' }
],
localdata: data
}
Using the cellbeginedit property instead of the editable property when defining the columns in the jqxGrid:
var dataAdapter = new $.jqx.dataAdapter(source);
$("#myGrid").jqxGrid(
{
width: 800,
source: dataAdapter,
editable: true,
editmode: 'click',
selectionmode: 'singlecell',
columns: [
{ text: "Id", datafield: "Id", columntype: 'textbox', editable: false, hidden: true },
{ text: "Name", datafield: "Name", columntype: 'textbox', width: 400, editable: false },
{ text: "Percentage", datafield: "Percentage", columntype: 'numberinput', width: 100, cellsformat: 'p2',
cellbeginedit: function (row) {
return data[row].Editable;
}
},
]
});
I was using the cellclick to do this kind of control.
$("#jqxGrid").on('cellclick', function (event) {
var args = event.args;
var datafield = event.args.datafield;
var rowIndex = args.rowindex;
var data = $('#jqxGrid').jqxGrid('getrowdata', rowIndex);
if(datafield == 'assign'){
if(data.assign){
$('#jqxGrid').jqxGrid('setcolumnproperty', 'datafield', 'editable', true);
}else{
$('#jqxGrid').jqxGrid('setcolumnproperty', 'datafield', 'editable', false);
}
}
});
I am trying to add a kendo checkbox column. I have done this successfully in another grid. However, when I tried to do the same thing in another grid, I am getting a "IsSimple is undefined" error, where IsSimple is a simple boolean model field.
Model for my kendo data source:
schema: {
data: function (data) { //specify the array that contains the data
console.log("DATA RETURN TEST");
console.log(data);
return data || [];
},
model: {
id: "Id",
fields: {
Id: { editable: false,
nullable: false,
type: "number"
},
DesignatorName: { type: "string" },
TXFreq: { type: "string" },
RXFreq: { type: "string" },
IsSpecial: { type: "bool" },
IsCommand: { type: "bool" },
}
}
Here is my column definition for my kendoGrid.
$("#DesignatorFreqGrid").kendoGrid({
dataSource: DesignatorDS,
columns: [
{ field: "DesignatorName", title: "Frequency", format: "{0:c}", width: "120px" },
{ field: "TXFreq", editor: TXFreqEditor, title: "TX Frequency", format: "{0:c}", width: "120px" },
{ field: "RXFreq", editor: TXFreqEditor, title: "RX Frequency", format: "{0:c}", width: "120px" },
{ field: "IsSpecial", template: '<input type="checkbox" #= IsSpecial ? checked="checked" : "" # disabled="disabled" ></input>', title: "Is Special", format: "{0:c}", width: "120px" },
{ field: "IsCommand", template: '<input type="checkbox" #= IsCommand ? checked="checked" : "" # disabled="disabled" ></input>', title: "Is Command", format: "{0:c}", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
toolbar: ["create"],
editable: "inline",
pageable: true
});
Here is my JSON object:
"other fields........DesignatorName: "11"
EQUIPMENT: ObjectId: 2
IsCommand: true
IsSpecial: true
RXFreq: "55"
TXFreq: "22"
As you can see, IsSpecial is defined. The binding works when I load data into the grid. The checkboxes are indeed checked. But if I try to add a new record with the "Add New Record" button in the grid, I will get the error "Uncaught ReferenceError: IsSpecial is not defined".
If I change the binding to this.IsSpecial, I don't get the error anymore, and can add a new row to my database, but then the binding won't work and the boxes aren't checked when loading the grid,
It seems like it should work, and I do not know where else to look. Any ideas? Thanks.
You need to use boolean, instead of bool.
IsSpecial: { type: "boolean" },
IsCommand: { type: "boolean" }
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>
I have the following code:
$("#grid").kendoGrid({
dataSource: {
type: "odata",
data: scannedResult.targetList,
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "proccess",
title: "Contact Name",
width: 200
}, {
field: "status",
title: "status"
}, {
field: "comment",
title: "comment"
}]
});
creating a kendo simple grid. for detail here is my plunker.
now the field status can be 1 of 3 values: passed, failed, skipped. I would like that the statuscolumn will show an icon instead of the value. While the code for that is rather simple, i do not know how to make the column a custom column.
Is there a way to make a column a custom column?
You should use a template definition. Something like:
Define the template.
<script id="status-template" type="text/kendo-templ">
# if (data.status === 1) { #
<span>Status1</span>
# } else if (data.status === 2) { #
<span>Status 2</span>
# } else { #
<span>Status 3</span>
# } #
</script>
Reference the template from the column definition
columns: [{
field: "proccess",
title: "Contact Name",
width: 200
}, {
field: "status",
title: "status",
template: $("#status-template").html()
}, {
field: "comment",
title: "comment"
}]
See it running here: http://jsfiddle.net/OnaBai/5x8wt0f7/
Obviously, the template can emit any HTML code, it might be links, images...
This has already been answered, but I want to show how I'd write this if people are confused when linking to jQuery selector.
// Custom Template that takes in entire Row object
function statusTemplate(dataRow) {
return `<span class="label label-${dataRow.status.toLowerCase()}">${dataRow.status}</span>`;
}
// Column definitions for grid
columns: [{
field: "proccess",
title: "Contact Name",
width: 200
}, {
field: "status",
title: "status",
template: statusTemplate
}, {
field: "comment",
title: "comment"
}]
http://jsfiddle.net/dentedio/hdokxme9/1/