I put sparklines in the column usage, but it has only one row, how can I put all the rows in column usage?
I also put some of the Code relating to the usage column
jsfiddle code
columns: [{
{
field: "Usage",
title: "Usage",
template: '<span id="sparkline"style="line-height: 60px ; padding: 0 5px 0spx ; text-align: center" ></span>'
}, {
command: ["edit"],
title: " "
}],
editable: "popup",
});
thank you
The problem is that you use id in a template: id must be unique.
Change id by class
template: '<span class="sparkline"style="line-height: 60px ; padding: 0 5px 0spx ; text-align: center" ></span>'
and then in the initialization use:
$(".sparkline").kendoSparkline({...});
instead of:
$("#sparkline").kendoSparkline({});
See it here : http://jsfiddle.net/OnaBai/72KUP/embedded/result/
Related
I want to change background colors(say,red) of all cells in a column(say, Total Sale) where column value is more than x(say, 10)? How can this be achieved.
You can use formatter for total column.
{
name: "total",
index: "total",
formatter: function(cellvalue, options, rowObject){
if(cellvalue>10)
return '<span style="background-color: red; display: block; width: 100%; height: 100%; ">' + cellvalue + '</span>';
else
return cellvalue;
}
}
DEMO
I have an image in a grid. I would like the image to resize to fit into the grid column, and to be horizontally and vertically centered.
My jqgrid looks like:
name: "frontimageurl", sortable: false, width: 100, height: 50, align: "center", fixed: true,
formatter: function (cellvalue, options, rowobject) {
return "<img src='" + cellvalue + "'>";
My image looks like overlapping of image.
Kindly help me to acheive this.Thanks in advance.
I added a class,
"<img src='" + cellvalue + "' class= Image>";
CSS:
.Image
{
width: 300px;
height: 100px;
margin: 5px 10px 0px 0px;
}
This works perfect for me.
Kendo Grid columns is given as below. After doing zoom screen column is getting hide, I want to do wrap column. Can we do it by giving some propery on gridColumns. Please tell me. I am not able to find it. Here 'Your Occupation Details' is getting hide. Here are some more fields, I have given only three here.
gridColumns: [
{
title: 'FirstName',
field: 'FirstName',
width: '0', hidden: true
},
{
title: 'FirstName',
field: 'FirstName',
width: '250px'
},
{
title: 'Your Occupation Details',
field: 'OccupationDetails',
width: '100',
}]
Use headerAttributes to wrap long column names in the JS columns declaration as follows;
columns: [
{
title: 'Your Occupation Details',
field: 'OccupationDetails',
width: '100',
headerAttributes: { style: "white-space: normal"}
},
...
]
Or for strongly typed grids you can use HeaderHtmlAttributes in Columns as well.
columns.Bound(p => p.OccupationDetails).HeaderHtmlAttributes(
new { style = "white-space: normal" }
);
Further documentation can be found in the Telerik's official forum Header Wrapping / Height and How to wrap kendo grid column
You can set CSS properties of the Grid to enable column wrap.
.k-grid-header .k-header {
overflow: visible;
white-space: normal;
}
Take a look at this documentation for setting column header attributes.
http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.headerAttributes
This worked for me
.k-grid .k-grid-header .k-header .k-link {
height: auto;
}
and this
.k-grid .k-grid-header .k-header {
white-space: normal;
}
source: http://www.telerik.com/forums/header-wrapping-height
To wrap the header:
.k-grid .k-grid-header .k-header .k-link { height: auto; }
.k-grid .k-grid-header .k-header { white-space: normal; }
To wrap the rows:
td[role="gridcell"] { white-space: nowrap; }
<style>
.k-grid .k-grid-header .k-header .k-link {
overflow: visible !important; white-space: normal !important;
}
</style>
You can add this to your custom CSS if you need to the warp text of the column header of a specific grid. This worked for me.
#yourgrid .k-grid-header .k-header .k-link {
white-space: normal !important;
}
You can do it as:
k-grid .k-grid-header .k-header .k-link {
height: auto;
word-break:break-all !important;
word-wrap:break-word !important;
}
.k-grid .k-grid-header .k-header {
white-space: normal;
}
Works Perfect for me.
Add the following css to you code, it will be applied to all grid columns and you won't need to add style attribute to individual grid column.
<style>
.k-grid td {
word-break: break-all !important;
word-wrap: break-word !important;
}
</style>
I'm using kendi ui grid and have two questions:
Lets say each item in my collection is as follows:
{ id: "1",
properties: {
color: red,
width: 100 }
}
How do I set a column field to be "properties.color" or "properties.width"?
How do I combine two fields in the same column. If I want color and width to be in the same column?
Using a template in your column definition, you can refer to any property on your data item; so you could do something like this to display both values:
{
field: "properties",
template: "<span style='display: inline-block; width: 80%; height: 100%; background-color: #= properties.color #'></span><span> #= properties.width #</span>"
}
(demo)
If you want it to be editable, you'll need to create the editor manually.
I am trying to show a KendoUI Chart inside a DIV and looks what the LOG says:
Invalid negative value for attribute width="-10px"
This is the code:
<div id="chart"></div>
This is the javascript:
$("#chart").kendoChart({
theme: "Metro",
legend: {
position: "right",
labels: {
font: "12px arial",
color: "white"
},
},
chartArea: {
background: "",
},
dataSource: data,
series: [
{
type: "pie",
field: "itemTotal",
categoryField: "itemNameAndTotal",
explodeField: "exploded"
}
],
tooltip: {
visible: true,
template: "${ category }"
}
});
This is the css:
#chart {
background: #f9a600;
border-radius: 5px;
margin: 10px 5px 5px 5px;
padding: 5px;
}
Thanks for the help!