Related
I have a dxDataGrid and I want to put a Bootstrap icon in the column header 'caption'.
Normal bootstrap html for an icon would be something like:
<i class="glyphicon glyphicon-gbp"></i>
For simplicity, the code for the dxDataGrid is straight from the DevExpress dxDataGrid tutorial:
$("#gridContainer").dxDataGrid({
dataSource: books,
columns: [
{ dataField: 'author', width: 125 },
'title',
{ dataField: 'year', width: 60 },
{ dataField: 'genre', visible: false },
{ dataField: 'price', width: 100, format: 'currency', precision: 2 },
{ dataField: 'length', width: 65 },
{ dataField: 'format', width: 90 }
],
columnChooser: { enabled: true },
allowColumnReordering: true
});
So I would like to add the '£' glyphicon to the price column 'caption' field,
{dataField: 'price', caption: '<i class=glyphicon glyphicon-gbp></i>', width: 100, format: 'currency', precision: 2 },
but the datagrid just displays the html in string format.
Does anyone know how I can input/format the html to get it to render?
I am assuming that your web page is using UTF-8 encoding. If so, you do not need to HTML-encode the pound sign. Simply use the actual character in your caption string (without escaping or encoding it):
Note: I added fake data to the dataSource to make it easier to debug as a standalone snippet
<script>
$("#gridContainer2").dxDataGrid({
dataSource: [
{'author':'fred','title':'the book','year':2016,'genre':'sci-fi','price':25.00,'length':'150 pages',format:'hardcover'},
{'author':'fred','title':'the book','year':2016,'genre':'sci-fi','price':25.00,'length':'150 pages',format:'hardcover'},
{'author':'fred','title':'the book','year':2016,'genre':'sci-fi','price':25.00,'length':'150 pages',format:'hardcover'}
],
columns: [
{ dataField: 'author', width: 125 },
'title',
{ dataField: 'year', width: 60 },
{ dataField: 'genre', visible: false },
{ dataField: 'price', caption: 'Price in £', width: 100, format: 'currency', precision: 2 },
{ dataField: 'length', width: 65 },
{ dataField: 'format', width: 90 }
],
columnChooser: { enabled: true },
allowColumnReordering: true
});
</script>
Notice that the GBP symbol is embedded in the caption as a Unicode character. The benefits of doing this is that it allows the grid to control the size of the character as if it were part of the font. The downside is that the font you choose has to support the character that you are using or you'll get unexpected results.
Example:
Here is a Unicode character table you can reference. To use any (see above) of these characters in your caption, click on the character in the grid and then click the "copy to clipboard" button. Then, simply paste the character into your string.
The jQuery Approach
If this isn't exactly what you're looking for, you can use client-side jQuery to build out your glyphicon and attach it to the cell header when the grid "repaints".
Each of the header cells in the datagrid is the child of ".dx-header-row", so you can easily set a CSS class on them, and work with them using jQuery.
Here is an example that adds a cssClass to the column definition for price:
$("#gridContainer2").dxDataGrid({
dataSource: [
{'author':'fred','title':'the book','year':2016,'genre':'sci-fi','price':25.00,'length':'150 pages',format:'hardcover'},
{'author':'fred','title':'the book','year':2016,'genre':'sci-fi','price':25.00,'length':'150 pages',format:'hardcover'},
{'author':'fred','title':'the book','year':2016,'genre':'sci-fi','price':25.00,'length':'150 pages',format:'hardcover'}
],
columns: [
{ dataField: 'author', width: 125 },
'title',
{ dataField: 'year', width: 60 },
{ dataField: 'genre', visible: false },
{ dataField: 'price', caption: 'Price in ', cssClass: 'currencySymbol', width: 100, format: 'currency', precision: 2 },
{ dataField: 'length', width: 65 },
{ dataField: 'format', width: 90 }
],
columnChooser: { enabled: true },
allowColumnReordering: true,
onContentReady: function () {
var currencyIcon = $(document.createElement('i')).attr('class', 'glyphicon glyphicon-gbp').text('currencyIcon');
$('.dx-header-row .currencySymbol').append(currencyIcon);
}
});
By using the onContentReady event to append the icon, it will be reattached if the column is moved around. One thing to note is that the currencySymbol CSS class will be added to every cell in that column, so be careful when selecting elements with jQuery. If you'd like to append something to ALL currencySymbol cells, simply use the following selector:
$('.currencySymbol')
I wrote a detailed blog entry that describes this process for use with Font Awesome icons and Bootstrap nav menus, but the concepts are the same.
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 like this. Inside this template I'm using data-click attribute to the button but event is not firing at all. I don't know what went wrong.
Here is my code. Can anyone help.
$("#defect_grid_general").kendoGrid({
dataSource: ELQApp.GeneralDefectStore,
columns: [
{ field: "Name", title: "Component" },
{ field: "Opname", title: "Operation" },
{ field: "DefectDescription", title: "Defect" },
{ field: "qty", title: "Qty", template: "<input type='text' readonly='readonly' id=#=ELQGeneralDefectInfoId# onclick='ELQApp.ELQViewModel.LaunchKeyPad(this.id,"gen_defect")' style='width:60px' value='#=DefectQty#' readonly=readonly/> <a id='decrement_qty' name='-' data-role='button' onmousedown = 'ELQApp.ELQViewModel.IncrementDecrementValuesBtn1(this.name,"#:ELQGeneralDefectInfoId#","update")' class='km-button minusBtn'></a><a data-role='button' data-name='+' data-type=#=ELQGeneralDefectInfoId# data-flag='update' id='increment_qty' data-click='ELQApp.ELQViewModel.IncrementDecrementValuesBtn' class='km-button plusBtn'></a>", width: "155px" },
{ field: "", title: "", template: "<button data-click='ELQApp.ELQViewModel.RemoveGeneralDefect'>Delete</button>" },
{ field: "", title: "", template: "<input type='button' value='More Info' name=#=ELQGeneralDefectInfoId# onclick='ELQApp.ELQViewModel.OpenModal("more_info_popup",this.name,this)' id='rem'/>", width: "110px" },
{ field: "", title: "", template: "<a id =#=ELQGeneralDefectInfoId# onclick='ELQApp.ELQViewModel.RemoveGeneralDefect(this.id)' class='deleteBtn'></a>", width: "50px" }
],
height: 220,
});
Hey Chinthaka,
<div id="test-grid" data-role="grid" data-bind="source: testDataSource"
data-columns='[
{
field: "Site",
title: "Site"
} ,
{
title: "Action",
template: kendo.template($("#conditional-action-template").html())
}
]'></div>
<div id="log"></div>
<script id="conditional-action-template" type="text/x-kendo-template">
# if(FirstActionEnabled) { #
<div class='action circle' data-bind="click: firstActionClick"></div>
# } #
# if(SecondActionEnabled) { #
<div class='action square' data-bind="click: secondActionClick"></div>
# } #
</script>
I am giving you fiddle link..
Link- http://jsfiddle.net/falafelsoftware/B8ynX/
I hope you like it..
if you like then don't forget to vote me...
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>
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?