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.
Related
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" } ]
});
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" }
]
If table contains big multi-line text column, pressing jqgrid view toolbar button creates view window
with big height and without scrollbar. Most of data is outside screen and is not visible.
I tried to add scrollbars and restrict its height using
jQuery.extend(jQuery.jgrid.view, {
savekey: [true, 13],
recreateForm: true,
closeOnEscape: true,
dataheight: screen.height-230,
height: 0.82* screen.height,
width: 0.96*screen.width,
top:5
});
but those settings are ignored ( they work for edit window only if jQuery.jgrid.edit is used).
How to add scrollbar(s) and retrict view window height if it contains more data than fits to screen ?
I suggest to get the demo from the answer and extend the code a little. In the method beforeShowForm I suggest to include additional line
$(this).children("span").css({
overflow: "auto",
"text-align": "inherit", // overwrite 'text-align: "right"' if exist
display: "inline-block",
"max-height": "100px"
});
You can see the results on the demo. The height of the View form will be variable, but the maximal height of every field will be restricted to 100px (see max-height above):
or
Ive been through all the posts, finally got setCell to work with hardcoded values, but not using the options.rowId.
function StatusFormatter(cellvalue, options, rowObject) {
if (cellvalue == 'C'){
jQuery("#list").setCell(options.rowId , 'SOORDLINE', '', { color: 'red' });
jQuery("#list").setCell("[2.000]", 'SOORDLINE', '', { color: 'red' });
jQuery("#list").setCell('[2.000]', 'SOREQDATE', '', { color: 'red' });
jQuery("#list").setCell(options.rowId, 'SOPRICE', '', { color: 'red' });
}
return cellvalue;
};
The FIRST and LAST lines dont work, but the 2 with the hardcoded rowId DO work. I inspected what comes back in the option.rowId and they are the same as the hardcoded values, (just different depending on the row of course. What am I missing? Please help. I dont see any difference between the lines, or values.
EDITED-
I tried the answer, and it seems to be what I need. I tried the following
{ name: 'SOORDLINE', index: 'SOORDLINE', width: 25, search: false ,celattr: function () { return ' style="color: red"'; }
},
To aleast make them all red before I dove into the logic, and it didnt do anything for me.
Sorry, but you use custom formatter in absolute wrong way. The goal of the custom formatter to to provide HTML fragment to fill the content of the cells in the corresponding column. So the StatusFormatter will be called before the row with the id equal to options.rowId will be created. Moreover for performance purpose one use typically gridview: true. in the case the whole content of the grid (the whole body of the grid) will be constructed first as string and only after that will be placed in the grid body in one operation. It improve the performance because after placing of any element web browser have to recalculate position of all other elements on the page.
If you want to set text color on the SOORDLINE cell you should cellattr instead:
celattr: function () { return ' style="color: red"'; }
The celattr can be used also in the form celattr: function (rowId, cellValue, rawObject) {...} and you can test the property of rawObject which represent of the values for any column and return the cell style based on the cell value.
Alternatively you can enumerate the rows inside of loadComplete and set the style on <tr> element instead of setting the same styles for every row. See the answer as an example.
I'm starting to use filtertoolbar: myGrid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"});
My question Is If I can control the search inputs size -
UPDATE: It's height and width size .
Thank's In Advance.
If I understand you correct you should include in colModel in the definition of the column which input size you want to restrict the option like
searchoptions:{ attr: {maxlength: 5}}
In the example in the corresponding input field of the searching toolbar will be allowed to type not more as five characters.
UPDATED: I don't understand why you need such behavior, but you can use dataInit of the searchoptions to set height and width of the input control. To do this you can use either jQuery.css or jQuery.height and jQuery.width methods:
searchoptions:{
attr: {maxlength: 5},
dataInit: function(elem) {
//$(elem).css({height:"30px", width:"40px"});
$(elem).height(30).width(40);
}
}
If you increase the height of the control in the searching toolbar you should change additionally
var myGrid = $("#list");
// ...
var $search_toolbar = $("tr.ui-search-toolbar", myGrid[0].grid.hDiv);
$search_toolbar.height(30);
You should do this of course after the call of filterToolbar which create the searching toolbar.
See small demo here.