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>
Related
This piece of SASS code works:
.tableauQuestions
{
width: 100%;
background-color: black;
}
.tableauQuestions td
{
background-color: $coulCellTabQuestions;
width: 33%;
color: $coulTxtTabQuestion;
}
But this one yields no formatting for the table property.
.tableauQuestions
{
table // also tried: body
{
width: 100%;
background-color: black;
}
td
{
background-color: $coulCellTabQuestions;
width: 33%;
color: $coulTxtTabQuestion;
}
}
What is it I am doing wrong and what should the right nested code be?
EDITING: the HTML is as plain as can be:
<table class="tableauQuestions">
<tr>
<td>Bon
<td>Excellent
<td>Moyen
</tr>
</table>
The right nested should be the following:
.tableauQuestions {
width: 100%;
background-color: black;
td {
background-color: $coulCellTabQuestions;
width: 33%;
color: $coulTxtTabQuestion;
}
}
About Nesting
After a lot of tinkering I finally have a decent setup for my material table. It's got pagination, it's got sort, it's got all the goodies I need. However, it looks off because several of my columns are single digit values, and they have the same width as columns I would prefer to be larger (like the description which is wrapped excessively).
Being inexperienced in scss (and css for that matter) I'm at a loss for how to fix this. I attempted tinkering with the flex property in just about every way I could figure out, and it doesn't appear to change a thing on the table.
This issue is further complicated in that I cannot easily use the 'hack' of the material table generating classes based on the column identifier, as the columns are generated dynamically. I could pass in width information as well, but that seems like an unmaintainable hack.
Is there a way to apply styling to the entire table and header that would get me the desired look?
I used this successfully with Angular10.
First, wrap your table with a div, like this:
<div class='table-responsive'>
<mat-table>
....
</mat-table>
</div>
then add this CSS
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}
.mat-table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
display: table;
border-collapse: collapse;
margin: 0px;
}
.mat-row,
.mat-header-row {
display: table-row;
}
.mat-cell,
.mat-header-cell {
word-wrap: initial;
display: table-cell;
padding: 0px 5px;
line-break: unset;
width: auto;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}
This will size the cells according to the content, and make your table horizontally scrollable!
Assuming that you do mean the angular material table, this one might help:
md-table - How to update the column width
Use the below style for columns width and header
columns={[
{
title: 'Create Date',
field: 'create_date',
cellStyle: {
whiteSpace: 'nowrap'
},
...
]}
options={{
headerStyle: {
backgroundColor: '#DEF3FA',
color: 'Black',
whiteSpace: 'nowrap'
},
So I was experimenting with css filter, the experiment worked quite well but not in Firefox.
I wanted to apply a filter onto a segment of the background image. The idea was to fix the background image of the wrapper and the inner elements to create the illusion that the filter is applying only to a certain area and can be moved, here with scrolling.
This is what I tried:
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0px;
height: 200%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column
}
body,
div {
background-image: url("https://i.imgur.com/wu7EkAX.jpg");
background-attachment: fixed;
}
div {
filter: saturate(0%);
width: 50%;
height: 40%;
}
<div></div>
<div></div>
This works quite well with Chrome (and I think also in other browsers) but not with Firefox. It seems like it is a result of some optimization which misbehaves.
If you scroll with your mousewheele and then click, it refreshes, otherwise it stays in this state (at least if you run it standalone).
The "solution" is quite simple, you force Firefox to re render, there are whole posts about this topic but here are two of my approaches:
With a css animation
#keyframes renderFix {
from {
outline-color: red;
}
to {
outline-color: blue;
}
}
html {
outline: 1px solid red;
animation: 1s infinite alternate renderFix;
}
With some JavaScript
{
let html, s = false,
cycle = function () {
html.style.outlineColor = s ? "red" : "blue"
s = !s;
window.requestAnimationFrame(cycle)
}
window.requestAnimationFrame(function () {
html = document.body.parentElement
html.style.outlineStyle = "solid";
html.style.outlineWidth = "1px";
cycle()
})
}
The JavaScript fix applied:
{
let html, s = false,
cycle = function () {
html.style.outlineColor = s ? "red" : "blue"
s = !s;
window.requestAnimationFrame(cycle)
}
window.requestAnimationFrame(function () {
html = document.body.parentElement
html.style.outlineStyle = "solid";
html.style.outlineWidth = "1px";
cycle()
})
}
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0px;
height: 200%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column
}
body,
div {
background-image: url("https://i.imgur.com/wu7EkAX.jpg");
background-attachment: fixed;
}
div {
filter: saturate(0%);
width: 50%;
height: 40%;
}
<div></div>
<div></div>
I am creating a custom pie chart using jqPlot's PieRenderer. My only problem is that I can either show the label or the percentage on the dataLabels. I want to do a mix and show both like <label>\n<percentage>. Explanation:
By setting this.dataLabels = 'percent', I can do this:
By setting this.dataLabels = 'label', I can do this:
I want to do this:
Do you have any ideas?
According to the source code, dataLabels doesn't support rendering label together with percent at the same time.
I think you can easily create a list of labels using JavaScript and make sure you use <br/> instead of \n if you want to render 2 lines for each part.
#sza's solution is tidier, so I will have to accept it. I wanted to post my own though, because it is easier and it may help someone.
What I did is, put two pieCharts on each other, where the first one is visible and has the percentage values and the second one has no fill and is invisible except for the labels.
My XHTML code:
<p:pieChart value="#{chartBean.pieModel}" legendPosition="" fill="true" showDataLabels="true"
title="MyPieChart" style="width:100%; height:350px" sliceMargin="2"
diameter="300" dataFormat="percent" shadow="false" extender="pieChartExtender"
seriesColors="7eb75b,c2715e,6367c2,9b6ece,5cc2c1,c0c216" styleClass="mainPieChart" />
<p:pieChart value="#{chartBean.pieModel}" legendPosition="" fill="false" showDataLabels="true"
title="MyPieChart" style="width:100%; height:350px" sliceMargin="2"
diameter="300" dataFormat="label" shadow="false" extender="pieChartLabelExtender"
seriesColors="7eb75b,c2715e,6367c2,9b6ece,5cc2c1,c0c216" styleClass="pieLabels" />
extender.js:
function pieChartExtender() {
this.cfg.seriesDefaults.rendererOptions.dataLabelFormatString = '%#.2f%%';
this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 5;
this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.8;
this.cfg.seriesDefaults.rendererOptions.startAngle = -90;
}
function pieChartLabelExtender() {
this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 5;
this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.8;
this.cfg.seriesDefaults.rendererOptions.startAngle = -90;
}
CSS file:
.chartContainer {
position:relative;
margin: 0 auto;
top: 10px;
width: 350px;
height: 350px;
}
.chartLegend {
border: 1px solid #d7d7d8;
margin: 40px 40px;
width: 80%;
}
.pieExtra {
position:absolute;
left: 17px;
top: 13.5px;
}
.pieLabels { position:absolute !important; }
.mainPieChart { position:absolute !important; }
.jqplot-title { display:none !important; }
.jqplot-grid-canvas { display:none !important; }
.jqplot-series-shadowCanvas { display:none !important; }
.mainPieChart .jqplot-event-canvas { z-index: 10 !important; }
.jqplot-data-label { color: #fff; font-weight: bold; font-size: 14px; }
.pieLabels .jqplot-data-label { margin-top: -9px !important; }
.mainPieChart .jqplot-data-label { margin-top: 8px !important; }
.pieLabels .jqplot-series-canvas { display:none !important; }
Notice that:
both pieCharts (called pieLabels and mainPieChart) are absolutely positioned, in order to be placed on each other
jqplot-data-label of pieLabels is placed 9px above and jqplot-data-label of mainPieChart is placed 8px below to create the label-percentage label
jqplot-series-canvas for pieLabels is not displayed, in order to make it invisible.
I have a Kendo grid that contains the following code. How could I change the font and the font size of the message?
pageable: {
buttonCount: 10,
messages: {
display: "{0}-{1} of {2} Stations",
empty: "",
}
}
Define the message as:
display: "<span class='ob-my-style'>{0}-{1} of {2} Stations</span>",
where ob-toto contains the style definition:
.ob-my-style {
font-family: "Verdana", sans-serif;
font-size: 2em;
}
Alternative, you can just define:
.k-pager-info.k-label {
font-family: "Verdana", sans-serif;
font-size: 2em;
}