What is the best approach to implement:-
Filter column in kendogrid based on idcolumn(key) in datasource.
The id column is not visible in kendogrid however filter must be applied based on the value
One possible solution is displaying the column but hiding the value. Not sure if this is very user-friendly (how will the user know which values to filter). If this is something doable for you, you can define a template for the id column that is empty.
Example based on your dojo.
var ds = new kendo.data.DataSource({
data: [
{ name: "Jane Doe", age: 30, id: 1 },
{ name: "John Doe", age: 33, id: 2 }
],
filter: [
// omit all items, which id is equal to 1"
{ field: "id", operator: "eq", value: 1 }
]
});
$("#grid").kendoGrid({
columns: [
{ field: "name", filterable: { multi: true } },
{ field: "id", template: "" },
{ field: "age", filterable: { multi: true } }
],
dataSource: ds,
filterable: true
});
var ds = new kendo.data.DataSource({
data: [
{ name: "Jane Doe", age: 30, id: 1 },
{ name: "John Doe", age: 33, id: 2}
],
filter: [
// omit all items, which id is lesser than 10"
{ field: "id", operator: "eq", value: 1 }
]
});
$("#grid").kendoGrid({
columns: [
{ field: "id", template: "", filterable: { multi: true }, width: 50 },
{ field: "name",filterable:{ multi: true} },
{ field: "age" ,filterable:{ multi: true} }
],
dataSource: ds,
filterable: true
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<div id="grid"></div>
Related
Is it possible to add a column to the kendo ui grid by clicking on a buutton? I have tried to add it but this column doesn't initialased in the grid and I have no any data from it. How to add a col to schema dynamically? Mabye I should somehow reinitialize it?
I want to add empty column only with the header and its name and column.field name, than to edit it in other rows. I never know beforehand what columns it will be and how much. They should be dynamic. And after adding the col new row should be with it.
The most problem is to add field to grid.dataSource.schema.model.fields.
let gridProducts = $('#gridProducts').kendoGrid({
dataSource: new kendo.data.DataSource({
data: e.event.products,
autoSync: true,
schema: {
model: {
id: "productID",
fields: {
productName: {
defaultValue: productDefault.products[0].productName,
validation: {
required: true
},
type: "string"
},
productCategory: {
defaultValue: productDefault.products[0].productCategory
},
productDiscount: {
defaultValue: productDefault.products[0].productDiscount,
type: "array"
}
}
}
}
}),
dataType: "object",
pageable: false,
toolbar: ["create"],
columns: [{
field: "productID",
title: "id"
},
{
field: "productName",
title: "Name"
},
{
field: "productCategory",
title: "Category",
template: "1",
editor: productCategoryDropDownEditor,
},
{
field: "productDiscount",
title: "Discount"
},
{
command: "destroy",
title: "x",
width: 29
},
],
editable: true,
sortable: true,
resizable: true
});
$("#addPrice").click(function() {
addPriceDialog.data("kendoDialog").open();
});
addPriceDialog.kendoDialog({
width: "450px",
title: "Add price",
closable: true,
modal: true,
actions: [{
text: 'Cancel',
action: function() {
return false;
},
},
{
text: 'Ок',
primary: true,
action: function() {
let name = $("#priceName ").val();
let type = $("#priceType").val();
let val = $("#priceValue").val();
let price = $("#price").val();
let grid = $("#gridProduct").data("kendoGrid");
let columns = grid.columns;
let newCol = {
title: "Price -" + name,
field: "price" + type + [columns.length],
format: "",
};
$("#gridTicket").data("kendoGrid").columns[(columns.length)] = newCol;
return true;
},
}
]
});
You can use setOptions to redefine the columns of the grid.
See the snippet for a demo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<button onclick="addColumn()">Add Column</button>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
function addColumn() {
grid.setOptions({
columns: grid.columns.concat([
{ field: "test" }
])
});
}
</script>
</body>
</html>
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.
I am using KendoUI - Grid component
How can I convert this into Kendo Grid:
For Eg:
I have created kendo grid (table) by using local data. As soon as I click on "Generate chart" button, above table's filter data should create the Kendo pie chart like below...
As I am new to Kendo, can somebody please suggest me the answer?
Code:
var localData = [
{
Id: 1,
userName: "John",
game: "A",
difficultyLevel: "Easy",
startTime: "25-05-2017",
endTime: "26-05-2017",
score: "210"
},
{
Id: 2,
userName: "Sam",
game: "B",
difficultyLevel: "Hard",
startTime: "04-11-2016",
endTime: "01-12-2016",
score: "4800"
},
];
var dataSource = new kendo.data.DataSource({
data: localData,
schema: {
model: {
fields: {
Id: {
type: "number"
},
userName: {
type: "string"
},
userName: {
type: "string"
},
difficultyLevel: {
type: "string"
},
startTime: {
type: "string"
},
endTime: {
type: "string"
},
score: {
type: "number"
},
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 300,
sortable: true,
filterable: false,
groupable: true,
pageable: true,
columns: [{
field: "Id",
title: "Id",
filterable: true
}, {
field: "userName",
title: "userName"
}, {
field: "game",
title: "game"
}, {
field: "difficultyLevel",
title: "difficultyLevel"
}, {
field: "startTime",
title: "startTime"
}, {
field: "endTime",
title: "endTime"
}, {
field: "score",
title: "score"
}]
});
JsFiddle
You need to prepare your data to the chart's format. Something like:
$chartContainer.kendoChart({
dataSource: {
data: localData,
schema: {
parse: function(data) {
return data.map(x => {
return {
value: Number(x.score),
category: x.userName
}
});
}
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
template: "#= category #: #= value #"
}
});
Updated Fiddle
The Filter basically works fine but,
The select does not seem to fire the first selection
this happens every time the filter is reset as well.
I meddled with it for two days now...
here is the Fiddle
<script src="../content/shared/js/products.js"></script>
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: {
mode: "row"
},
pageable: {
input: true,
numeric: false
},
columns: [
{
field: "ProductName",
title: "Product Name",
filterable: {
cell: {
operator: "contains",
showOperators: false
}
}
}, {
field: "Discontinued", title: "Discontinued",
filterable: {
mode: "row",
cell: {
showOperators: false,
template: function (args) {
args.element.kendoDropDownList({
autoBind:false,
dataTextField: "text",
dataValueField: "value",
dataSource: new kendo.data.DataSource({
data: [{ text: "Yes", value: "true" },
{ text: "No", value: "false" }]
}),
index: 0,
optionLabel: {
text: "Filter",
value: ""
},
valuePrimitive: true
})
}
}
}
}
]
});
});
</script>
Kendo UI 2015 Q1 has a lot of bug on it, especially on dropdown family widget like autocomplete, multiselect, dropdown, etc..
Change your kendo library to 2014 or previous version will make it works fine,
check this dojo
I refresh the kendo grid for every 10 seconds, I used following code and I used the kendo.all.min.js
$(document).ready(function () {
loadData();
intervalManager(true, TableStatus, 10000);
});
var TableStatus = function () {
loadData();
}
var refreshorderplacedgrid;
function intervalManager(flag, animate, time) {
if (flag)
refreshorderplacedgrid = setInterval(animate, time);
else
clearInterval(refreshorderplacedgrid);
}
function loadData() {
var grid = $("#grid").kendoGrid({
dataSource: {
data: [
{ ID: '1001', FirstName: 'Alphy', LastName: 'LastName', category: 'A', Markable: true },
{ ID: '1002', FirstName: 'Betty', LastName: 'LastName', category: 'B', Markable: true}],
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" }
}
}
},
sort: {
field: "FirstName",
dir: "asc"
},
pageSize: 10
},
scrollable: true,
sortable: true,
selectable: true,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{ template: kendo.template($("#isCancel-template").html()) }
]
}).data("kendoGrid");
}
This code gives me the output like following screenshot in system chrome,
But in mobile [All devices]
It appends with the old grid, instead of rebinding like following screenshot
I dont know what is problem here, I have googled and used $("#grid").data("kendoGrid").refresh(); this code too. Nothing happend, Any help will be highly appreciable.
Thanks,
Guna
#gitsitgo 's comment, I changed the code as following way, for avoid the re initialization of the grid, and now its working fine.
var myDataSource = new kendo.data.DataSource({
data: [
{ ID: '1001', FirstName: 'Alphy', LastName: 'LastName', category: 'A', Markable: true },
{ ID: '1002', FirstName: 'Betty', LastName: 'LastName', category: 'B', Markable: true },
{ ID: '1003', FirstName: 'Betty', LastName: 'LastName', category: 'B', Markable: true}],
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" }
}
}
},
sort: {
field: "FirstName",
dir: "asc"
},
pageSize: 10
});
$(document).ready(function () {
initGrid();
loadData();
intervalManager(true, TableStatus, 10000);
});
var TableStatus = function () {
loadData();
}
var refreshorderplacedgrid;
function intervalManager(flag, animate, time) {
if (flag)
refreshorderplacedgrid = setInterval(animate, time);
else
clearInterval(refreshorderplacedgrid);
}
function loadData() {
$("#grid").data("kendoGrid").setDataSource(myDataSource);
$("#grid").data("kendoGrid").refresh();
}
function initGrid() {
var grid = $("#grid").kendoGrid({
dataSource: myDataSource,
scrollable: true,
sortable: true,
selectable: true,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{ template: kendo.template($("#isCancel-template").html()) }
]
}).data("kendoGrid");
}
Thanks,
Guna