I'm using checkbox in Telerik Grid.
following is my code
#(Html.Telerik().Grid<ProductModel>(Model.Products.Data)
.Name("products-grid")
.Columns(columns =>
{
columns.Bound(x => x.Id)
.ClientTemplate("<input type='checkbox' name='checkedRecords' value='<#= Id #>' />")
.Title("")
.Width(36)
.HtmlAttributes(new { style = "text-align:center" });
columns.Bound(x => x.Id);
columns.Bound(x => x.Name);
columns.Bound(x => x.Published)
.Width(100)
.Template(x => x.Published.ToString().ToLower())
.Centered();
})
.Pageable(settings => settings.Total(Model.Products.Total).PageSize(gridPageSize).Position(GridPagerPosition.Both))
.DataBinding(dataBinding => dataBinding.Ajax().Select("ProductReport", "Product"))
.ClientEvents(events => events.OnDataBinding("onDataBinding"))
.EnableCustomBinding(true)
)
I just see Id's in the checkbox column instead of checkboxes. Can anyone tell me what is wrong with my code ??
i checked this question and a few other but they dint answer my problem..
The problem is with your code definition, you just defined template in ajax call mode (with clientTemplate method):
.ClientTemplate("<input type='checkbox' name='checkedRecords' value='<#= Id #>' />")
But you should define the server-side template too, this template is used at your first and direct request:
.Template(#<text><input type='checkbox' name='checkedRecords' value='#Item.Id' /></text>)
Related
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.
I am using a Kendo MVC Grid and i want to have a dropdownlist in one of the cells.
here is my code:
#(Html.Kendo().Grid<RMS.Admin.ViewModel>()
.Name("ResourceGrid")
.Columns(columns =>
{
columns.Bound(c => c.ResourceName);
columns.Bound(c => c.Descritption);
columns.Bound(c => c.ResourceType).ClientTemplate("#=ResourceType#");
columns.Bound(c => c.Approved);
columns.Bound(c => c.IsEnabled);
columns.Bound(c => c.Data).Width(220);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(172).Title("Edit/Delete");
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Scrollable()
.Sortable()
.HtmlAttributes(new { style = "height:800px" })
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(s => s.ResourceId);
model.Field(p => p.ResourceType).DefaultValue(ViewData["defResourceType"] as RMS.Admin.ViewModel.ResourceTypeId);
})
.Create(update => update.Action("CreateResource", "Home", new { resourceTypeId = "#=ResourceType.Id#" }))
.Read(read => read.Action("ReadResource", "Home"))
.Update(update => update.Action("UpdateResource", "Home"))
.Destroy(destroy => destroy.Action("RemoveResource", "Home"))
)
.Events(events => events.DataBound("dataBound"))
)
The problem is that i don't know what clienttemplate is so i don't know what to do with it.
If bound resourcetype with a clienttemplate i can't add new records to the grid, i get the error: Uncaught ReferenceError: ResourceType is not defined
If i remove clienttemplate i can add a record but when i try to save it it says it can't find the id of ResourceType.
basically if you want to use a dropdownlist within a kendo ui grid you have to define an editor template which includes a kendo dropdownlist widget. this means you have to declare the respective cell with the attribute .EditorTemplateName() like this:
.Columns(columns =>
{
columns.Bound(c => c.ResourceName);
columns.Bound(c => c.Descritption);
columns.Bound(c => c.ResourceType).EditorTemplateName("TemplateName");
columns.Bound(c => c.Approved);
columns.Bound(c => c.IsEnabled);
columns.Bound(c => c.Data).Width(220);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(172).Title("Edit/Delete");
})
the editortemplate has to be stored within folder: Shared/EditorTemplates/TemplateName.cshtml
TemplateName.cshtml should look like this:
#model ModelName
#(Html.Kendo().DropDownList()
.OptionLabel("please select a value")
.Name("ResourceType") <-- the name needs to be equal to the grid cell name
.DataSource(source=>
{
source.Read( read =>
{
read.Action("ActionName", "ControllerName");
})
.ServerFiltering(true);
})
.DataTextField("Name") <-- displays the text of the object
.DataValueField("ID") <-- stores the id of the object
)
hope this will lead you into the right direction.
cheers,
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"))
)
)
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))
)
I have a very similar problem to the post located here:
Telerik grid with checkbox - Checkbox not showing up when the grid initially paints
Basically, I have a telerik MVC3 razor grid with a ClientTemplate column that consists of a checkbox. When the page loads initially, the checkbox is not there - instead it is what I want the value of the checkbox to be. However, when ajax is fired (such as grouping columns together), the checkbox shows with no problem.
I don't really understand the solution to the thread I pasted above....so maybe that is the answer and I just don't know how to call the grid's constructor. Here's the code I have:
research.cshtml
#(Html.Telerik().Grid(Model)
.Name("Grid")
.DataKeys(keys => keys.Add(m => m.MessageInformation.MessageGUID))
.DataBinding(databinding => databinding.Ajax()
.Select("_ViewMessages", "Results")
.Update("_UpdateSelectedMessage", "Results"))
.Columns(columns =>
{
columns.Bound(o => o.MessageInformation.MessageGUID)
.ClientTemplate("<input type='checkbox' id='chkMessage' name='checkedRecords' value='<#= MessageInformation.MessageGUID #>' />")
.Title("Check")
.Width(50)
.HtmlAttributes(new { style = "text-align:center" });
columns.Bound(o => o.MessageInformation.MessageGUID).Title("ID");
columns.Bound(o => o.MessageInformation.MessageReceivedDateTime).Title("Received Date").Format("{0:d}");
columns.Bound(o => o.MessageInformation.MessageReceivedDateTime).Title("Received Time").Format("{0:t}");
columns.Bound(o => o.MessageInformation.MedVAMessageTypeString).Title("Message Type");
columns.Bound(o => o.MessageStatus).Title("Status");
columns.Command(commands => commands.Edit().ButtonType(GridButtonType.Text)).Title("Edit");
})
.Editable(editing => editing.Mode(GridEditMode.PopUp))
.Scrollable(scrolling => scrolling.Enabled(true))
.Sortable(sorting => sorting.Enabled(true))
.Pageable(paging => paging.Enabled(true))
.Filterable(filtering => filtering.Enabled(true))
.Groupable(grouping => grouping.Enabled(true))
.Footer(true)
)
ResultsController.cs
[GridAction]
public ActionResult Research()
{
ViewBag.Message = "Research";
return View(DataAccess.Get_Messages());
}
[GridAction]
public ActionResult _ViewMessages()
{
ViewBag.Message = "Research";
return View(new GridModel(DataAccess.Get_Messages()));
}
You are initially binding to server data so you will need a server template as well as a client template:
#(Html.Telerik().Grid(Model)
.Name("Grid")
.DataKeys(keys => keys.Add(m => m.MessageInformation.MessageGUID))
.DataBinding(databinding => databinding.Ajax()
.Select("_ViewMessages", "Results")
.Update("_UpdateSelectedMessage", "Results"))
.Columns(columns =>
{
columns.Bound(o => o.MessageInformation.MessageGUID)
.Template(mi => {
%>
<input type='checkbox' id='chkMessage' name='checkedRecords' value='<%= mi.MessageGUID %>' />
%>
})
.ClientTemplate("<input type='checkbox' id='chkMessage' name='checkedRecords' value='<#= MessageInformation.MessageGUID #>' />")
.Title("Check")
.Width(50)
.HtmlAttributes(new { style = "text-align:center" });
columns.Bound(o => o.MessageInformation.MessageGUID).Title("ID");
columns.Bound(o => o.MessageInformation.MessageReceivedDateTime).Title("Received Date").Format("{0:d}");
columns.Bound(o => o.MessageInformation.MessageReceivedDateTime).Title("Received Time").Format("{0:t}");
columns.Bound(o => o.MessageInformation.MedVAMessageTypeString).Title("Message Type");
columns.Bound(o => o.MessageStatus).Title("Status");
columns.Command(commands => commands.Edit().ButtonType(GridButtonType.Text)).Title("Edit");
})
.Editable(editing => editing.Mode(GridEditMode.PopUp))
.Scrollable(scrolling => scrolling.Enabled(true))
.Sortable(sorting => sorting.Enabled(true))
.Pageable(paging => paging.Enabled(true))
.Filterable(filtering => filtering.Enabled(true))
.Groupable(grouping => grouping.Enabled(true))
.Footer(true)
)
Another snippet for Razor syntax: CheckBox can editable after click edit.
.Template(
#<text>
<input name="chkStatus" type="checkbox" #if(item.Status) { #:checked="checked" } disabled />
</text>
)
.ClientTemplate("<input type='checkbox' name='chkStatus' value='<#= Status #>' <#=Status?'checked':''#> disabled />");
#McGarnagle's syntax doesn't work for me. Here's mine that works:
.Template(#<text><input name="chkStatus" type="checkbox" #(item.Status ? "checked=\"checked\"" : "") disabled /></text>)
.ClientTemplate("<input type='checkbox' name='chkStatus' value='<#= Status #>' <#=Status?'checked':''#> disabled />")