In kendo ui grid how can i change the background color? I've tried to set the template for the column but when the grid is visualized, it's empty without any color.
I have this code:
$scope.thingsOptions = {
sortable: "true",
scrollable: "true",
columns: [
{ field: "Colore", title: "Colore", width: "160px", template: "<div><span style='background-color:red'></span></div>" }
]
};
How can i apply a template to color the background of the cell
how to add conditional cell background?
what it does is: it builds a text row template from all parameters if there is no row template given.
it is possible to add template text in most of the parameters like:
...
//},
columns : [
{
title : 'Questions Translated',
attributes:{ 'style':"#=questions!==questionsMax?'background-color: red; color:white;':''#" },
field : "questions",
width: 140
},
...
Your code is essentially fine. You can do it as you are doing but the you are not seeing it because the span and the div are empty so the element has 0px width and you cannot see it.
Try doing:
$scope.thingsOptions = {
sortable: "true",
scrollable: "true",
columns: [
{
field: "Colore",
title: "Colore",
width: "160px",
template: "<div><span style='background-color:red'>This is a test</span></div>"
}
]
};
or
$scope.thingsOptions = {
sortable: "true",
scrollable: "true",
columns: [
{
field: "Colore",
title: "Colore",
width: "160px",
template: "<div style='background-color:red'> </div>"
}
]
};
or even:
$scope.thingsOptions = {
sortable: "true",
scrollable: "true",
columns: [
{
field: "Colore",
title: "Colore",
width: "160px",
template: "<span style='float: left; width: 100%; background-color:red'> </div>"
}
]
};
It is important to note that the content of the span and/or div are not empty: they contain a .
BUT if you want it colored and no padding / margin, then you can use:
{
field: "Colore",
title: "Colore",
width: "160px",
attributes: {
style: "background-color: red"
}
}
If you want to color the whole column, you can add attributes property in the column specification.
For example:
columns: [
{
field: "Colore",
title: "Colore",
width: "160px",
attributes: {
"class": "weekend"
}
}
]
And in your .css file you specify the weekend class as:
.weekend{
background-color: #F7DCAA;
}
More info here
You can use the [footerStyle] and [headerStyle] attributes to change the grid color, for example
<kendo-grid [data]="gridData">
<kendo-grid-column
field="ContactName"
title="Contact Name"
[width]="150"
[headerStyle]="{'background-color': '#666','color': '#fff','line-height': '1em'}"
[style]="{'background-color': '#888','color': '#fff'}"
[footerStyle]="{'background-color': '#888','color': '#fff'}"
>
<ng-template kendoGridFooterTemplate>Contacts: 10</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="CompanyName"
title="Company Name"
[headerStyle]="{'background-color': '#666','color': '#fff','line-height': '1em'}"
>
</kendo-grid-column>
<kendo-grid-column
field="City"
title="City"
[headerStyle]="{'background-color': '#666','color': '#fff','line-height': '1em'}"
>
</kendo-grid-column>
</kendo-grid>
Related
I am playing around with the KendoUI AngularJS Grid detail template.
I would like to be able to update a panel based on a selected row in the detail template grid.
I have correctly wired up the on change event to select a value from the detail template grid. But when I try to update a variable on the $scope object the value remains the same (the default value).
What is causing the variable on the #scope object not to update?
<div id="example">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions">
<div k-detail-template>
<kendo-tabstrip>
<ul>
<li class="k-state-active">Orders</li>
<li>Contact information</li>
</ul>
<div>
<div kendo-grid k-options="detailGridOptions(dataItem)"></div>
</div>
<div>
<ul class="contact-info-form">
<li><label>Country:</label> <input class="k-textbox" ng-model="dataItem.Country" /></li>
<li><label>City:</label> <input class="k-textbox" ng-model="dataItem.City" /></li>
<li><label>Address:</label> {{dataItem.Address}}</li>
<li><label>Home phone:</label> {{dataItem.HomePhone}}</li>
</ul>
</div>
</kendo-tabstrip>
</div>
</kendo-grid>
<div class="panel panel-default">
<div class="panel-heading">Content</div>
<div class="panel-body">
{{content}}
</div>
</div>
</div>
<script>
angular.module("app", [ "kendo.directives" ])
.controller("MyCtrl", function ($scope) {
$scope.content = 'test';
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: true,
selectable: true,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
},{
field: "Country",
width: "120px"
},{
field: "City",
width: "120px"
},{
field: "Title"
}]
};
$scope.detailGridOptions = function(dataItem) {
return {
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
id: "OrderID"
}
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
},
scrollable: false,
sortable: true,
selectable: true,
change: onChange,
pageable: true,
columns: [
{ field: "OrderID", title:"ID", width: "56px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "190px" }
]
};
};
function onChange(arg) {
console.log("The selected product id: [" + this.dataItem($(this.select()[0]).closest("tr")).id + "]");
$scope.content = this.dataItem($(this.select()[0]).closest("tr")).id;
}
})
I have tried using an inline Kendo provided on change function like this:
<div kendo-grid k-options="detailGridOptions(dataItem)" k-on-change="handleChange(data, dataItem, columns)"></div>
But it doesn't work correctly as the skope of data etc is the parent grid.
I figured out how to fix the issue
I changed selectable: true to selectable: "row".
I also added k-on-change="handleChange(data) to the child and parent grid and handle the change event with the following function on $scope:
$scope.handleChange = function (data) {
$scope.data = data;
};
It is much cleaner then the original approach I took and allows me to access the OrderID like this: {{data.OrderID}}
I want to reference to the object of my child grid and refresh the child grid with a new ID in the filter.
When I reference to the child grid of the Kendo-Grid I get an undefined object.
HTML
<div kendo-grid="customerGrid" k-rebind="mainGridOptions" options="mainGridOptions" k-on-filter-menu-init="filterInit(kendoEvent)">
<div k-detail-template>
<div id="tabstrip" kendo-tab-strip="tabstrip">
<ul>
<li class="k-state-active">СЧЕТА КЛИЕНТА</li>
<li ng-disabled="dis" ng-click="loadDetailAcc()">Полная информация по счету</li>
<li ng-disabled="dis" ng-click="loadDetailGrid()">Просмотр событий по счету</li>
</ul>
<div>
<div>
<div kendo-grid="detailGrid" k-options="detailGridOptios"></div>
</div>
JAVASCRIPT/ANGULARJS
$scope.loadDetailGrid = function () {
console.log($scope.detailGrid);// undefined
$scope.detailGrid.dataSource.read(); //error
};
$scope.detailGridOptios = {
dataSource: {
transport: {
read: '/api/HomeApi/GetAccountEvent',
dataType: "json"
},
pageSize: 3,
filter: { field: "UniqueAccontCode", operator: "eq", value: id }
},
autoBind: false,
height: 180,
pageable: true,
columns: [
{
field: "IDUser",
title: "Идентификатор пользователя",
width: "120px"
},
{
field: "UniqueAccontCode",
title: "Номер счета",
width: "120px"
}, {
field: "LastActData",
title: "Дата последнего действия",
width: "120px"
}, {
field: "Text",
title: "Текст",
width: "120px"
}
]
};
You just need to add : $scope.detailGrid = "detailGrid"; in your Js file.. i think this will do the trick
Here's a jsfiddle with a sample kendo grid:
http://jsfiddle.net/owlstack/Sbb5Z/1619/
Here's where I set the kendo columns:
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
data: createRandomData(10),
schema: {
model: {
fields: {
FirstName: {
type: "string"
},
LastName: {
type: "string"
},
City: {
type: "string"
},
Title: {
type: "string"
},
BirthDate: {
type: "date"
},
Age: {
type: "number"
}
}
}
},
pageSize: 10
},
height: 500,
scrollable: true,
sortable: true,
selectable: true,
change: onChangeSelection,
filterable: true,
pageable: true,
columns: [{
field: "FirstName",
title: "First Name",
width: "100px",
}, {
field: "LastName",
title: "Last Name",
width: "100px",
}, {
field: "City",
width: "100px",
}, {
field: "Title",
width: "105px"
}, {
field: "BirthDate",
title: "Birth Date",
template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #',
width: "90px"
}, {
field: "Age",
width: "50px"
}]
}).data("kendoGrid");
applyTooltip();
});
I added individual widths to each of the columns. However, I would also like to set a max-width to each kendo grid column. Is it possible to set a max-width (not a set one for all columns but max-width for individual columns?)?
There is no property like max-width exposed for kendo grid. One of the round about solution will be to set Width of Column as autosize and then use template where you use css properties to maintain max width.
Following is the example. Not sure if you are looking for the same answer.
<style>.intro { max-width: 100px ;width: 20px ;background-color: yellow;</style>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://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: "ContactName",
title: "Contact Name",
template : '<span class=intro>#:ContactName#</span>'
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
I have JavaScript code that will help achieve this functionality. It provides a way for a (command) column to retain a fixed size.
On the one hand, it acts as a minimum size for a column, but if the grid were to increase in size, the original size is enforced. This allows for other grid cells to increase in size by a larger amount.
Check out this dojo that shows this code in action.
Note that all columns need to have a specified width (this effectively becomes a minimum width).
The browser resize event is used to trigger the size recalculation of the grids.
This function supports master/detail and grouping.
I have not considered column resizing at this point.
If you have any ideas for improvements then go for it!
.k-grid td
white-space: nowrap;
text-overflow: ellipsis;
max-width:150px;
}
YES....
You can set a textbox-style MAX WIDTH for column values in a Kendo Grid...and you can do a lot more too. However, you must do so by-hand using the grids Before Edit event.
FOR EXAMPLE:
// ELEMENTS
var $gridDiscipline = $('#gridDiscipline')
var grid = $gridDiscipline.kendoGrid();
// EVENTS
grid.bind('beforeEdit', beforeEdit);
// IMPLEMENTATION
function beforeEdit(e)
{
// Edit Master Row
// This event raises when ADD_NEW or EDIT is pressed
// Optionally, I add a slight timeout to ensure the MASTER ROW is "open"
// Obviously, the elements in your row will be different from mine
// As you will see...you can do all kinds of late-bound configuration practices here (whatever makes sense for you)
setTimeout(function () {
var $container = $('.k-master-row', e.sender.tbody);
// Elements
var $cmbContactEmployee = $container.find("#EmployeeId");
var $txtDisciplineName = $container.find("#DisciplineName");
var $txtTags = $container.find("#Tags");
// Instances
var cmbContactEmployee = $cmbContactEmployee.data('kendoComboBox');
// Configuration
cmbContactEmployee.dataSource.transport.options.read.data = function (e) {
var text = e.filter.filters[0].value;
return { searchText: text };
};
// If a DataAnnotation value exists...you can enforce it
var maxlength = $txtDisciplineName.attr('data-val-length-max');
if (maxlength) {
$txtDisciplineName.attr('maxlength', maxlength);
}
// Or you can set something outright
$txtTags.attr('maxlength', 100);
}, 500);
}
I have a KENDO Grid and the fields and columns in that are populated from a datasource which is intern populated from an action.
Now i want to bind a particular cell content in that grid to another controller action and pass that ID of the cell also. How do I accomplish this. Below is the code for my grid. I could find answers in kendo UI docs but they use HTML Helpers to achieve this. I want it in the same style as below. Let us take the readername as the cell content for which this binding is required. Anybody tried this before?
$("#eventsgrid").kendoGrid(
{
dataSource: eventsDataSource,
navigatable: true,
pageable:
{
input: true,
numeric: false
},
columns:[
{
field:"",width:"30px", template:'<input type="checkbox" id="selectevent"/>'
},
{
field:"CardNumber",width:"80px"
},
{
field: "Image", width: "45px", title: "Type", template: "<img src='/Content/Themes/Default/images/AlarmType.png' id='AlarmType'/>"
},
{
field: "Priority", width: "60px", title: "Priroty"
},
{
field: "Origin", title:"Event Time"
},
{
field:"Description", title:"Alarm Title"
},
{
field: "ReaderName", title: "Location"
},
{
field: "", title: "Actions and Interactions", width: "160px", template: '<input type="button" value="Acknowledge" onclick="CheckAck" id="Acknowledge" /><br/><a href="javascript:performActions()" >3 Actions</a>'
},
{
field: "Image", title: "More", width: "60px", template: "<img src='/Content/Themes/Default/images/Door.png' onclick='showDetails()' id='door' width='20' height='20'/><div id='cardholderdetails'></div>"
}
],
}).data("kendoGrid");
Now i have a function which calls a $.POST call with the parameters. This function is hooked to the click event of the button. Is there a different way to do this?
the grid do not display anything, this is the code in the javascript method
columns: [
{ field: "Dimension", title: "Mois", width: "130px" },
{ field: "Value", title: "Variation CA", width: "130px"},
{ field: "Value", title: "", width: "30px", template: '# if (Value >= 0 ) { # <img src="~/Images/uparrow.jpg" /> # } else # { <img src="~/Images/downarrow.jpg" #}#' }
]
});
I can' fix the problem, the grid do not display anything, any suggestions please? how can i display imaes in the column using the if condition