We Keep Coding

Ext Js. Several values in dataindex

I got values in JSON and want to add several values in dataindex. How I can do this?
This works perfectly
columns: [
{
header: "Records",
dataIndex: time,
sortable: true,
},
];
But this example doesn't work
columns: [
{
header: "Records",
dataIndex: time + value + value1,
sortable: true,
},
];

Column property dataIndex should be a string that is the name of the field in the model definition, see documentation. To add different values from the model and display the result in a grid column, either use a calculated field and put the calculated field's name to dataIndex, or create a custom renderer function for the column and add the values there.

getData does not reflect changes made on the Tabulator table

I am new to JavaScript and Tabulator, I am stuck at this place, your help is appreciated.
I have loaded the data on the tabulator table and making few changes to it (add new column, deleting column etc.), these changes are reflected on the table but when I use table.getData() updated data is not reflected (old data is reflected). I need this to use some other places. Where am I going wrong?
Here is the sample code.
tabulatorTable = new Tabulator("#dfTable", {
selectable:true,
data:dataJson,
layout:"fitColumns", //fit columns to width of table
responsiveLayout:"hide", //hide columns that dont fit on the table
tooltips:true, //show tool tips on cells
addRowPos:"top", //when adding a new row, add it to the top of
//table
history:true, //allow undo and redo actions on the table
pagination:"local", //paginate the data
paginationSize:20,
movableColumns:true, //allow column order to be changed
resizableRows:true, //allow row order to be changed
columns:[
{title:"YearsExperience", field:"YearsExperience", editor:"number"},
{title:"Salary", field:"Salary", sorter:"number"}
]
});
tabulatorTable.addColumn({formatter:"rownum", title:"id"}); **// Adding new column to the table**
console.log(tabulatorTable.getData()); **// Does not reflect the newly added column**
Expected Json file to contain added column data (title - "id")

You can't modify data just by adding a column to the grid. Additionally, the column you added is a "rownum" formatter and is not bound to a field, so what key would it know to add? You will need to explicitly modify the data on the table.
See here: http://tabulator.info/docs/4.2/update

Solved it see snippet
tabulatorTable.addColumn({
formatter: "rownum",
field: "id",
title: "id"
});
const dataJson = [{
'YearsExperience': 2,
'Salary': 40000
},
{
'YearsExperience': 3,
'Salary': 50000
},
]
const tabulatorTable = new Tabulator("#dfTable", {
selectable: true,
data: dataJson,
layout: "fitColumns", //fit columns to width of table
responsiveLayout: "hide", //hide columns that dont fit on the table
tooltips: true, //show tool tips on cells
addRowPos: "top", //when adding a new row, add it to the top of
//table
history: true, //allow undo and redo actions on the table
pagination: "local", //paginate the data
paginationSize: 20,
movableColumns: true, //allow column order to be changed
resizableRows: true, //allow row order to be changed
columns: [{
title: "YearsExperience",
field: "YearsExperience",
editor: "number"
},
{
title: "Salary",
field: "Salary",
sorter: "number"
}
]
});
tabulatorTable.addColumn({
formatter: "rownum",
field: "id",
title: "id"
}); // Adding new column to the table**
console.log(tabulatorTable.getData()); // Does not reflect the newly added column**
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/js/tabulator.min.js"></script>
<div id="dfTable"></div>

How to apply Phone Number Mask in the Kendo grid filter Text box using angularjs?

I have the Phone number kendo grid column having the US format (999)-999-9999, It display with format in the column grid search with column filer it does't get the records because of the format applied.

At Last i found the solution for my above question related with kendo grid column search filter applying the phone number mask to search exact record to fetch in the search results.
columns: [
{
field: "PhoneNumber", title: "Phone#", width: 150, filterable: {
cell: {
template: function (args) {
args.element.kendoMaskedTextBox({
mask: "(999)-000-0000"
});
},
showOperators: false
}
}
},
{
field: "FaxNumber", title: "Fax#", width: 150, filterable: {
cell: {
template: function (args) {
args.element.kendoMaskedTextBox({
mask: "(999)-000-0000"
});
},
showOperators: false
}
}
}
]
In the above code snippet with this mask search filter shows the exact search record which filter operator "IsEqualTo" applied for masked filter. And we need to hide the additional operator search in the column grid using "showOperator" turned as "false".

Kendo UI Grid column headerTemplate function does not get access to the column definition

I'm trying to use the columns.headerTemplate feature of a Kendo UI Grid to customise the column header. You use this feature as shown below and as demonstrated by this example I created. Normally when using Kendo UI templates, the widget will pass the entity into template function so you can use the various properties to customise the html to be rendered.
Debugging the Kendo UI Grid code I can see that in the _headerCellText method the call to the template function passes in an empty object rather than the column even though column object is in scope.
text = kendo.template(template, settings)({});
Is there another approach I can take before resorting to custom column header templates for each column or worse - jQuery manipulation of the widget rendered DOM?
Is there a good reason for deviating from the common template pattern in the framework for this use case?
// Example kendoGrid use of column.headerTemplate
var templateFunction = function(shouldBeColumn) {
// shouldBeColumn is an empty object rather than the column object
return "Useless object:" + kendo.stringify(shouldBeColumn);
};
$("#grid").kendoGrid({
dataSource: {
data: products,
pageSize: 20
},
height: 550,
scrollable: true,
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", headerTemplate: plainTemplate },
{ field: "UnitsInStock", title: "Units In Stock", headerTemplate: templateFunction }
]
});

RE: "Is there another approach I can take before resorting to custom column header templates for each column or worse - jQuery manipulation of the widget rendered DOM?"
Invoke a wrapper function that returns a function, thus:
function createHeaderTemplate(columnName) {
return function() {
return "Custom: " + columnName;
};
}
...
columns: [
{ field: 'field', headerTemplate: createHeaderTemplate('My Field') },
{ field: 'field2', headerTemplate: createHeaderTemplate('My 2nd Field') }
]

display pager depending upon the number of records

I am using kendo grid.I have defined like,
$("#grid").kendoGrid({
dataSource:datasource,
pageable: true,
columns: [
{ field: "ProductId", title: "ProductId" },
{ field: "ProductType", title: "ProductType" },
{ field: "Name", title: "Name" },
{ field: "Created", title: "Created" }
],
});
});
I am able to display pager in my grid.but what I want is If the records in the grid is more than 20,Then only I want to display pager ,else don't want to display pager ,can u tell me how to do this?

Basically this is not supported. You can try to work-around it with some JavaScript. For example the following script after initializing the Grid should achieve similar behavior:
$(function(){
if($('#gridName').data().kendoGrid.dataSource.total()>20){
$('#gridName .k-grid-pager').hide();
}
})