I have a Hierarchical grid that is bound to the server and is in MVC (.DataSource(d => d.Server()))
When the grid first loads I'd like the grid to expand the first row by default so the detail view is showing.
Can this be done without Javascript (preferred) or in Javascript if needed.
Try this,
Script
function _GridItemDataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
View
#(Html.Kendo().Grid<TwoModelInSinglePageModel.SampleModel>()
.Name("grid12")
.Columns(columns =>
{
columns.Bound(p => p.studentclass).HeaderTemplate("<input id='selectall' class='chkbxq' type='checkbox' />").ClientTemplate("<input id='checkbox_#=inx#' class='chkbxq' type='checkbox' />");
columns.Bound(p => p.SampleDescription);
columns.Bound(p => p.SampleCode);
columns.Bound(p => p.SampleItems);
})
.ClientDetailTemplateId("client-template")
.AutoBind(true)
.Events(events => events.DataBound("_GridItemDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Read", "Test"))
)
)
Related
I have code that looks as follows:
#(Html.Kendo().Grid<JeffreysOnline.Entities.Customer>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.LastName).Width(150);
columns.Bound(p => p.FirstName).Width(125);
columns.Bound(p => p.MiddleInitial).Width(75);
columns.Bound(p => p.Phone).Width(125);
columns.Bound(p => p.Address).Width(150);
columns.Bound(p => p.City).Width(100);
columns.Bound(p => p.State).Width(50);
columns.Bound(p => p.Zip).Width(125);
columns.Bound(p => p.TaxName).Width(125);
columns.Bound(p => p.TaxId).Width(125);
columns.Bound(p => p.BadChecks).Width(125);
columns.Bound(p => p.OtherRisk).Width(125);
columns.Bound(p => p.Interests).Width(125);
columns.Bound(p => p.BirthDate).Width(125);
columns.Bound(p => p.BouncedCheck).Width(125);
columns.Bound(p => p.PCNumber).Width(125);
columns.Bound(p => p.Comments).Width(125);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
toolbar.Excel();
})
.Editable(editable => editable.Mode(GridEditMode.InCell)) // In-cell editing instead of the whole row
.Pageable()
.Navigatable() // This allows the user to tab between columns in the grid.
.Sortable()
.Scrollable()
.Groupable()
.Excel(excel => excel
.FileName("Customers.xlsx")
.Filterable(true)
.AllPages(false)
.ProxyURL(Url.Action("ExcelExport", "Customer"))
)
.HtmlAttributes(new { style = "height:700px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true) // We want to perform batch operations
.PageSize(500) // Set the page size
.Events(events => events.Error("error_handler")) // Define a function that gets called on an error
.Model(model => model.Id(p => p.RowId)) // Define the PK
.Create(update => update.Action("Create", "Customer")) // The Create method in the controller
.Read(read => read.Action("Read", "Customer")) // The Read method in the controller
.Update(update => update.Action("Update", "Customer")) // The Update method in the controller
.Destroy(update => update.Action("Delete", "Customer")) // The Delete method in the controller
)
When the grid renders on the page, an Edit button appears in the last column:
Why is this edit button appearing when I have in-cell editing mode set?
Do you mean the Edit button? You're adding it in your code here:
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
Remove the command.Edit(); statement and the button should disappear.
I'm trying to add a dropdownlist in a telerik mvc grid using column.Bound I can get the dropdownlist to display but initially it displays as a textbox. Apparently if I use an editor template it should work but I get the error value cannot be null?
The aim is to display a dropdownlist in a grid, each item will have a different text color and background. This needs to be populated via model properties.
At the moment I'm using ViewData just to get things working but no joy. Was advised this can be done by Templates.
Any ideas why this isn't working?
#using System.Collections.Generic;
#model IEnumerable<TelerikChecklist.Models.ProductViewModel>
#(Html.Kendo().Grid(Model)
.Name("gridDropDown")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
//columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
// .Title("Category")
// .Width(150);
columns.Bound(p => p.CategoryID).Title("Category Name").ClientTemplate((#Html.Kendo().DropDownList()
.Name("dropdown_#=CategoryID#")
.BindTo((System.Collections.IEnumerable)ViewData["categories"])
.DataTextField("CategoryName")
.DataValueField("CategoryID")
.ValueTemplate("")
.ToClientTemplate().ToString()
)).EditorTemplateName("GridForeignKey");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:250px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("errorHandler"))
.Model(model =>
{
model.Id(p => p.ProductID);
model.Field(p => p.ProductID).Editable(false);
model.Field(p => p.CategoryID).DefaultValue(1);
})
.Read(read => read.Action("ForeignKeyColumn_Read", "Home"))
.Update(update => update.Action("ForeignKeyColumn_Update", "Home")).Events(e => e.Change("Category"))
.Create(create => create.Action("ForeignKeyColumn_Create", "Home"))
.Destroy(destroy => destroy.Action("ForeignKeyColumn_Destroy", "Home"))
)
)
The GridForeignKey.cshtml
#model object
#(
Html.Kendo().DropDownListFor(m => m)
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)
resolved by creating another template:
columns.Bound(p => p.Category.CategoryName).Title("CategoryName").EditorTemplateName("GridForeignKey2");
#using System.Collections;
#(Html.Kendo().DropDownList()
.Name("NeatProperty")
.DataTextField("CategoryName")
.DataValueField("CategoryID")
.BindTo((System.Collections.IEnumerable)ViewData["categories"])
.Template("<div style='background-color:#: data.CategoryColor #'><span class=\"k-state-default\"></span>" + "<span class=\"k-state-default\"><p style='color:#: data.CategoryTextColor #;'>#: data.CategoryName #</p></span></div>")
.ValueTemplate("<div style='background-color:#: data.CategoryColor #;'><span>#:data.CategoryName#</span></div>")
)
Seen this in another post on stackoverflow but lost the link so couldn't post.
Current scenario, demand deletion of the Kendo Gird column at runtime, I was wondering if there is any way to place checkbox or radio Button for Column header?
Like this,
#(Html.Kendo().Grid<TwoModelInSinglePageModel.SampleModel>()
.Name("grid12")
.Columns(columns =>
{
columns.Bound(p => p.studentclass).HeaderTemplate("<input id='selectall' class='chkbxq' type='checkbox' />").ClientTemplate("<input id='checkbox_#=inx#' class='chkbxq' type='checkbox' />");
columns.Bound(p => p.SampleDescription).HeaderTemplate("<input id='chkSampleDescription' class='chkbxq' type='checkbox' />");
columns.Bound(p => p.SampleCode).HeaderTemplate("<input id='chkSampleCode' class='chkbxq' type='checkbox' />");
columns.Bound(p => p.SampleItems).HeaderTemplate("<input id='chkSampleItems' class='chkbxq' type='checkbox' />");
})
.Pageable()
.Navigatable()
//.Filterable()
.Sortable()
.Groupable()
.Events(events => events.DataBound("_GridItemDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.inx))
.Read(read => read.Action("Read", "Test"))
)
)
Is there any way to display and hide coloumn onEdit and Add mode. As display in the sample code. I want to display Unit Price on add and edit mode and hide in view mode. Please advise. But the following will shrink the grid. i want to make it still 100%. What event should i use if the user click cancel.
#model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductID);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Grid"))
)
.Events(ev => ev.DataBound("onDataBound").Edit("onEdit"))
)
<script type="text/javascript">
function onEdit(e) {
var grid = $('#Product').data('kendoGrid');
if (!e.model.isNew()) {
grid.showColumn(2);
}
else
{
grid.showColumn(2);
}
function onDataBound(e) {
var grid = $('#Product').data('kendoGrid');
grid.hideColumn(2);
</script>
Actually in popup mode hidden columns of the original grid are not hidden. If you remove your onEdit function it should be enough. You might even remove the dataBound and set it to hidden in the column initialization:
#model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductID);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice).Hidden( true );
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Grid"))
)
)
Check in http://jsfiddle.net/OnaBai/B2Ses/ how the column Freight is hidden in column mode but visible on popup (both for editing and creation).
For other grid properties (toolbar etc.) with .HtmlAttributes function you can use:
.ToolBar(toolbar => toolbar.Custom().Name("New item").HtmlAttributes(style = ViewData["isThisPropertyAllowed"] }))
And in Controller use for example:
ViewData["isThisPropertyAllowed"] = (User.IsInRole("ADMIN")?"":"display:none");
I am working on Kendo UI with asp.net mvc razor. I am trying to bind database table data with kendo grid that supports CRUD operations. Here i need to populate a dropdownlist for one of my table field. I have used the following code
View:
#model IEnumerable<MvcApplication1.PriceOption>
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
//columns.Bound(p => p.ProductTitle).ClientTemplate("<input type='checkbox' disabled='disabled'name='Discontinued' <#= Discontinued? checked='checked' : '' #> />");
columns.Bound(p => p.ProductTitle).EditorTemplateName("OptionalEmail");
columns.Bound(p => p.OptionTitle);
columns.Bound(p => p.Price);
columns.Bound(p => p.Frequency);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.ProductID))
.Create(create => create.Action("CreateOption", "ZiceAdmin"))
.Read(read => read.Action("Read", "ZiceAdmin"))
.Update(update => update.Action("UpdateOption", "ZiceAdmin"))
.Destroy(update => update.Action("DeleteOption", "ZiceAdmin"))
)
)
OptionalEmail.cshtml
#model string
#(Html.Kendo().DropDownList()
.Name("ProductTitle")
.Value(Model)
.SelectedIndex(0)
.BindTo(new SelectList(ViewBag.ProductTitle))
)
Here i need to store the selected item from the dropdownlist. But it always shows null. How could i get the selected value from dropdownlist.
It's a bug. Remove the name, and it will submit back to the server as part of the ViewModel:
#model string
#(Html.Kendo().DropDownList()
.Value(Model)
.SelectedIndex(0)
.BindTo(new SelectList(ViewBag.ProductTitle))
)