Telerik MVC Grid ClientTemplate checkbox not displayed initially - asp.net-mvc-3

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 />")

Related

Telerik grid column command , add to url # on click

I have this telerik grid in a asp.net mvc project
<div class="actualGrid" id="actualGrid">
#(Html.Kendo().Grid<AVNO_KPMG.Models.Bench>() //Bench Grid
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.name).Title("Bench").Filterable(ftb => ftb.Cell(cell => cell.Operator("startswith"))).Width(100);
columns.Bound(p => p.freeSeats).Title("Free Seats").Width(200).Filterable(ftb => ftb.Cell(cell => cell.Operator("gte"))).HtmlAttributes(new { #class = "FreeSeats" })
.ClientTemplate("<div class='barthingy'><div class='bars_text'><div class='seatsText'><span class=\"bookNotfull\"></span> <b>#=bookedSeats#</b> USED SEATS</div><div class='seatsText'><span class=\"bookfull\"></span> <b>#=freeSeats#</b> TOTAL OFSEATS</div></div><div id='bigbar'><div class='bigbar' style='width:100%; float:left; background-color:rgb(142, 188, 0);'><div ' style='float:right; width:#=bookedSeats *100 / seatsCount#%; background-color:rgb(255, 99, 71); height:16px ' class='b_#=name#' id='temp-log'></div></div></div></div>");
//buttons
columns.Command(command => { command.Custom("checkBench1 ").Text(" AM ").Click("doCheckIn"); command.Custom("checkBench 2").Text(" PM ").Click("doCheckIn"); command.Custom("checkBench3").Text("All Day").Click("doCheckIn"); }).HtmlAttributes(new { #class = "comms#=freeSeats# freeAM#=seatsCount - (bookings_am + bookings_allday)# freePM#=seatsCount - (bookings_pm + bookings_allday)# freeALLDAY#=freeSeats#" }).Title("Check in").Width(200);
})
.Pageable()
.Sortable()
.Scrollable(scrolling => scrolling.Enabled(false))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
//.HtmlAttributes(new { style = "height:530px;" })
.Events(events => events.DataBound("onDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
//.Sort(sort => sort.Add("freeSeats").Ascending())
.PageSize(10)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.id))
.Read(read => read.Action("GetBenches", "Deskcheckin"))
)
)
</div>
Everytime i press on of the buttons in the command column, the url gets a # in front of it, even if i set the buttons to do nothing.
my url is something like
http://www.aaaaaa.com/stuff
When i press one of the buttons i get
http://www.aaaaaa.com/stuff#
How can i disable this?
Please try with the below code snippet. For custom command button grid generate anchor control for same. By default it set href='#' and I have replaced it with href='javascript:void(0)'.
<div>
#(Html.Kendo().Grid<MvcApplication1.Models.Student>()
.Name("grid")
.Columns(columns =>
{
..........
..........
columns.Command(command => { command.Custom("checkBench1").Text("AM").Click("doCheckIn"); }).Title("Check in").Width(200);
})
.Events(events => events.DataBound("onDataBound"))
..........
..........
)
</div>
<script>
function doCheckIn() {
alert('a');
}
function onDataBound(arg) {
$("#.k-grid-checkBench1").attr('href', 'javascript:void(0)');
}
</script>
Let me know if any concern.

Reload kendo grid according to dropdown selection

I'm using Kendo UI grid with ASP.NET MVC 4
#Html.Label("Status: ")<select id="drStaus" style="width:250px">
<option value="Open">Open</option>
<option value="Pending">Pending</option>
<option value="Other">Closed</option>
</select>
<br /><br />
#(Html.Kendo().Grid((IEnumerable<FeedBackDashBord.Models.FeedBack>)Model)
.Name("grid")
.Columns(columns => {
columns.Bound(o => o.id).Visible(false);
columns.Template(o => Html.ActionLink("Edit", "Edit", new { o.id })).ClientTemplate("Edit").Width(45);
columns.Bound(o => o.CurrentURL).Width("200px").Title("Reported URL");
columns.Bound(o => o.OS).Width("70px");
columns.Bound(o => o.Browser).Width("70px");
columns.Bound(o => o.UserAgent).Width("200px"); ;
columns.Bound(o => o.datetime).Title("Date Time").Width("100px");
columns.Bound(o => o.Description).Title("Description").Width("200px");
columns.Bound(o => o.Email).Width("150px");
columns.Bound(o => o.Status).Width("70px");
columns.Template(o => Html.ActionLink("Details", "Details", new { o.id })).ClientTemplate("Details").Width(65);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
.HtmlAttributes(new { style = "height:900px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("AjaxGrid", "DashBoard").Data("additionalInfo"))
)
)
<script>
function additionalInfo() {
return {
status: $("#drStaus").val()
}
}
$("#drStaus").kendoDropDownList();
</script>
In the above code i have successfully bound the Kendo Grid to a data source. Now i need to implement the following scenario.
when a option value is selected from the "drStaus" dropdown, i want to pass the selected value to the kendogrid and reload the grid according to the selected value.
Try this solution, I use demo model property to bound grid.
In view
#(Html.Kendo().DropDownList()
.Name("drStatus")
.DataTextField("Text")
.DataValueField("Value")
.Events(e => e.Change("Change"))
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "Open",
Value = "Open"
},
new SelectListItem() {
Text = "Pending",
Value = "Pending"
},
new SelectListItem() {
Text = "Other",
Value = "Other"
}
})
.Value("Open")
)
#(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(x => x.Name);
columns.Bound(x => x.Id);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("AjaxGrid", "DashBoard").Data("additionalInfo"))
)
)
And in javaScript
var additionalDataObject;
function additionalInfo() {
var dropdownlist = $("#drStatus").data("kendoDropDownList");
additionalDataObject = {
status: dropdownlist.value()
};
return additionalDataObject;
}
function Change() {
var grid = $("#grid").data("kendoGrid");
var page = grid.dataSource._page;
reloadFilterParameters();
grid.dataSource.page(page);
}
function reloadFilterParameters() {
var dropdownlist = $("#drStatus").data("kendoDropDownList");
additionalDataObject = {
status: dropdownlist.value(),
};
}
I've implemented the above scenario using Kendo Grid ToolBar Template.
http://demos.kendoui.com/web/grid/toolbar-template.html
#(Html.Kendo().Grid((IEnumerable<FeedBackDashBord.Models.FeedBack>)Model)
.Name("grid")
.Columns(columns => {
columns.Bound(o => o.id).Visible(false);
columns.Template(o => Html.ActionLink("Edit", "Edit", new { o.id })).ClientTemplate("Edit").Width(45);
columns.Bound(o => o.CurrentURL).Width("200px").Title("Reported URL");
columns.Bound(o => o.OS).Width("70px");
columns.Bound(o => o.Browser).Width("70px");
columns.Bound(o => o.UserAgent).Width("200px"); ;
columns.Bound(o => o.datetime).Title("Date Time").Width("100px");
columns.Bound(o => o.Description).Title("Description").Width("200px");
columns.Bound(o => o.Email).Width("150px");
columns.Bound(o => o.Status).Width("70px");
columns.Template(o => Html.ActionLink("Details", "Details", new { o.id })).ClientTemplate("Details").Width(65);
})
.ToolBar(toolbar =>
{
toolbar.Template(#<text>
<div class="toolbar">
<label class="category-label" for="category">Status:</label>
#(Html.Kendo().DropDownList()
.Name("drStaus")
.OptionLabel("All")
.DataTextField("Text")
.DataValueField("Value")
.AutoBind(false)
.Events(e => e.Change("categoriesChange"))
.DataSource(ds =>
{
ds.Read("ToolbarTemplate_Categories", "DashBoard");
})
)
</div>
</text>);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
.HtmlAttributes(new { style = "height:900px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("AjaxGrid", "DashBoard").Data("additionalInfo"))
)
)
<script>
function additionalInfo() {
return {
status: $("#drStaus").val()
}
}
$("#drStaus").kendoDropDownList();
</script>
<script>
function categoriesChange() {
var value = this.value(),
grid = $("#grid").data("kendoGrid");
if (value) {
grid.dataSource.filter({ field: "Status", operator: "eq", value: value });//parseInt(value)
} else {
grid.dataSource.filter({});
}
}
</script>

using checkbox in telerik grid

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>)

telerik grid show data depending on a condition using server binding

I have a telerik grid, I want to display data as below
ProductName Count
Letters 5
Phone
Pens 3
I want to do something like if count>0 then only show th evalue for count column, i.e. do not display value 0.
<% Html.Telerik().Grid(Model.Orders)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.ProductName);
if(Count>0)
{
columns.Bound(o => o.Count);
}
})
.Groupable(settings => settings.Groups(groups => groups.Add(o => o.KeyID)).Visible(false))
.Scrollable(s => s.Enabled(true))
.Scrollable(scrolling => scrolling.Height(300))
.Reorderable(reorder => reorder.Columns(true))
.Footer(true)
.Render();
%>
Thanks
You can use CellAction to render conditional results.
<%
Html.Telerik().Grid(Model.Orders)
.Name("Grid")
.CellAction(cell =>
{
if (cell.Column.Title.Equals("Count"))
{
if (cell.DataItem.Count == 0)
{
cell.Text = " ";
}
}
})
.Columns(columns =>
{
columns.Bound(o => o.ProductName);
columns.Bound(o => o.Count);
})
.Groupable(settings => settings.Groups(groups => groups.Add(o => o.KeyID)).Visible(false))
.Scrollable(s => s.Enabled(true))
.Scrollable(scrolling => scrolling.Height(300))
.Reorderable(reorder => reorder.Columns(true))
.Footer(true)
%>

How could i get selected value from dropdownlist in kendo ui grid in mvc

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))
)

Resources