How to add a header to excel using Kendo UI Grid
I am using Javascript and Jquery.
You could add a new row/rows to the beginning of your exported file and modify the cell attributes to style it in the format of your attached image.
You could use unshift to insert a row at the beginning of your rows array containing the header title.
And then use additional cell attributes to style the header title (like textAlign and colSpan).
var rows = e.workbook.sheets[0].rows;
rows.unshift({
cells: [ { value: "My title", background: "#ff0000", colSpan: 2, textAlign: "right" } ]
});
Dojo example to demonstrate the above.
EDIT
In order to modify the size of the font used in the header cell, you can use the fontSize attribute.
var rows = e.workbook.sheets[0].rows;
rows.unshift({
cells: [ { value: "My title", fontSize: 20, background: "#ff0000", colSpan: 2, textAlign: "right" } ]
});
Related
I tried to keep double header in my jqgrid. But I keep getting
Length of colNames < > colModel!
Code that I tried
var grid = $("#list"),
mydata = [
{date:"1",aaa:"2007-10-01",bbb:"test",cccc:"note",ddd:"200.00",eee:"10.00",fff:"210.00",ggg:"",hhh:"",proj:"",iii:""},
];
colModel:[
{name:'date',index:'date',key: true,width:100,sorttype:"text"},
{name:'time',index:'time',key: true,width:100,sorttype:"text"},
....
jQuery("#list").jqGrid('setGroupHeaders', {
// useColSpanStyle: true,
groupHeaders:[
{startColumnName: 'date',numberOfColumns: 1, titleText: '<em>Price</em>'},
{startColumnName: 'time',numberOfColumns: 1, titleText: 'Shiping'}
]
});
I need Date in the first header time in the second header.
Any help ?
It looks like you need just create multiline column headers and not grouping of some column headers together. Thus the usage of setGroupHeaders is the wrong way.
What you need to use is wrapping of long column header text (see the answer) or just including <br/> inside of the text of the column header (see another answer). It's important to understand that colNames or label property of colModel contains HTML fragment which will be set in the column header. Thus one can use HTML markup. Depend on the version of jqGrid which you use you could use additional CSS rule
.ui-jqgrid .ui-jqgrid-htable th div { height: auto }
I have requirement to show icon in each datatable header.now problem is icon and text are not showing in same line because of column width.what i want to increase each header cell by 50px.
Below is my code to show icon and increase width.
"fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) {
$.each($('.table tr th'),function(key,val){
var title=nHead.getElementsByTagName('th')[key].innerHTML;
var new_width=parseInt($(nHead.getElementsByTagName('th')[key]).attr('style').split(":")[1].split("px")[0])+50 +"px"
$(nHead.getElementsByTagName('th')[key]).attr('style','width:'+new_width)
nHead.getElementsByTagName('th')[key].innerHTML = "<i class='fa fa-cube'></i>"+title;
})
}
Note : I am using dataTables 1.9.4
fnHeaderCallback() is not the right callback to use here, since it is called on each and every redraw. It is called when the user sorts, change page and so on. You should use fnInitComplete() instead.
The reason for the header titles becoming multiline is mostly caused by the browser defaults and the CSS settings (or lack of same). Add this CSS :
.dataTable th {
white-space: nowrap;
}
and add the icons in the fnInitComplete() callback :
var table = $('#example').dataTable({
fnInitComplete: function() {
$("#example th").each(function() {
var $th = $(this);
$th.html("<i class='fa fa-cube'></i>"+$th.text());
})
}
});
demo -> http://jsfiddle.net/2hLn31gp/
There should be no reason at all for manipulating the width of the headers programmatically. The widths is either
User defined widths, i.e aoColumns :[ { sWidth: "10%" }] etc
Calculated widths, where dataTables calculate the minimum width required by each column to show its content based on the table width as 100%. An attempt to increase width programmatically as above (by adding 50px to each) will increase the width to 100%+(50px*columnCount) - that is not what you want.
A combination of 1 and 2.
If you need to recalculate the width of the columns, simply recalculate them by using fnAdjustColumnSizing() :
table.fnAdjustColumnSizing();
or force the widths "manually" :
aoColumns: [
{ sWidth: "100px" },
{ sWidth: "50px" },
{ sWidth: "250px" }
]
I've looked all over for help on this, which should be extremely easy, but I can't find exactly what I need. Here is my jsFiddle, which contains a super basic Kendo grid. I just want to get all data for the row that is currently selected (using a column of radio buttons) when the button is clicked.
http://jsfiddle.net/HTXua/412/
I know that when a row is selected, it is altering a property in the css class. Therefore, the row that I am trying to retrieve is going to have the property:
.detailGridRowSelector:checked
I have managed to implement the first row using checkboxes (instead of radio buttons) and count how many are checked, but I can't access the data for some reason!
var dataSource = {
data: [
{
"first": "Adam",
"last": "Paul"},
{
"first": "Shannon",
"last": "Harris"},
{
"first": "Frank",
"last": "Rolinson"},
]
};
var columns = [
{
template:'<input type="radio" class="detailGridRowSelector" title="Select Lines" name="radioLineSelector" />', width: 20
},
{
field: "first",
title: "First Name",
width: "90px"},
{
field: "last",
title: "Last Name",
width: "90px"},
];
$("#grid1").kendoGrid({
dataSource: dataSource,
columns: columns,
});
$("#getInfoButton").bind("click", function () {
var lineData ="line data would be set here";
//I know the selected row has the property: .detailGridRowSelector:checked
alert(lineData);
});
You should do:
// Get a reference to the grid
var grid = $("#grid1").data("kendoGrid");
// Get checked row by getting the input and then the row containing the input
var row = $("input:checked", grid.tbody).closest("tr");
// Get the item
var item = grid.dataItem(row);
// Format and display item
alert (JSON.stringify(item));
Your JSFiddle modified here: http://jsfiddle.net/OnaBai/HTXua/414/
SOLVED
Turns out I was making this way too hard on myself. I just learned that Kendo has a feature built in that handles this for you, so instead of using a column of radio buttons, I deleted it and implemented the
selectable: 'row'
feature. Then I just got it using
var grid = $("#grid1").data("kendoGrid");
var row = grid.select();
var data = grid.dataItem(row);
alert(data.first);
I am using a template for the edit popup. I am trying to force the grid to go into edit mode and show the edit template popup when a link within one of the columns is clicked.
I tried using a command but I am unable to data bind the hyperlink's text to a field declared in the model, in this case to 'CourseType'. Is data binding supported within command columns?
columns: [
{
command: [
{
id: "edit",
title: "School Item",
template: '#=CourseType#',
width: 120
}
]
}
]
If data binding is not supported within a command column, then how do I put the grid into edit mode when the templated field is clicked?
columns: [
{
field: "CourseType",
title: "School Item",
template: '#=CourseType#'
}
]
I'm not sure why do you want to define the cell as an HTML anchor but there is no problem on making it enter on popup edit mode when clicking on the anchor.
1) Add to your template a class that would allow us to find those cells. Something like:
columns: [
{
field: "CourseType",
title: "School Item",
template: '#=CourseType#'
}
]
where I have include class="ob-edit-popup" to the template.
2) add to your grid definition the option editable: "popup".
3) add the following JavaScript code after the initialization.
$(".ob-edit-popup", grid.tbody).on("click", function (e) {
var row = $(this).closest("tr");
grid.editRow(row);
})
Where grid is the result of:
var grid = $("#grid").kendoGrid({...}).data("kendoGrid");
I added a filterToolbar search box to my grid and changed it's height style like
in this question.
I want to position this input to be in the center,
(I tried text-align:center, but it didn't work).
How is it possible to center the input box inside the column header?
UPDATE:
This is my colModel code:
{width:10,name:'Code1',index:'Code1', jsonmap:'Code1',searchoptions:{dataInit: function(elem){$(elem).css('font','15px'); $(elem).height(18);}}},
{width:40,name:'DescriptionHe1',index:'DescriptionHe1', jsonmap:'DescriptionHe1',searchoptions:{dataInit: function(elem){$(elem).css('font','15px');$(elem).height(18);}}, hidden:(language == "he")?false:true},
{width:40,name:'DescriptionEn1',index:'DescriptionEn1', jsonmap:'DescriptionEn1',searchoptions:{dataInit: function(elem){$(elem).css('font','15px');$(elem).height(18);}}, hidden:(language == "en")?false:true},
{width:10,name:'Code2',index:'Code2', jsonmap:'Code2',searchoptions:{dataInit: function(elem){$(elem).css('font','15px'); $(elem).height(18);}}},
{width:40,name:'DescriptionHe2',index:'DescriptionHe2', jsonmap:'DescriptionHe2',searchoptions:{dataInit: function(elem){$(elem).css('font','15px');$(elem).height(18);}}, hidden:(language == "he")?false:true},
{width:40,name:'DescriptionEn2',index:'DescriptionEn2', jsonmap:'DescriptionEn2',searchoptions:{dataInit: function(elem){$(elem).css('font','15px');$(elem).height(18);}}, hidden:(language == "en")?false:true}
Thank's In Advance.
I suppose that additional CSS which you use changes default behavior of jqGrid. jqGrid center all input fields from the searching toolbar per default.
To change the style of elements from the searching bar you can use attr of the searchoptions.
The demo display the following:
The demo uses
cmTemplate: {
searchoptions: {
attr: {
style: "width:auto;padding:0;max-width:100%"
}
}
}
to set common style for all elements of the searching bar. Additionally I set maxlength and size attributes for different columns. For example
searchoptions: { attr: { maxlength: 6, size: 6 }}
Another demo shows how to set different alignment for different elements of the searching toolbar:
In the demo I used for left alignment fields the property
searchoptions: {
attr: {
maxlength: 6,
size: 6,
style: "width:auto;padding:0;max-width:100%;float:left"
}
}
and
searchoptions: {
attr: {
maxlength: 6,
size: 6,
style: "width:auto;padding:0;max-width:100%;float:right"
}
}
for right alignment fields.
To set the height of the input field I used height inside of searchoptions.attr.style:
style: "width:auto;padding:0;max-width:100%;height:5em;float:left"
P.S. I used additionally CSS
.ui-jqgrid .ui-jqgrid-htable .ui-search-toolbar th {
height: auto; padding-bottom: 1px
}
to improve a little visibility of the searching toolbar.