I need to set a column of a kendo ui grid to multiline.
Right now the specific column has to much data in it, so its shortened by ...
Is there a possibility to make that column multiline?
You can set multi-line column in kendo ui grid by using following code snippet.
<style>
.breakWord20 {
word-break: break-all !important;
word-wrap: break-word !important;
vertical-align: top;
}
.k-grid-header .k-header {
overflow: visible !important;
white-space: normal !important;
}
</style>
......
......
columns: [
{
field: "ProductNameProductNameProductNameProductNameProductName", headerAttributes: {
"class": "breakWord20"
}
},
.......
.......
Full Code:-
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<style>
.breakWord20 {
word-break: break-all !important;
word-wrap: break-word !important;
vertical-align: top;
}
.k-grid-header .k-header {
overflow: visible !important;
white-space: normal !important;
}
</style>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" />
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.ui.core.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
<!--<script src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.timezones.min.js"></script>-->
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
var products = [{
ProductID: 1,
ProductNameProductNameProductNameProductNameProductName: "Chai",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "10 boxes x 20 bags",
UnitPrice: 18.0000,
UnitsInStock: 39,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false,
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
}
}, {
ProductID: 2,
ProductNameProductNameProductNameProductNameProductName: "Chang",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "24 - 12 oz bottles",
UnitPrice: 19.0000,
UnitsInStock: 17,
UnitsOnOrder: 40,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
}
}, {
ProductID: 3,
ProductNameProductNameProductNameProductNameProductName: "Aniseed Syrup",
SupplierID: 1,
CategoryID: 2,
QuantityPerUnit: "12 - 550 ml bottles",
UnitPrice: 10.0000,
UnitsInStock: 13,
UnitsOnOrder: 70,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
ProductID: 4,
ProductNameProductNameProductNameProductNameProductName: "Chef Anton's Cajun Seasoning",
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: "48 - 6 oz jars",
UnitPrice: 22.0000,
UnitsInStock: 53,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
ProductID: 5,
ProductNameProductNameProductNameProductNameProductName: "Chef Anton's Gumbo Mix",
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: "36 boxes",
UnitPrice: 21.3500,
UnitsInStock: 0,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: true,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}];
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { type: 'number' },
UnitsInStock: { type: 'number' },
ProductNameProductNameProductNameProductNameProductName: { type: 'string' },
QuantityPerUnit: { type: 'string' },
UnitPrice: { type: 'number' },
}
}
},
},
resizable: true,
columns: [
{
field: "ProductNameProductNameProductNameProductNameProductName", headerAttributes: {
"class": "breakWord20"
}
},
{ field: "UnitsInStock", title: "UnitsInStock" },
{ field: "QuantityPerUnit", title: "QuantityPerUnit" },
{ field: "UnitPrice", title: "UnitPrice" },
]
});
});
</script>
</body>
</html>
Let me know if any concern.
Yes you can! You can set the headerAttributes or attributes to specify the colspan in your columns definitions:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.headerAttributes
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.attributes
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.width
{
field: "Your Field",
title: "Your Title",
attributes: { "colspan": 2 },
headerAttributes: { "colspan": 2 }
}
Related
i want to show the data in total of 3 rows with the v-for loop
this is the way will be displayed
whats happening is if more data comes in 4th row will be created but i want the data to be displayed only in these 3 rows and on click the next button show the data. i have tried computed properties to send data in chunks but nothing works. Kindly put some light on it
backgrounds:[
{
route:'/events',
img:'/images/events.png',
caption:'Veranstaltungen'
},
{
route:'/',
img:'/images/bilder.png',
caption:'Bildergalerie'
},
{
id:103,
route:'companies',
img:'/images/markenbetriebe.png',
caption:'Vulkanland Markenbetriebe'
},
{
id:101,
route:'companies',
img:'/images/gastro.png',
caption:'Gastronomiebetriebe'
},
{
id:102,
route:'companies',
img:'/images/naechtigungen.png',
caption:'Nächtigung'
},
{
id:115,
img:'/images/buschenschank.png',
caption:'Buschenschenken'
},
{
route:'/',
img:'/images/sehenswuerdigkeit.png',
caption:'Sehenswürdigkeiten'
},
{
id:104,
route:'companies',
img:'/images/bauern.png',
caption:'Direktvermarkter'
},
{
id:106,
route:'companies',
img:'/images/touriteninfo.png',
caption:'Touristeninformation'
},
{
id:109,
route:'companies',
img:'/images/kulture.png',
caption:'Kulturhäuser'
},
{
id:107,
route:'companies',
img:'/images/sport.png',
caption:'Sport und Spiel'
},
{
id:113,
route:'companies',
img:'/images/handel.png',
caption:'Handelsbetriebe'
},
{
id:114,
route:'companies',
img:'/images/gewerbebetriebe.png',
caption:'Gewerbebetriebe'
},
{
route: '/',
img:'/images/Button-1.png',
caption:'Schaukästen'
},
]
This is the code for a naive and quick 3 elements per row display
<template>
<section class="three-elements-per-row">
<div
v-for="background in backgrounds"
:key="background.route"
class="element"
>
{{ background.caption }}
</div>
</section>
</template>
<script>
export default {
data() {
return {
backgrounds: [
{
route: '/events',
img: '/images/events.png',
caption: 'Veranstaltungen',
},
{
route: '/',
img: '/images/bilder.png',
caption: 'Bildergalerie',
},
{
id: 103,
route: 'companies',
img: '/images/markenbetriebe.png',
caption: 'Vulkanland Markenbetriebe',
},
{
id: 101,
route: 'companies',
img: '/images/gastro.png',
caption: 'Gastronomiebetriebe',
},
{
id: 102,
route: 'companies',
img: '/images/naechtigungen.png',
caption: 'Nächtigung',
},
{
id: 115,
img: '/images/buschenschank.png',
caption: 'Buschenschenken',
},
{
route: '/',
img: '/images/sehenswuerdigkeit.png',
caption: 'Sehenswürdigkeiten',
},
{
id: 104,
route: 'companies',
img: '/images/bauern.png',
caption: 'Direktvermarkter',
},
{
id: 106,
route: 'companies',
img: '/images/touriteninfo.png',
caption: 'Touristeninformation',
},
{
id: 109,
route: 'companies',
img: '/images/kulture.png',
caption: 'Kulturhäuser',
},
{
id: 107,
route: 'companies',
img: '/images/sport.png',
caption: 'Sport und Spiel',
},
{
id: 113,
route: 'companies',
img: '/images/handel.png',
caption: 'Handelsbetriebe',
},
{
id: 114,
route: 'companies',
img: '/images/gewerbebetriebe.png',
caption: 'Gewerbebetriebe',
},
{
route: '/',
img: '/images/Button-1.png',
caption: 'Schaukästen',
},
],
}
},
}
</script>
<style scoped>
.three-elements-per-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.element {
background: seagreen;
border: 2px solid paleturquoise;
}
</style>
And this is how it looks
Quick guide on CSS grid: https://css-tricks.com/snippets/css/complete-guide-grid/
That one is maybe a more flexible solution overall (more responsive).
I would like to have top of the box and bottom of the box in different colors, and also top of the whisker and bottoom of the whisker in different color for each box (region).
But all of the lines in the box are in the same color (red) and top and bottom of the whisker are in the same color (green)
Live demo with steps to reproduce
Highcharts.chart('container', {
chart: {
type: 'boxplot'
},
title: {
text: 'All Patients'
},
legend: {
enabled: true
},
xAxis: {
categories: ['Asia Pacific', 'Europe', 'Latin America', 'North America', 'SWAC'],
title: {
text: ' '
}
},
yAxis: {
title: {
text: 'Annual Center Volume 2016'
},
tickInterval: 5,
min: 0,
max: 75
//plotLines: [{
// value: 932,
// color: 'red',
// width: 1,
// label: {
// text: 'Theoretical mean: 932',
// align: 'center',
// style: {
// color: 'gray'
// }
// }
//}]
},
plotOptions: {
boxplot: {
fillColor: '#F0F0E0',
lineWidth: 2,
upperQuartileColor: 'green',
lowerQuartileColor: 'green',
medianColor: '#0C5DA5',
medianWidth: 3,
stemColor: '#A63400',
stemDashStyle: 'solid',
stemWidth: 1,
whiskerColor: '#3D9200',
whiskerLength: '20%',
whiskerWidth: 3
}
},
series: [{
name: 'Region Runs',
showInLegend: false,
color: 'red',
data: [
[2, 4, 18, 43, 53],
[5, 9, 16.5, 32, 52],
[1, 3, 6, 11.5, 21],
[3, 9, 20, 38, 73],
[1, 2, 8, 16, 20]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: '75th Percentile',
type: 'line',
color: 'red',
marker: {
symbol: 'square'
},
},
{
name: 'Median',
type: 'line',
color:'#0C5DA5',
marker: {
symbol: 'square'
},
},
{
name: '25th Percentile',
type: 'line',
color: 'red',
marker: {
symbol: 'square'
},
},
{
name: '90th percentile',
type: 'line',
color: '#3D9200',
marker: {
symbol: 'square'
},
},{
name: '10th percentile',
type: 'line',
color: '#3D9200',
marker: {
symbol: 'square'
},
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
Box Plot Charts -->
<div id="pdfContentHolder" style="margin:auto; width: 720px; height: 800px;">
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto" >
</div>
</div>
https://jsfiddle.net/hew8nq5u/
Thanks in advance guys!
Currently it's not possible in Highcharts to have box bottom and top in different colors. Same with top and bottom whiskers. Here is an explanation and enhancement proposition from github issue (https://github.com/highcharts/highcharts/issues/6796):
Currently each box is a single SVG shape and a border is applied by
stroke parameter which cannot be "separated" for smaller edges. As a
result, you can apply only single color.
Your goal requires a rebuild core of boxplot, so we cannot threat it
as a bug, but feature request.
In my extjs6 grid I have column headers that don't fit in the space. How do I do a word wrap in the column header only? This is what I have tried and is not working.
xtype: 'grid',
title: 'Daily Performance',
itemId: 'performanceAccountDailyGridID',
bind: {
store: '{myDailyPerformanceAccountStore}'
},
margin: '10px 0px 10px 0px',
ui: 'featuredpanel-framed',
cls: 'custom-gridPerformance',
height: 400,
width: 800,
columns: [
{
header: 'Filedate',
dataIndex: 'filedate',
flex: 1
},
css
.custom-gridPerformance .x-column-header-inner .x-column-header-text {
white-space: normal;
}
You CSS selector should be nested till .x-column-header-text which contains the column header text.Just giving white-space: normal is sufficient.
So your CSS should be:
.custom-gridPerformance .x-column-header-inner .x-column-header-text {
white-space: normal;
}
Working Example:
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'region'],
data: [{
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Arizona'
}, {
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Alaska'
}, {
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Alaska'
}, {
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Alabama'
}]
});
Ext.create('Ext.grid.Panel', {
store: store,
width: 400,
cls: 'custom-gridPerformance',
renderTo: Ext.getBody(),
columns: [{
text: 'Name of zoro of life style',
dataIndex: 'name',
}, {
text: 'Email',
dataIndex: 'email',
flex: 1,
}, {
text: 'State',
dataIndex: 'region',
}],
});
.custom-gridPerformance .x-column-header-inner .x-column-header-text {
white-space: normal;
}
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css"><!-- framework javascript --><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>
I have kendo grid and my problem is when the text too long I cannot make that text break line , I tried to make css but it does not work well.
Here is my css:
#projectslistgrid .k-grid-content td{
word-wrap:break-word;
}
This is image:
Please help me, thanks.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css" />
<script src="https://kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
<style>
.breakWord120 {
/*max-width: 120px !important;*/
word-break: break-all !important;
word-wrap: break-word !important;
/*vertical-align: top;
line-height: 15px;*/
}
</style>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
var products = [{
ProductID: 1,
ProductName: "Chai",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "10 boxes x 20 bags",
UnitPrice: 18.0000,
UnitsInStock: 39,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false,
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
}
}, {
ProductID: 2,
ProductName: "Chang",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "24 - 12 oz bottles",
UnitPrice: 19.0000,
UnitsInStock: 17,
UnitsOnOrder: 40,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
}
}, {
ProductID: 3,
ProductName: "AniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrup",
SupplierID: 1,
CategoryID: 2,
QuantityPerUnit: "12 - 550 ml bottles",
UnitPrice: 10.0000,
UnitsInStock: 13,
UnitsOnOrder: 70,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}];
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
{
field: "ProductName", title: "ProductName", attributes: {
"class": "breakWord120",
}
},
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}" },
{ field: "UnitsInStock", title: "Units In Stock" },
{ field: "Discontinued" }
]
});
});
</script>
</div>
</body>
</html>
Let me know if any concern.
I have a grid with very small columns with row filter, which cause them to have very small text-box. so I used
field: "OrderID",
width: 100,
filterable: {
cell: {
inputWidth: 65
}
}
but when I define inputWidth to enlarge the text field the filter operator does not move over and in fact cover up the partial space of the text-box. Therefore, I was wondering if there is a way to move the filter operator over or preferably over to the title header, like the columnMenu filter icon. Any help would be greatly appreciated, thanks.
I took the following example from: http://demos.telerik.com/kendo-ui/grid/filter-row
and modified width and inputwidth of orderID
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read:"http://demos.telerik.com/kendo- ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
},
height: 550,
filterable: {
mode: "row"
},
pageable: true,
columns:
[{
field: "OrderID",
width: 100,
filterable: {
cell: {
inputWidth: 65
}
}
},
{
field: "ShipName",
width: 500,
title: "Ship Name",
filterable: {
cell: {
operator: "contains"
}
}
},{
field: "Freight",
width: 255,
filterable: {
cell: {
operator: "gte"
}
}
},{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}]
});
});