Develop Reference

Dynamic Scrolling Telerik MVC Grid

I am trying to take off the pagination from a couple of Telerik MVC Grids that have a large amount of data loaded into them (upwards of 5000, probably more once they hit production). With our smaller grids, I would just take off the Pageable property(see code below) and the scrolling functionality just works.
With the larger grids I get a JSON error saying that the length of the string exceeds the value set on the maxJsonLength property. I updated the webconfig to be set to the max value as per this links suggestion but it still gave me the same error.
The version of Telerik that I am using is plain Telerik(not Kendo) and is the MVC version (main UI DLL is Telerik.Web.MVC, version 2012.2.801.340).
All documentation that I have found either points me to the new version of Kendo or a RadGrid, which is not included/supported in my version.
Is there a way to acheive this, either by loading it all at once like this does here, or creating a dynamically loading grid using the Telerik version I have, or am I out of luck? I am also open to suggestions for another way to achieve this, but the results have to be in a Grid of some sort.
Below is the basic code for what I have for all grids. The larger grids that I am having issues with have more columns than this one which help account for the JSON error.
#(Html.Telerik().Grid<ApportionmentCode>()
.DataBinding(dataBinding => dataBinding.Ajax().Select("AjaxGetAppCodes", "AppCode"))
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.Id)
.Title("ID")
.Width(50)
.HtmlAttributes(new { #class = "text-center" })
.Hidden();
columns.Bound(o => o.Code)
.Title("AppCode")
.Width(90)
.HtmlAttributes(new { #class = "text-center" });
columns.Bound(o => o.Description)
.Title("Description")
.HtmlAttributes(new { style = "min-width: 200px;" })
.ClientTemplate("<span class=\"clip tooltip\"><#= Description #></span>");
columns.Command(commands =>
{
commands.Custom("edit")
.Text("Edit")
.ButtonType(GridButtonType.Image)
.Action("Edit", "AppCode")
.ImageHtmlAttributes(new { #class = "t-edit", title = "Edit" })
.DataRouteValues(route => route.Add(o => o.Id));
})
.Width(78)
.HtmlAttributes(new { #class = "nowrap" })
.IncludeInContextMenu(false);
})
.ToolBar(commands => commands.Custom()
.Text("Add")
.Action("Create", "AppCode", Request.GetRouteValues())
.ButtonType(GridButtonType.ImageAndText)
.ImageHtmlAttributes(new { #class = "t-add" })
.HtmlAttributes(new { #class = "addButton" }))
.Filterable()
.ClientEvents(events =>
{
events.OnDataBound("onDataBound");
events.OnComplete("AddGridFilter");
events.OnLoad("OnGridLoad");
})
.ColumnContextMenu()
.Sortable()
.Pageable(paging => paging.PageSize(20).Style(GridPagerStyles.NextPreviousAndNumeric).Position(GridPagerPosition.Bottom)) //When removed, this is the line that causes the JSON error
.Resizable(resizing => resizing.Columns(true))
.Scrollable(a => a.Height("auto")))
Thanks in advance

In the controller, I assume you have something like:
DataSourceResult result = model.ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);
If you use the Newtonsoft package and change it to this, this should allow a larger amount of data through.
DataSourceResult result = model.ToDataSourceResult(request);
var json = Newtonsoft.Json.JsonConvert.SerializeObject(result);
return Content(json, "text/json");
EDIT:
If the problem is too much data and you don't want paging, how about trying virtualization by adding:
.Scrollable(scrollable => scrollable.Virtual(true))
You'll still need a page size, an example is here: http://demos.telerik.com/aspnet-mvc/grid/virtualization-remote-data

How to change kendo grid column width after bound in mvc?

I'm trying to set width for one of the columns kendo grid.
Here the simple code:
#(Html.Kendo()
.Grid<MyObject>()
.Name("Name")
.TableHtmlAttributes(new { style = "height: auto;" })
.Columns(c => {
c.Bound(m => m.ObjectId).Hidden();
c.Bound(m => m.Type).Title()
//Bound other fields
if (Model.Property)
{
c.Bound(m => m.Price).Title()
.HeaderHtmlAttributes(new {title = "Price"});
//Here I want to change the width of my first column
c.Container.Columns.Where(x => x.Title == "Type").FirstOrDefault.Width(200);
}
})
.Scrollable(src => src.Height(261))
.DataSource(ds => ds
.Ajax()
.Events(e => e.Error("app.ui.kendo.onGridError").RequestEnd("app.ui.project.onRequestEnd"))
.Read(r => r
.Action("Action", "Controller", new { Id = #Model.Id })
.Type(HttpVerbs.Get))))
The problem is that compiler said "Method, delegate or event expected". Are there another ways to change width after bounding the column?

To Change it after bound you have to
1) Attach an event in kendo grid like
#(Html.Kendo().Grid<SomeModel>()
.Name(Model)
.Events(e => e.DataBound("some_name"))
2) In Jquery
function some_name(e) {
// Access the column here to set the width
$('#SomeField').width(percentage)
}

This question has been answered before by Telerik themselves. Here ya go!
http://www.telerik.com/forums/change-column-widths-after-grid-created
It looks like it's unsupported out of the box, or was so in 2013 at least. Personally I would just grab the options from the grid, change the width of the column you need, and then re-apply these options to the grid.
My workplace uses Kendo for all our UI's and this is probably the easiest way I've found to edit multiple options after databound, even if they're not exposed through Kendo methods.
Code below is just an example, probably missed something but should get you started.
var grid = $("#Name").data("kendoGrid");
var opts = grid.options;
opts.columns[0].width = "1000px";
grid.setOptions(y);
I don't believe this requires a grid refresh, but it might. Also I believe you can use the string name of the field tied to the column instead of the index.

Partial View in kendo grid column

I have an ajax enabled kendo grid with a client template that displays data from the model to which the row is bound.
(because of ajax, using columns.Template seems not possible.)
#(Html.Kendo().Grid<Model>()
.Columns(columns =>
{
columns.Bound(x => x.SubModel).ClientTemplate("bla #= SomePropertyOfSubModel # bla")
})
.DataSource(dataSource => dataSource.Ajax())
This works basically, but I am not satisfied with the result. For ex., I have problems to make kendo controls in the template work. I would rather hang a partial view in the client template, but did not succeed. The farthest I got was
columns.Bound(x => x.SubModel).ClientTemplate(Html.PartialView("view", //??) //how to bind to SubModel?
.ToHtmlString())
Any help is appreciated.

I think you need .ToClientTemplate() in your kendo control template,
view.cshtml
#(Html.Kendo().NumericTextBox()
.Name("NameHere")
.Min(0)
.HtmlAttributes(new { style = "width:200px" })
.ToClientTemplate()
)
And then,
columns.Bound(c => c.SubModel).ClientTemplate(Html.Partial("view").ToHtmlString());
Edit:
If you want to bind a model to the partial view, you could do
columns.Bound(c => c.SubModel.Property).Template(#<text>Html.Partial("view", item.SubModel)</text>);

Here's another way to accomplish this.
#(Html.PageElement().Kendo().Grid<myModel>()
.Name("GridName")
.Columns(col =>
Html.RenderPartial("Partials/_myDamnedPartial", col)

Update columns with Editor template in Kendo UI MVC

I'm a newbie in MVC and Kendo UI, use the Kendo UI MVC to create the Grid using Ajax binding, and add combobox in one column using editor template. When i select in combobox, it will display DataValueField in the column (DistDetSubName), But the column DistDetID don't display something.. How can i get DataTextField combobox in this column (DistDetID) ???
Grid with editor template in column like below code :
columns.Bound(e => e.BatNbr).Hidden(true);
columns.Bound(e => e.RecordID).Hidden(true);
columns.Bound(e => e.DistDetID).EditorTemplateName("test");
columns.Bound(e => e.DistDetSubName);
Code in test.cshtml in Editor Templates folder:
#model string
#(Html.Kendo().ComboBox()
.Name("DistDetSubName")
.DataTextField("DistDetID")
.DataValueField("DistDetSubName")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetDist", "DM");
})
.ServerFiltering(false);
})

Code in test.cshtml in Editor Templates folder:
#model string
#(Html.Kendo().ComboBox()
.Name("DistDetID")
.DataTextField("DistDetSubName")
.DataValueField("DistDetID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetDist", "DM");
})
.ServerFiltering(false);
})
Refrence Link

Update data in textboxfor fields using a selected object in a dropdownlist

In a view where my user can create a new item, he will have to select an item from a dropdownlist like this:
#Html.DropDownListFor(model => model.m_CustomerId, ViewBag.ListCustomers as SelectList, "--- Select Customer ---", new {#class = "CustomerInfo" })
When the selection is made, there are fields in the current view that would name to be updated with the selection made. Those fields are like those:
Item Name: #Html.TextBoxFor(model => model.m_ItemName, new { #disabled = "disabled" }) #Html.ValidationMessageFor(model => model.m_ItemName)<br/>
Item Date: <span style="font-weight: bold">#Html.DisplayFor(model => model.m_ItemDate)</span> #Html.ValidationMessageFor(model => model.m_ItemDate)<br/>
I've read a few things like maybe using JQuery or Java, but I'm honestly cluesless and I don't know these languages. How could I do this? I do not mind trying out languages, scripts or anything else, but I'm rather a newbie in MVC app and this is puzzling me. Thanks a lot!

So what you might want to do is download and install jQuery via NuGet Package Manager. Once you've gotten that installed then we can extend the controls. You could extend the DropDownListFor by adding some attributes.
#Html.DropDownListFor(model => model.m_CustomerId,
ViewBag.ListCustomers as SelectList,
"--- Select Customer ---",
new
{
#class = "CustomerInfo",
onchange = "function() { $('m_ItemName').val($(this).text()); }"
}
)