I'm using showColumn and hideColumn to show and hide columns in a Kendo UI grid.
But, now with the addition of multi-column headers, I can only hide and show the top level headers.
Here's an example of the js:
$('#data-plan').click(function () {
$('#data-plan').find('i').toggleClass('show hidden');
var grid = $("#lpdatagrid").data("kendoGrid");
var col = 0;
if (grid.columns[col].hidden) {
grid.showColumn(+col);
} else {
grid.hideColumn(+col);
}
});
Using "0" shows/hides the first level column of the multi-column header. What are the column "numbers" for the second level headers that I can call with showColumn and hideColumn?
I apologize for poor code. I'm not a developer.
You might use the name of the field in the column that you want to show / hide. Assuming that you have a Grid that has a Country column, grouped under Location that is under Contact Info, something like:
columns: [
{
field: "CompanyName",
title: "Company Name"
},
{
title: "Contact Info",
columns: [
{
field: "ContactTitle",
title: "Contact Title"
},
{
field: "ContactName",
title: "Contact Name"
},
{
title: "Location",
columns: [
{ field: "Country" },
{ field: "City" }
]
},
{
field: "Phone",
title: "Phone"
}
]
}
]
Then you can use:
var grid = $("#grid").data("kendoGrid");
// Get the "Country" column that is
var col = grid.columns[1].columns[2].columns[0];
// Check if it is visible or hidden
if (col.hidden) {
grid.showColumn(col.field); // or directly grid.showColumn("Country");
} else {
grid.hideColumn(col.field); // or directly grid.hideColumn("Country");
}
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 300,
pageable: true,
columns: [
{
field: "CompanyName",
title: "Company Name"
},
{
title: "Contact Info",
columns: [
{
field: "ContactTitle",
title: "Contact Title"
},
{
field: "ContactName",
title: "Contact Name"
},
{
title: "Location",
columns: [
{ field: "Country" },
{ field: "City" }
]
},
{
field: "Phone",
title: "Phone"
}
]
}
]
});
$("#country").on("click", function() {
var grid = $("#grid").data("kendoGrid");
var col = grid.columns[1].columns[2].columns[0];
if (col.hidden) {
grid.showColumn(col.field);
} else {
grid.hideColumn(col.field);
}
});
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<button id="country" class="k-button">Toggle Country</button>
<div id="grid"></div>
Related
Using kendo grid edit event I want to disable field name and id during Edit mode. I manage to disable id by following this example here. But went I try to disable name seem it not working, any thought how to do this?
WORKING DEMO IN DOJO
$("#grid").kendoGrid({
columns: [
{ field: "id" },
{ field: "name" },
{ field: "age" },
{ command: "edit" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" },
"name": { type: "string" }
}
}
}
},
editable: "inline",
toolbar:["create"],
edit: function(e) {
if (!e.model.isNew()) {
var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");
numeric.enable(false);
//var x = e.container.find("input[name=name]").data("kendoTextBox");
//x.enable(false);
//$("input[name=name]").prop("disabled", true).addClass("k-state-disabled");
//$("input[name=name]").editable = false;
}
}
});
by using editable function i created this
function isEditable(e){
var dataSource = $("#grid").data("kendoGrid").dataSource;
return (e.id == null || e.id == '');
}
and add this into the grid > column
columns: [
{ field: "id", editable: isEditable },
{ field: "name", editable: isEditable },
{ field: "age" },
{ command: "edit" }
],
Full working demo is here
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.
i have this code:
$("#grid_detail").kendoGrid({
dataSource: {
data: orders
},
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
}
}
},
sortable: true,
columns: [
{
field: "Buyer",
title: "buyer",
width: "40"
},
{
field: "name",
title: "Article name",
width: "40"
},
{
field: "paid",
title: "Paid",
width: "20",
filterable: false
}
]
});
now, how can i filter on field buyer, but to use autocomplete, and to show all buyers that are in dataSource ?
I tried with this, on buyer filed, but still nothing.
filterable: function(element){
element.kendoAutoComplete({
dataSource: orders,
dataTextField: "buyer",
})
}
Thanks.
First, in the columns you say that the column name is Buyer but in that autocomplete you use buyer.
Said that, what you should do is generating the autocomplete in filterable.ui. So the column definition for buyer is:
{
field : "buyer",
title : "Buyer",
width : "40",
filterable: {
ui: function (element) {
element.kendoAutoComplete({
dataSource : orders,
dataTextField: "buyer"
})
}
}
},
First we specify a single filter criterion using the filterable->extra=false setting, and limit the filter operators for string columns to starts with, equal and not equal only. Then we define built-in date picker UI to filter the datetime column in the grid, and instantiate Kendo UI AutoComplete and DropDownList for the Title and City columns, respectively.
To create the dropdown filters, we assign javascript functions to the filterable->ui attributes of the corresponding columns.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/filter-menu-customization">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/people.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: createRandomData(50),
schema: {
model: {
fields: {
City: { type: "string" },
Title: { type: "string" },
BirthDate: { type: "date" }
}
}
},
pageSize: 15
},
height: 550,
scrollable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
pageable: true,
columns: [
{
title: "Name",
width: 160,
filterable: false,
template: "#=FirstName# #=LastName#"
},
{
field: "City",
width: 130,
filterable: {
ui: cityFilter
}
},
{
field: "Title",
filterable: {
ui: titleFilter
}
},
{
field: "BirthDate",
title: "Birth Date",
format: "{0:MM/dd/yyyy HH:mm tt}",
filterable: {
ui: "datetimepicker"
}
}
]
});
});
function titleFilter(element) {
element.kendoAutoComplete({
dataSource: titles
});
}
function cityFilter(element) {
element.kendoDropDownList({
dataSource: cities,
optionLabel: "--Select Value--"
});
}
</script>
</div>
</body>
</html>
How can I write this in javascript instead of using the MVC Wrapper?
#(Html.Kendo().Grid(Model.List)
.Name("grid")
.Columns(c => {
c.Bound(e => e.ID);
c.Bound(e => e.Nom).HeaderHtmlAttributes(new { colspan = 2 });
c.Bound(e => e.Nb).HeaderHtmlAttributes(new { style= "display:none;" });
})
)
I started with the following code to experiment, I know it is not an exact
match to the attributes mentioned above, but how can I set
HeaderHtmlAttributes and Headertemplate for columns with javascript for the Kendo grid?
$("div#kendogrid").kendoGrid({
dataSource: dataSource,
columns: [
{
field: "ID",
title: "Nr Id",
headerTemplate: "sample template text col 1",
width: 100
},
{
field: "Nom",
headerAttributes: {
"class": "myHeader",
style: "text-align: right"
},
width: 200
}
]
});
You are correct, HeaderHtmlAttributes is specified using columns.headerAttributes and the equivalent to your HeaderTemplate is columns.headerTemplate. See the links for documentation:
http://docs.kendoui.com/api/web/grid#columnsheaderattributes-object
http://docs.kendoui.com/api/web/grid#columnsheadertemplate-string
The translation of your original code would be:
$("#kendogrid").kendoGrid({
dataSource: dataSource,
columns : [
{
field: "ID"
},
{
field : "Nom",
headerAttributes: {
colspan: 2
}
},
{
field : "Nb",
headerAttributes: {
style: "display:none"
}
}
]
});
I'm using kendoTabStrip as is shown on KendoUI Page. In my case in each div I have rendered partial view. In a few of my partial views I have additionaly kendoGrid.
Problem
When I reload page in any tab and go to tab which contain kendoGrid then it do not work correctly. For example: I'm on tab#0 and go for tab#3 which contain kendoGrid with pagination, then pagination is not display. But when I reload it then pagination works fine.
What can I do to my Grids works inside TabStrip?
Any help would be appreciated.
UPDATE
My implementation of tabstrip
$("#tabStrip").kendoTabStrip({
animation: { open: { effects: false} },
select: function (e) {
document.location.hash = 'tab-' + $(e.item).index();
}
});
var tabStrip = $('#tabStrip').data('kendoTabStrip');
var tabId = 0;
var scheduledId = 0;
if (document.location.hash.match(/tab-/) == 'tab-') {
tabId = document.location.hash.substr(5);
}
if (document.location.hash.match(/scheduled-/) == 'scheduled-') {
tabId = 1;
scheduledId = document.location.hash.substr(11);
editSchedule('/admin/Course/Scheduled/' + scheduledId + '/Edit/' );
}
tabStrip.select(tabStrip.tabGroup.children('li').eq(tabId));
So I need it to make some rewrites from controller.
To fix this problem we must change :
$("#tabStrip").kendoTabStrip({
animation: { open: { effects: false} },
select: function (e) {
document.location.hash = 'tab-' + $(e.item).index();
}
});
for:
$("#tabStrip").kendoTabStrip({
animation: { open: { effects: false} },
select: function (e) {
document.location.hash = 'tab-' + $(e.item).index();
},
activate: function(e) {
$(e.contentElement).find('.k-state-active [data-role="grid"]').each(function() {
$(this).data("kendoGrid").refresh();
});
}
});
Event activate is 'Triggered just after a tab is being made visible, but before the end of the animation'. So we must refresh our grids then becouse js counts widths of hidden elements wrong.
I put together an example of Grids working inside of a TabStrip: http://jsfiddle.net/dpeaep/SJ85S/. Maybe, I am missing part of what you are asking in your question. If so, you can modify the jsfiddle to clarify what the problem is.
HTML
<div id="tabstrip">
<ul>
<li>Grid 1</li>
<li>Grid 2</li>
<li>Grid 3</li>
</ul>
<div><div id="grid1"></div></div>
<div><div id="grid2"></div></div>
<div><div id="grid3"></div></div>
</div>
Javascript
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.select(0);
$("#grid1").kendoGrid({
columns: [
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" }
],
dataSource: {
data: [
{ FirstName: "Joe", LastName: "Smith" },
{ FirstName: "Jane", LastName: "Smith" }
]
}
});
$("#grid2").kendoGrid({
columns: [
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" }
],
dataSource: {
data: [
{ FirstName: "Betty", LastName: "Lakna" },
{ FirstName: "Fumitaka", LastName: "Yamamoto" },
{ FirstName: "Fred", LastName: "Stevenson" }
]
}
});
$("#grid3").kendoGrid({
columns: [
{ field: "Title", title: "Title" },
{ field: "Year", title: "Year" }
],
dataSource: {
data: [
{ Title: "Lost in Domtar", Year: "2012" },
{ Title: "Evergreen", Year: "2012" },
{ Title: "Fields of Yellow", Year: "2010" },
{ Title: "Where the Whistle Blows", Year: "2008" }
]
}
});