I am trying to get my initial column widths correct for my Kendo Grid. This is driving me crazy!
My grid is like the following...
<table class="MyTableClass">
<thead>
<tr>
<th>
#(Html.Kendo().Grid(Model.MyModel).Name("myGrid").HtmlAttributes(new { #class = "shadow", style = "height:40%;width:100%" })
.Extra(false)
.Operators(...)
.Resizable(resize => resize.Columns(true))
.Sortable().Scrollable().Pageable().Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.DataSource(dataSource => dataSource.Ajax().ServerOperation(false).PageSize(25))
.Columns(columns =>
columns.Bound(p => p.Property1).Title("MyProperty1").ClientTemplate("...");
columns.Bound(p => p.Property2).Title("MyProperty2").ClientTemplate("...").Width(100);
columns.Bound(p => p.Property3).Title("MyProperty3").ClientTemplate("...");
columns.Bound(p => p.Property4).Title("MyProperty4").ClientTemplate("...").Width(100);
...
as you can see I have set widths for all but two of the columns which I want to take up the rest of whatever the width is. This works great except when the width is small the two columns without the explicit width setting are basically zero width and therefore seems missing.
I am trying to set a minimum width on the columns (that don't have the width explicit) where if it is less than 100 then it sets the width to 100.
I've tried everything I can think of and got close with calling the following on document load...
function setColumnMinimumWidths() {
$("#myGrid colgroup col").each(function () {
if ($(this).width() < 100) {
$(this).css("width", "100px");
}
})
}
this does the trick but then after resizing the window all the other columns now resize evenly (ignoring the explicit widths).
any kendo or javascript experts out there that have any ideas?
If you have in your grid some columns that have fixed grid and some doesn't, columns with width property will have provided width and rest of the columns will take rest of the place divided equally.
The simplest thing you can do is set minimum width of the grid in css:
#grid{
min-width: 400px;
}
Check this example: http://dojo.telerik.com/OHOku
Related
I have the following grid with a date picker:
#(Html.Kendo().Grid<ScheduleViewModel>()
.Name("ScheduleGrid")
.AutoBind(true)
-
)
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Columns(columns =>
{
columns.Bound(s => s.Name).Title("Schedule").Filterable(true).Width(150).HtmlAttributes(new { style = "text-align: left" });
columns.Bound(s => s.StartTime).Width(100).Title("Start Time").ClientTemplate((
#Html.Kendo().DatePicker()
.Name("StartTimePicker")
.Value("#=StartTime#")
//.Format("{0:dd/MM/yyyy}")
.ToClientTemplate()).ToHtmlString());
columns.Bound(s => s.Enabled).Width(100).ClientTemplate("<input type='checkbox' #=Enabled ? checked='checked' : '' # class='sda-checkbox' />").HtmlAttributes(new { #class = "text-center" });
columns.Command(command => command.Custom("Save").Click("saveSchedules")).Width(80).HtmlAttributes(new { #class = "text-center" });
})
However, the date picker doesn't display correctly. Instead it is just a text box. What am I doing wrong?
EDIT (and I also switched to use a Time Picker instead of a Date Picker):
I did as #FrozenButcher suggested, but this still doesn't work. This is what happens now:
Bring up page and you get this, which does not LOOK like a Time Picker, but is. No clock icon, and you can't see the value:
Click in the box and you get this:
Obviously you can now see the time, but no clock icon.
Finally, click in the Time Picker on the second line and you get this:
Any help in resolving this is greatly appreciated.
You have to ensure unique ids for your inputs, wrapper for datepicker is defined through the name property.
change it to a dynamic name .Name("StartTimePicker"+ lineNumber)
I have a Kendo UI grid (using MVC) created with the snippet here.
#(Html.Kendo().Grid<EntityResultTypeWhichDoesntMatter>().Name("searchresults")
.Events(events => events.DataBound("onDataBound"))
.Pageable()
.Scrollable(s => s.Height("auto"))
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Driver_Read", "Driver").Data("getSearchCriteria"))
.PageSize(10)
).Columns(s =>
{
s.Bound(p => p.HiddenIdField).Visible(false);
s.Bound(p => p.FirstName).Title("First Name").Width(150);
s.Bound(p => p.LastName).Title("Last Name").Width(150);
s.Bound(p => p.EmployeeNumber).Title("Employee Number").Width(170);
s.Bound(p => p.ExtraField1).Title("Extra Field1").Width(180);
s.Bound(p => p.ExtraField2).Title("Extra Field2").Width(170);
s.Command(command => command.Custom(Edit).Click("edit")).Width(80).Visible(Model.CanEdit);
}).Filterable().Resizable(e=>e.Columns(true)))
As you can see, the columns are specified with explicit "width" properties and also the grid is "Resizable" too.
The issue that I'm facing is that when dragging the mouse to resize the grid, it shows like the below one
the blue box in the middle of the first column heading represents the position of the mouse pointer while dragging. It's kind of an odd experience as the resize is not running along with the mouse position. I saw this solution but it didn't seem to work for me. Any idea? Thanks.
The column widths are too small and their sum is less than the total Grid width. This leads to "jumping" of the currently resized column. The documentation explains more:
http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#columns
I have a Kendo grid that has a static size of 6 rows, the data comes dynamically from remote source, each property of data being bound to a specific column.
The grid should always show 6 rows even if the rows are empty (No data to show on them), I achieved this by setting empty data to the rows in model side, in case there was less than 6 data items.
I can add, edit and remove data per each grid-row, and the grid being static in size I would like to support functionality where one can add new data item to row 1, and for example row 5 so that when the data is reload it always shows the data on those exact rows. The default functionality in Kendo-grid would be that it shows the data which was added to row 5 in row 2 after the reload.
Is there a way of forcing Kendo to put data to a specific row in grid, even if there might be empty rows before and after this one row? I understood that the Grid has uid for rows, which are changed after reload thus being unuseful in this case. The grid does not have a template, it's simply defined with Html.Kendo()-bindings.
Data binding:
#(Html.Kendo()
.Grid<DataStructure>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(o => o.ListActionIndex)
.Width(100)
.Sortable(false);
columns.Bound(o => o.Action)
.Filterable(false)
.Width(100)
.Sortable(false);
columns.Bound(o => o.Status)
.Width(40)
.EditorViewData(new { Width = 40 })
.HtmlAttributes(new { title = "test" });
})
.Editable(e => e.Mode(GridEditMode.InLine))
.DataSource(source =>
{
source.Ajax()
.Read(read => read.Action("GetData", "DataStructure").Data("additionalData")).PageSize(6)
.Model(model =>
{
model.Field(o => o.Action).Editable(false);
model.Field(o => o.Status).Editable(false);
model.Field(o => o.ListActionIndex).Editable(false);
})
.Model(model => model.Id(o => o.ListActionIndex));
})
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
I am using Kendo UI MVC grid. One of the properties of the model is bool, so I need to present it in grid as checkbox. By default Kendo UI present it as "true" and "false" values in the column. So you need to first time to click to get checkbox, then second time to click to change value of the combobox. Instead of having default values from grid, I set ClientTemplate, so I got checkbox instead of "true" and "false" values.
c.Bound(p => p.GiveUp)
.Title("Giveup")
.ClientTemplate("<input type='checkbox' id='GiveUp' name='GiveUp' #if(GiveUp){#checked#}# value='#=GiveUp#' />")
.Width(50);
This grid uses batch editing and in-grid editing (GridEditMode.InCell)
.Editable(x => x.Mode(GridEditMode.InCell))
.DataSource(ds => ds.Ajax()
.ServerOperation(false)
.Events(events => events.Error("error"))
.Batch(true)
.Model(model => model.Id(p => p.Id))
.Read(read => read.Action("Orders", "Order").Data("formattedParameters"))))
So what I would like to have is ability for user to click on checkbox and change value of my model, but unfortunately that doesn't work. I can see visually checkbox's value is changed but I don't see red triangle that marks cell as changed, and when I click on add new item button, value from checkbox disappear.
Please advice on what I am doing wrong.
Thanks in advance.
For those who would like to see how full code looks like.
Home.cshtml
#(Html.Kendo().Grid<OrdersViewModel>()
.Name("Orders")
.Columns(c =>
{
c.Bound(p => p.Error)
.Title("Error")
.ClientTemplate("<input type='checkbox' #= Error ? checked='checked': '' # class='chkbx' />")
.HtmlAttributes(new {style = "text-align: center"})
.Width(50);
<script>
$(function() {
$('#Orders').on('click', '.chkbx', function() {
var checked = $(this).is(':checked');
var grid = $('#Orders').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('Error', checked);
});
});
</script>
Basically when you add/remove records from the Grid the red triangles always disappear (or when you sort/page/filter etc), the checkbox is not the problem with the red triangles.
Now for the checkbox if you create a ClientTemplate which is again a checkbox you will need to click one time to put the cell into edit mode (you will see no difference because the editor template is again a checkbox) so you will need to click second time to actually change the value.
What I suggest you as best practice is to use the approach covered here - it is way more faster (less operations for the Grid) and it easier than applying extra logic to handle the two clicks with the approach above.