I have a kendo grid with datasource which have data string array.
I want use the option mode row and filter on fiel organizations but it doesn't work because it wait a string not a array.
The error is : "TypeError: (intermediate value).toLowerCase is not a function"
I have a exmaple here : https://dojo.telerik.com/#lgoubet/ETOXoFot
Here my code :
var organizations_arr = ['org1', 'org2', 'org3', 'org4'];
var data = [
{
Name: 'abc',
Organizations: ["org1, org4"]
},
{
Name: 'def',
Organizations:['org3']
}
];
function orgEditor(container, options) {
$("<select multiple='multiple' data-bind='value:Organizations'/>")
.appendTo(container)
.kendoMultiSelect({
dataSource: organizations_arr,
valuePrimitive: true,
value: options.model.Organizations
});
}
$("#grid").kendoGrid({
dataSource: {
data: data
},
filterable: {
mode: "row"
},
sortable: true,
editable: true,
columns: [{
field: "Name",
width: 200
}, {
field: "Organizations",
width: 150,
template: "#= Organizations.join(', ') #",
editor: orgEditor
}]
});
Do you have a solution ?
Thanks for your help
I have one kendo Grid where i need to append an anchor link and also wanted to have a feature to download that kendo grid values(includes Header) into excel.
$("#YourGridName").kendoGridExt({
toolbar: ["excel"],
excel: {
fileName: "Invoice Life Cycle Report.xlsx",
proxyURL: "#Url.Content("~/Plugin/Report/InvoiceAgingReport/GetInvoiceAgingReport")",
filterable: true
},
dataSource: reportData,
columns: [
{
field: "Invoice_Number", title: "Invoice Number", width: "120px", template: '<a onclick = "return ShowDetailedAgingReport(' + "'#= Invoice_Number#'" + ',' + "'#= SBU#'" + ')" href="\\#">#= Invoice_Number#</a>'
},
{
field: "SBU", title: "SBU", width: "120px"
},
{
field: "ScanningDays", title: "Days to Scanning", width: "120px"
},
{
field: "ScanningAndOracleDays", title: "Days between scanning & oracle entry", width: "120px"
},
{
field: "OracleAndAccountingDays", title: "Days between oracle entry & accounting", width: "120px"
},`enter code here`
{
field: "TOTAL", title: "Total travel Days", width: "150px"
}
],
editable: {
mode: "popup",
title: "Invoice Life Cycle Detailed Report",
window: { draggable: false },
},
noRecords: {
template: "No data available."
},
});
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 this grid with a custom multi-select filter. When I click the filter icon an AJAX method calls an API to grab filter values. The method call is defined in the DocType column.
Here is my grid builder function:
$("#attachmentsGrid").kendoGrid({
pageable: {
change: function() {
CH.RelatedItems.GridPager();
}
},
scrollable: false,
sortable: true,
dataSource: attachments,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to",
contains: "Contains",
}
}
},
columns:
[
{
title: "id",
field: "Id", //turns out this needs to be lower case
sortable: false,
filterable: false,
template: "<input name='cbCheckboxColumn' type='checkbox' onclick='CH.RelatedItems.ToggleAttachmentsByCheckboxColumn()' data-row='#: Id#' />",
headerTemplate: "<input id='cbCheckboxHeader' type='checkbox' onclick='CH.RelatedItems.ToggleAttachmentsByCheckboxHeader()'",
width: "18px",
},
{
title: "Exists?",
field: "IsAlreadyAttached",
type: "boolean",
sortable: false,
template: "<div style='text-align: center'>#: IsAlreadyAttached #</div>",
filterable: false,
width: "110px",
},
{
title: "Icon",
field: "DocType",
sortable: true,
template: "<div style='text-align: center'><img src='" + config.SPHostUrl + "/_layouts/images/#: DocIcon #' /></div>",
width: "60px",
filterable: {
ui: CH.RelatedItems.AttachmentsIconFilter,
extra: false,
},
},
{
title: "File Name",
field: "Name",
sortable: true,
filterable: false,
template: "<a href='#: Url#' target='_blank'>#: Name#</a>",
width: "650px",
},
{
title: "Modified",
field: "LastModifiedDateOnly",
template: "<span>#: LastModified#</span>",
sortable: true,
width: "250px",
filterable: {
ui: CH.RelatedItems.AttachmentsDateFilter,
extra: false
}
},
],
dataBound: CH.RelatedItems.PostGridDataBound
});
The AttachmentsIconFilter function is here:
pub.AttachmentsIconFilter = function (element) {
var menu = $(element).parent();
menu.find(".k-filter-help-text").text("Show document types:");
menu.find("[data-role=dropdownlist]").remove();
var multiSelect = element.kendoMultiSelect({
dataSource: {
transport: {
read: {
datatype: "jsonp",
url: config.WorkPaperViewRelativePath + "/_RelatedItemsPopup/GetAttachmentsUniqueDocIcons/" + config.SPQueryString
}
}
},
}).data("kendoMultiSelect");
menu.find("[type=submit]").on("click", { widget: multiSelect }, CH.RelatedItems.AttachmentsFilterByIcon);
}
When the AttachmentsIconFilter runs, the AJAX call get made twice:
Kendo Double GET
I thought that the property: filter: { extra: false } was supposed to prevent this double GET?
Also, when I select my filters and the grid make a new request to get the filtered records, it does a double POST. The function for the call to filter the grid is here:
pub.AttachmentsFilterByIcon = function (e) {
var icons = e.data.widget.value();
var filter = { logic: "or", filters: [] };
for (var i = 0; i < icons.length; i++)
{
filter.filters.push({ field: "DocIcon", operator: "Contains", value: icons[i].Contains });
}
$("#attachmentsGrid").data("kendoGrid").dataSource.filter(filter);
}
Any help here? What am I missing?
I'm trying to have a kendo grid column extremely thin, basically like a line. Reducing the width property below 10px or 10 doesn't seem to have any effect.
Here's what I'm doing:
let mainGridOptions = {
dataSource: myData,
columns: [{
field: "color",
title: " ",
width: '5px' // tried even without px, just 5
}]
};
Anyone know what's happening?
I am not able to reproduce it I please try with the below code snippet or look in this demo.
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: '5px'
}]
});
});
</script>
If you will set the column width to '5px' then you could not see anything into column because some default spacing(Margin/padding) applied to the columns.