Related
I am working with kendo grid and now I want to show a third column in kendo grid by subtracting two other fields. Is this possible in kendo grid. For eg: I want to show the field
"Allocated"= "TotalAmount-TotalDepriciated"
Code:
$("#grid").kendoGrid({
dataSource: DataSource,
autoBind: false,
scrollable: false,
sortable: {
allowUnsort: false
},
filterable: { mode: "row", style: "max-width:100px;" },
groupable: true,
pageable: {
refresh: true,
buttonCount: 5,
pageSizes: GlobalPagingDDL
},
//rowTemplate: kendo.template($("#template").html()),
dataBound: gridDataBound,
columns:
[
//field: "Name", title: "Licensee", width: 200, filterable: { cell: { showOperators: false, suggestionOperator: "contains" } }, template: "<a href='javascript:void(0)' onclick='RedirectToOrgDetail("#:LicenseeId#" , "#:PublicName#" )' >#:LicenseeName# </a>" },
{ field: "AgreementName", title: "Agreement Name", width: 200, filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } },
{
field: "Count", title: "Related Agreement", width: 150,
filterable: { cell: { showOperators: true, suggestionOperator: "contains" } }
},
{
field: "Status", title: "Status", width: 150, filterable: {
cell: {
template: function (args) {
args.element.kendoDropDownList({
dataSource: new kendo.data.DataSource({
data:
[
{ Status: "Approved" },
{ Status: "Pending" },
]
}),
dataTextField: "Status",
optionLabel: "All",
dataValueField: "Status",
valuePrimitive: true
});
}, showOperators: false, suggestionOperator: "contains"
}
}
},
{
field: "Type", title: "Type", width: 150, filterable: {
cell: {
template: function (args) {
args.element.kendoDropDownList({
dataSource: new kendo.data.DataSource({
data:
[
{ Type: "4" },
{ Type: "3" },
{ Type: "2" },
{ : "1" }
]
}),
dataTextField: "Type",
optionLabel: "All",
dataValueField: "Type",
valuePrimitive: true
});
}, showOperators: false, suggestionOperator: "contains"
}
}
},
{ field: "StartDate", title: "All Periods Start Date", width: 150, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: true } } },
{ field: "EndDate", title: "All Periods End Date", width: 150, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: true } } },
{ field: "TotalAmount", title: "Invoiced", format: "{0:c2}", footerTemplate: "$ #= sum # ", width: 200, filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } },
{ field: "TotalDepriciated", title: "Allocated", format: "{0:c2}", width: 200, footerTemplate: "$ #= sum # " },
{ field: "Allocated", title: "Balance", format: "{0:c2}", filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } },
//{ field: "LastUpdatedDate", title: "Last Updated Date", width: 150, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: true } } }
]
});
This code works for me. I hope that helps
{ field: "Allocated", title: "Allocated",
template: '<div>#= TotalAmount-TotalDepriciated#</div>'
}
I'am trying also to create a footerTemplate to show the sum of this result but i don't understand how ill achieve this for the moment
Please try with the below code snippet.
Below code adds a third column in kendo grid by subtracting two other fields
Allocated: function () {
return this.TotalAmount - this.TotalDepriciated;
},
.....
.....
{ field: "Allocated", title: "Allocated", template: "#= Allocated() #", footerTemplate: "<label id='sumAllocated'></label>" },
Full code:
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid">
</div>
<script>
var products = [{
ProductID: 1,
ProductName: "Chai",
TotalAmount: 100,
TotalDepriciated: 10,
}, {
ProductID: 2,
ProductName: "Chang",
TotalAmount: 100,
TotalDepriciated: 10,
}, {
ProductID: 3,
ProductName: "Aniseed Syrup",
TotalAmount: 100,
TotalDepriciated: 10,
}, {
ProductID: 4,
ProductName: "Chef Anton's Cajun Seasoning",
TotalAmount: 100,
TotalDepriciated: 10,
}, {
ProductID: 5,
ProductName: "Chef Anton's Gumbo Mix",
TotalAmount: 100,
TotalDepriciated: 30,
}];
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductName: {
type: "string"
},
TotalAmount: {
type: "number"
},
TotalDepriciated: {
type: "number"
}
},
Allocated: function () {
return this.TotalAmount - this.TotalDepriciated;
},
}
},
aggregate: [{ field: "TotalAmount", aggregate: "sum" },
{ field: "TotalDepriciated", aggregate: "sum" }],
pageSize: 10
},
sortable: true,
dataBound: function (e) {
var sumTotalAmount = parseFloat($("#sumTotalAmount").html());
var sumTotalDepriciated = parseFloat($("#sumTotalDepriciated").html());
$("#sumAllocated").html(sumTotalAmount - sumTotalDepriciated);
},
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
{ field: "ProductID", title: "ProductID" },
{ field: "ProductName", title: "ProductName" },
{ field: "TotalAmount", title: "TotalAmount", aggregates: ["sum"], footerTemplate: "<label id='sumTotalAmount'> #=sum# </label>" },
{ field: "TotalDepriciated", title: "TotalDepriciated", aggregates: ["sum"], footerTemplate: "<label id='sumTotalDepriciated'> #=sum# </label>" },
{ field: "Allocated", title: "Allocated", template: "#= Allocated() #", footerTemplate: "<label id='sumAllocated'></label>" },
{ command: ["edit", "destroy"], title: " " }
],
editable: "inline"
});
});
</script>
</body>
</html>
Let me know if any concern.
I have a requirement in which I have to show two dropdown list in the Filterable cell of kendo grid. These two dropdown lists would filter two different columns in the kendo grid.
One thought I had is having template which would be some kendo container like some panel probably, and then add two dropdowns to that container.
Is this even possible? If yes how to achieve this?
Here is my kendo grid definition.
ctrl.mainGridOptions = {
dataSource: ctrl.gridDataSource,
columns: [
{
title: 'Col1-Col2',
field: 'Col1',
width: 200,
template: kendo.template($("#col1").html()),
filterable: { cell: { template: ctrl.coonetemplate, showOperators: false } }
},
{
field: 'Col3',
width: 150,
title: 'Col3',
template: kendo.template($("#col3").html()),
filterable: { cell: { template: ctrl.colthreeTemplate, showOperators: false } }
}
]
}
Here is a mockup of what I want to achieve.
There are a few different parts to this.
First, if you want to have multiple filter controls for different pieces of data, you should define a column for each one. Then, put a template on the first column to have it display the data for two columns. Use the attributes option to set a colspan=2. Then, use the attributes option on the second columns to set style="display:none".
The second part is getting the dropdowns. I generally prefer to use the values option to accomplish this. The code below uses this for the OrderID column. The other alternative was the approach you were on, which is to use the cell template. The code below uses this on the ShipName column.
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "string" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
},
height: 550,
filterable: {
mode: "row"
},
pageable: true,
columns: [
{
field: "OrderID",
width: 150,
attributes: {
colspan: 2
},
values: [
{text: "10248", value: "one"},
{text:"10249", value: "two"}
],
template: '#:OrderID# (#:ShipName#)',
filterable: {
cell: {
operator: "eq",
showOperators: false
}
}
},
{
attributes: {
style: "display:none"
},
field: "ShipName",
width: 200,
title: "Ship Name",
filterable: {
cell: {
template: function(args) {
args.element.kendoDropDownList({
dataSource: args.dataSource,
dataTextField: "ShipName",
dataValueField: "ShipName",
valuePrimitive: true
});
},
operator: "eq",
showOperators: false
}
}
},
{
field: "Freight",
width: 255,
filterable: false
}]
});
});
</script>
</div>
Runnable Demo
Kendo Grid filterable cell with custom options column wise and by using this solution it also overwrites general filters settings in case specific column requirement. ASP.NET MVC C#.
columns.Bound(c => c.columnName)
.Format("{0}%")
.Filterable(ftb => ftb
.Cell(cell => cell.ShowOperators(true))
.Extra(false)
.Operators(op => op
.ForNumber(fn => fn
.Clear()
.IsEqualTo(CommonResource.GridFilter_IsEqualTo)
)
)
)
.Title("Column Name");
I am displaying Grid and using detailTemplate to expandRow. But when expand the row, I want to pass the row ID and get datasource and display another grid.
I think detailTemplate won't work in this case. How can I do this ?
Here is my Code
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: [
{ id: "1", name: "Andrew", age: "30" },
{ id: "2", name: "Robert", age: "29" },
{ id: "3", name: "Frank", age: "35" }
],
autoSync: true,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true, type: "number" },
name: { editable: false },
age: {
validation: { min: 0, required: true },
editable: true,
nullable: true,
type: "number"
}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
editable: "inline",
columns: [
{ field: "name",title: "Name" },
{ field: "age", title: "Age", width: "180px"},
{ command: ["edit"] }
],
detailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>"
});
});
Did you checked this demo from Kendo UI ?
http://demos.telerik.com/kendo-ui/grid/detailtemplate
Similar to your scenario, detail grid is created in detailInit function and data for detail grid is filtered for the current employee using e.data.EmployeeID
I have following column header in the grid (see image below):
I would like to ask, how can i translate "is true", "is false" strings?
Many Thanks for any advice.
Columns:
{
field :"active",
title : $translate.instant('ACTIVE'),
width:150,
filterable: {
cell: {
operator: "contains"
}
}
},
Model:
active: {
editable: true,
nullable: false,
type: "boolean"
},
You should define in your filterable the following messages:
filterable: {
mode: "row",
messages: {
isFalse: "es falso",
isTrue: "es verdadero"
}
},
See it in action in the following snippet:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: {
mode: "row",
messages: {
isFalse: "es falso",
isTrue: "es verdadero"
}
},
pageable: {
input: true,
numeric: false
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}" },
{ field: "Discontinued", template: "#= Discontinued ? 'verdadero' : 'falso' #" }
]
});
});
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="grid"></div>
Based on kendoDocs you should do it like this:
...
filterable: {
cell: {
operator: "contains"
},
messages: {
isTrue: $translate.instant('YES'),
isFalse: $translate.instant('NO')
}
}
I tried the following to add the placeholder attribute to the input field using the following code,
dataSource: {
...
schema: {
data: "storeEmployeeData",
total: "storeEmployeeDataCount",
model: {
id: "ID",
fields: {
Id: { type: "number", editable: false, nullable: true },
FirstName: { type: "string", nullable: true, editable: true, validation: { required: false } },
MiddleName: { type: "string", nullable: true, editable: true, validation: { required: false } },
LastName: { type: "string", nullable: true, editable: true, validation: { required: false } },
**Email: { type: "string", nullable: true, editable: true, placeholder: "(optional)", validation: { email: true, required: false } }
}
}
},
...
}
Also tried the following,
columns: [
{ field: "FirstName", title: "First Name", type: "string", width: "150px" },
{ field: "MiddleName", title: "Middle Name", type: "string", width: "150px" },
{ field: "LastName", title: "Last Name", type: "string", width: "150px" },
{ field: "Email", title: "Email", type: "string", width: "250px", sortable: false, placeholder: "(optional)" },
{ command: ["edit", "destroy"], title: " ", width: "200px" }
],
None of them yielded the result I was looking for i.e., having placeholder attribute placeholder="(optional)" added to the input field.
This is part of HTML5, if this feature already exists in Kendo UI Grid is it also compatible with IE 7 and IE 8 ?
Am I missing something? Any help is appreciated!
There is no placeholder option in the Kendo UI Model documentation; therefore, it is not supported directly. Reference: http://docs.kendoui.com/api/framework/model#configuration-Example. Maybe you meant to use defaultValue?
Alternatively, you could use the attributes option for the Kendo UI Grid configuration. Reference: http://docs.kendoui.com/api/web/grid#configuration-columns.attributes.
The placeholder attribute is only supported in IE 10 and above.
Update: (due to comments)
To give you an example, in order to add the placeholder attribute to the input element, you could use the editor option on the column.
columns: [
{ field: "Email", title: "Email", width: 250, sortable: false,
editor: function (container, options) {
var input = $("<input/>");
input.attr("name", options.field);
input.attr("placeholder", "(optional)");
input.appendTo(container);
}
}
]
If your looking for a place holder for when there are no records then,
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
noRecords: true,
dataSource: []
});
</script>
or
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
pageable: true,
noRecords: {
template: "No data available on current page. Current page is: #=this.dataSource.page()#"
},
dataSource: {
data: [{name: "John", age: 29}],
page: 2,
pageSize: 10
}
});
</script>