Kendo footertemplate - kendo-ui

I have a kendo grid and I want to add a footerTemplate, but the value for the footerTemplate will be dynamic (other computations will be involved.) My question now, how to use the computed value to the footherTemplate?
Below is my sample code.
var computedValue= compute();
$("#grid").kendoGrid({
dataSource: {
data: setData(),
pageSize: 10
},
sortable: true,
scrollable: false,
pageable: true,
columns: [
{ field: "UnitPrice", title: "Unit Price",
footerTemplate: "Price : #=computedValue#"
},
{ field: "UnitsOnOrder", title: "Units On Order"},
{ field: "UnitsInStock", title: "Units In Stock"}
]
});
as you can see, the value for the footerTemplate is from a "var computedValue", now when I do that nothing happens. What is the correct way in order to show the value?
Thanks

Simply use a function for the footer template. Then, your function will be called each time the grid updates its contents.
footerTemplate: function(data) {
return "Price: " + compute();
}

You can use your function like this.
Kendo grid
$("#grid").kendoGrid({
dataSource: window.ds,
scrollable: false,
pageable: true,
editable: true,
columns: [
{ field: "Name", title: "Name" },
{ field: "Value", title: "Value",
footerTemplate: "Total:<span id='myId'> #=window.calc()#</span>" }
]
});
Javasript Function
<script>
function calc() {
// assume this to be dynamically determined
var field = "Value";
// assume this to be dynamically determined
var dataSource = window.ds;
// some custom calc logic
var newValue = 0;
$.each(dataSource.data(), function(index, model) {
newValue += model.get(field);
});
return newValue;
}
</script>
Refrence Link

Related

Kendo Grid : Blank space in the end when you resize(reduce) any column

I have a grid and when i resize (reduce) any column, there is a white space shows up in the end of the grid. I have checked with the Kendo official samples and it seems like in some samples the shown behavior is in their samples.
I tried setting up width for header, cell content etc.. but its still shows some UI issues and i have multiple grids and i need a generic fix.
If its not an issue and a behavior then somebody please have a look at this and explain how to fix it.
I have added a normal screen shot and resized screenshot.
normal
after resize
For testing it out, i have added a jsfiddle.,
http://jsfiddle.net/49bhz2sk/
html
<div class="panel panel-body">
<div id="fleetInfoGridDisplayDummy" class="" data-bind="autoHeightContainer:true"></div>
</div>
script
$("#fleetInfoGridDisplayDummy").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
navigatable: true,
selectable: true,
sortable: true,
reorderable: true,
resizable: true,
scrollable: { virtual: true },
columnMenu: true, // Needed to hide and show columns.
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
I have posted this in telerik forum and got a reply from the admin, here is how they suggested to resolve the issue. Posted here so that someone else can benefit from this.
Answer proposed by 'Drew B.' also works, i have seen that too in another post. The the code i posted is less cumbersome with minimal coding.
columnResize: function (e) {
// what is thead and tbody: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields
var grid = e.sender,
gridHeaderTable = grid.thead.parent(),
gridBodyTable = grid.tbody.parent();
// what is wrapper: https://docs.telerik.com/kendo-ui/api/javascript/ui/widget/fields/wrapper
// what is scrollbar(): https://docs.telerik.com/kendo-ui/api/javascript/kendo/fields/support
if (gridBodyTable.width() < grid.wrapper.width() - kendo.support.scrollbar()) {
// remove the width style from the last VISIBLE column's col element
gridHeaderTable.find("> colgroup > col").last().width("");
gridBodyTable.find("> colgroup > col").last().width("");
// remove the width property from the last VISIBLE column's object
// https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/fields/columns
grid.columns[grid.columns.length - 1].width = "";
// remove the Grid tables' pixel width
gridHeaderTable.width("");
gridBodyTable.width("");
}
},
According to various kendo sources, this is a mixture of observed normal behavior (2013), and unexpected behavior (2017). Kendo does provide a workaround for this issue, as I suspect it isn't necessarily kendo related but more an HTML/Table feature.
<style>
.k-grid {
width: 700px;
}
</style>
<div id="grid1"></div>
<script>
function getMasterColumnsWidth(tbl) {
var result = 0;
tbl.children("colgroup").find("col").not(":last").each(function (idx, element) {
result += parseInt($(element).outerWidth() || 0, 10);
});
return result;
}
function adjustLastColumn() {
var grid = $("#grid1").data("kendoGrid");
var contentDiv = grid.wrapper.children(".k-grid-content");
var masterHeaderTable = grid.thead.parent();
var masterBodyTable = contentDiv.children("table");
var gridDivWidth = contentDiv.width() - kendo.support.scrollbar();
masterHeaderTable.width("");
masterBodyTable.width("");
var headerWidth = getMasterColumnsWidth(masterHeaderTable),
lastHeaderColElement = grid.thead.parent().find("col").last(),
lastDataColElement = grid.tbody.parent().children("colgroup").find("col").last(),
delta = parseInt(gridDivWidth, 10) - parseInt(headerWidth, 10);
if (delta > 0) {
delta = Math.abs(delta);
lastHeaderColElement.width(delta);
lastDataColElement.width(delta);
} else {
lastHeaderColElement.width(0);
lastDataColElement.width(0);
}
contentDiv.scrollLeft(contentDiv.scrollLeft() - 1);
contentDiv.scrollLeft(contentDiv.scrollLeft() + 1);
}
$("#grid1").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 430,
pageable: true,
resizable: true,
columnResize: adjustLastColumn,
dataBound: adjustLastColumn,
columns: [{
field: "FirstName",
title: "First Name",
width: "100px"
}, {
field: "LastName",
title: "Last Name",
width: "150px"
}, {
field: "Country",
width: "100px"
}, {
field: "City",
width: "100px"
}, {
field: "Title",
width: "200px"
}, {
template: " "
}]
});
</script>

filter a datasource using a multiselect Kendo

I have a grid and a multiselect ,i want to filter the grid by the multiselect according to what i select ,and when i de select,the grid should be filterd accordingly,here is my grid:
$("#grid").kendoGrid({
dataSource: ds2,
height: 550,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ field: "name",
title: "Name",width:"50px"},
{ field: "Description",
title: "Description", width: "80px"
},
{ field: "WindSpeed",
title: "Wind Speed", width: "40px"
},
{ field: "RPM",
title: "RPM", width: "40px"
},
{ field: "Power",
title: "Power", width: "40px"
}
]
});
the data which bind the datasource:
var ds1 = new kendo.data.DataSource({
data: rsturn_f.EventNames
});
var ds2 = new kendo.data.DataSource({
data: rsturn_f.Data
});
and here is the multi select:
$("#evnts").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "Nme",
dataValueField: "Nme",
//autoBind: false,
select: onSelect,
deselect: onDeselect,
dataSource: ds1
});
by onselect i do this:
function onSelect(e) {
ds2.filter({ field: "Description", operator: "startswith", value: e.dataItem });
}
now if i want to filter on multiple value and un filter by removing the values from multiselect i dont know what should i do,any idea?
You have to use change event of the Multiselect. You can directly use a function in the operation attribute which is passed to the dataSource filter API.
function onChange(e) {
ds2.filter({ field: "Description", value: this.value(),
operator: function(currentValue, filterValues){
if(filterValues.length===0){
return true;
}
if(filterValues.indexOf(currentValue)!==-1){
return true;
}
return false;
}
});
}

KendoUI Grid Filter Posts Twice

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?

Event called when sorting data in kendo grid

I have the sample codes as follows:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: getData(),
height: 550,
sortable: true,
pageable: true,
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}]
});
function whenSorting(){
//// DO SOMETIME......
}
});
Now what I want is when I do sorting of any field the function "whenSorting" will be called. How to do that?
You have local sorting enabled "sortable: true," , for this you can capture it with databound event
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: getData(),
height: 550,
sortable: true,
pageable: true,
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}],
dataBound: function(e) {
whenSorting();
}
});
function whenSorting(){
//// DO SOMETIME......
}
});
IF you are using server sorting you can handle it in the server read .
Hope this helps
You may bind Change function and check whether sorting exist or not on every grid change
$('#grid').data('kendoGrid').dataSource.bind('change',function(){
// Get the grid object
var grid = $("#grid").data("kendoGrid");
// Get the datasource bound to the grid
var ds = grid.dataSource;
// Get current sorting
var sort = ds.sort();
// Display sorting fields and direction
if (sort) {
for (var i = 0; i < sort.length; i++) {
alert ("Field:" + sort[i].field + " direction:" + sort[i].dir);
}
} else {
alert("no sorting");
}
});
i hope this will help you
You could define a custom sort function for each of your columns and fire your whenSorting event from there, like this:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: getData(),
height: 550,
sortable: true,
pageable: true,
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200,
sortable { compare: whenSorting }
}, {
field: "ContactTitle",
title: "Contact Title",
sortable { compare: whenSorting }
}, {
field: "CompanyName",
title: "Company Name",
sortable { compare: whenSorting }
}]
});
function whenSorting(a, b){
//// DO SOMETIME......
return a == b
? 0
: a > b
? 1
: -1;
}
});
I was using jQuery to hide columns, I was not able to use kendo's hideColumn and showColumn functions. When sorting I would end up with a column I wanted hidden showing up after the sort event was fired. I found that using the above mentioned block then writing a function using jQuery to show or hide the column worked like I intended things to.
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: getData(),
height: 550,
sortable: true,
pageable: true,
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}],
dataBound: function(e) {
whenSorting();
}
});
function whenSorting(){
if(_checkBox.is(':checked'){
grid.find("table th").eq(4).show();
grid.children("div:eq(1)").find("table").find("tr").each(function () {
$(this).children("td:eq(4)").show();
});
}
});
Might want to check your formatting with this one too.

How to get selected row data of kendo detail grid

I am able to get the selected row in kendo grid ( master grid), But I am unable to get the selected row data in detail grid. Please provide me a code sample.
Thanks,
abhi
It is like for the main grid. Being childgrid the grid corresponding to details, do:
var row = childgrid.select();
var data = childgrid.dataItem(row);
console.log("row", row);
console.log("data", data);
Where I defined master grid as:
$("#grid").kendoGrid({
...
detailInit: detailInit,
...
});
And details grid is created using the following function when a row in master grid is expanded:
function detailInit(e) {
childgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: false,
selectable: true,
pageable: true,
columns:
[
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title: "Ship Country", width: "110px" },
{ field: "ShipAddress", title: "Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "200px" }
]
}).data("kendoGrid");
}
Running example here : http://jsfiddle.net/OnaBai/2M86L/ (When you click on Show button, its displays in the console of your browser the selected row and its data).
Here a somewhat simpler example on how to get to the data of the clicked row: http://jsfiddle.net/Corne/AQqMH/5/
This is the code where the magic happens:
change: function (arg) {
var selectedData = this.dataItem(this.select());
// selectedData now points to the selected dataSource item!
alert("Clicked id: " + selectedData.id);
}

Resources