I'm creating a kendo ui grid in an MVC4 application like so:
#(Html.Kendo().Grid<GridResultItemViewModel>()
.Columns(columns =>
columns.Bound(b => b.Distance).Width(35);
columns.Bound(b => b.Height).Width(35);
...)
.ClientDetailTemplateId("wellResultDetailsTemplate")
.Name("ResultGrid"); // etc.
I can't figure out a way to set the width of the hierarchical/detail expander column.
Setting width or max-width in css for the .k-hierarchy-cell doesn't seem to work.
You should use the k-hierarchy-col CSS class:
.k-grid .k-hierarchy-col {
width: 50px;
}
Here is a live demo: http://jsbin.com/abason/1/edit
Related
I'm using jqGrid JS v5.3.0, with styleUI set to Bootstrap. On edit form, the checkbox (created by setting edittype option. also set editoptions: {value:"true:false"}) is aligned to the center of the form. Is there a way to make it align to the left?
Thanks in advance.
The reason for this is the setting in the bootstrap css
.EditTable td input,
.EditTable td select,
.EditTable td textarea {
width: 98%;
display: inline-block;
}
i.e this is caused from width:98%
To correct this there are a lot of ways.
The first one is to use editoptions to set a manual auto width with style options.
edittype : 'checkbox',
editoptions : {value:"true:false", "style":"width:auto"},
The second one (more elegant IMHO) is to set this in css for all check-boxes in the edit form like this:
<style>
.EditTable td input[type="checkbox"]
{
width :auto;
}
</style>
after loading the jqgrid bootstrap css file.
Hi my kendo datepicker shows two month while change the month of a date picker.Please see the screenshot. I found the below solution Kendo datepicker shows two months during animation . but no luck .Can anyone help to this issue ?
My Code:
#(Html.Kendo().DatePicker().Name("datepicker").Max(DateTime.Today).Events(e => { e.Change("SearchonClick"); }).HtmlAttributes(new { style = "width: 100%", #placeholder = "dd/mm/yyyy", onkeydown = "javascript:return false;" }) )
The observed problem is surely caused by CSS code that enforces one of the following styles to the popup Calendar's table elements:
/* any other selector that influences Kendo UI Calendar tables */
table {
width: 100%;
/* or */
float: none;
}
The Kendo UI Calendar applies and requires the following styles:
.k-calendar .k-content {
width: 100%;
float: left;
}
The 100% width style is then overridden by a calculated inline pixel width style.
So, if any of the two styles are overridden by non-Kendo UI styles, the Calendar navigation will break. Please check and modify your selectors, so that they do not target Kendo UI Calendar tables.
Finally i found answer
bootstrap.css affect the datepicker table. Add the below css is exact solution.
#datepickerid_dateview table.k-content
{
border-collapse: inherit;
}
I have a Kendo MultiSelect with MaxSelectedItems set to 1, so user can select only one value. I'd like to make the tag to fill the input completely. Currently, it leaves some space after itself.
I'm aware of TagMode, but what I'm looking for is that the tag fills the entire input box.
This is what I'm using:
#(Html.Kendo().MultiSelectFor(x => x.field)
.MaxSelectedItems(1)
.Placeholder("")
.DataValueField("Id")
.DataTextField("Text")
.AutoBind(false)
.DataSource(ds => ds
.Read("SelectField", "API").ServerFiltering(true))
.ItemTemplate("#:Code# - #: Text#")
.TagTemplate("#:Code# - #: Text#")
.TagMode(TagMode.Single)
.HighlightFirst(true)
)
You can simply use CSS:
#select_id > li.k-button {
width: 100%;
}
Just add some id to make this selector more specific
To maximize filled space you should also hide next <input>
#select_id ~ input {
width: 0px !important;
display: none;
}
I have kendo MVC Grid and I have to set my page size to 50, so I need to freeze the column header while scrolling.
The question is : How can I freeze the column header while scrolling ?
When you create the Grid you should define the height in pixels as well as define scrollable as true.
Example:
var grid = $("#grid").kendoGrid({
dataSource: ds,
scrollable: true,
height : "150px",
columns : [
...
]
});
See this working here : http://jsfiddle.net/OnaBai/uuPW5/
Maybe this is something you were looking for:
https://github.com/jmosbech/StickyTableHeaders
Works quite well and you don't have to have scrollbars in your grid which makes it easier to work with.
You simply link provided script to your view and call this method on load:
$('#grid').stickyTableHeaders({
cacheHeaderHeight: true,
leftOffset: 1,
fixedOffset: ...
});
Parameters are optional but cacheHeaderHeight improves performance and I had to add leftOffset because of custom grid header borders and fixedOffset because of other sticky elements.
Just set the css of the grid header like this :
.k-grid-header {
position: sticky;
top: 0;
}
This answer has already been given for kendo UI, but here is how it's implemented for kendo MVC:
.Scrollable(scr => scr.Height(400))
It will give you a vertical scroll bar, allowing the user to scroll through the data while constantly seeing both the header and footer of the table. You can read more about it here: https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/scrolling/overview.
Trouble with this solution, however, is that the grid will be 400px tall, even when there is only one row of data. You can solve this like so
.Scrollable(scr =>
{
if (data.Count() < 10)
{
scr.Height("auto");
}
else
{
scr.Height(400);
}
})
Is it possible to set the textcolor of kendo grid when edit mode is clicked on "inline" edit?
I know kendo theming can do this somehow, but I would like to set myself if I can.
Define a CSS style as:
#grid tbody .k-input {
color: red !important;
}
For setting the color or the text to red while editing.
I use #grid to apply the style only to the Grid with id equal to grid and I use tbody to narrow the styling only to the body of the table (preventing other inputs from being formatted).