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.
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 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 }
}
Is it possible to use dojo (grid in particular) with MVC-2? Any example/ideas on how we can use it?
I did not see difference between MVC2 and other types of applications...
You should read about dojo grid
First of all you need to load dojo script (it would be better if you do it on master page).
Also you can add some css styles that dojo grid using:
Site.Master:
<html>
<head>
...
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djconfig="parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
.dojoxGrid table
{
margin: 0;
}
</style>
...
</head>
....
</html>
After that you should add some code in view for initialize dojo grid, E.g.:
Index.aspx:
...
<script>
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
var layoutCountries = [
[{
field: "abbr",
name: "Abbeviation",
width: 10
},
{
field: "name",
name: "Name",
width: 10
},
{
field: "capital",
name: "Capital",
width: 'auto'
}]];
var storeData = {
identifier: 'abbr',
label: 'name',
items: [{
abbr: 'ec',
name: 'Ecuador',
capital: 'Quito'
},
{
abbr: 'eg',
name: 'Egypt',
capital: 'Cairo'
},
{
abbr: 'sv',
name: 'El Salvador',
capital: 'San Salvador'
},
{
abbr: 'gq',
name: 'Equatorial Guinea',
capital: 'Malabo'
},
{
abbr: 'er',
name: 'Eritrea',
capital: 'Asmara'
},
{
abbr: 'ee',
name: 'Estonia',
capital: 'Tallinn'
},
{
abbr: 'et',
name: 'Ethiopia',
capital: 'Addis Ababa'
}]
}
</script>
<div style="width: 400px; height: 300px;">
<div dojotype="dojo.data.ItemFileReadStore" jsid="countryStoreForGrid" data="storeData">
</div>
<div id="grid" dojotype="dojox.grid.DataGrid" store="countryStoreForGrid" structure="layoutCountries"
queryoptions="{deep:true}" query="{}" rowsperpage="40">
</div>
</div>
...
And the result of this code is: