This question is locked. New answers and comments are not allowed.
I am trying to use a Telerik Grid to display some data using Server Binding. The main problem is that I have my Index.cshtml with several options for filtering, and a button using Ajax.BeginForm to submit the HttpPost. The data is returned and then populated into a Partial View.
Everything works fine at first, until you decide to click on the column headers for sorting, which opens the same grid on a View with no formatting. I have created a sample project to demonstrate it, and I am posting here.
_Layout.cshtml (Note that I register all the grid's js):
HomeController.cs
Index.cshtml
And finally the Partial View where the grid resides, ShowGridNoPost.cshtml:
Any help would be extremely appreciated. I have also attempted to follow the example mentioned on the documentation (Loading using AJAX), but it did not work for me.
Thanks again,
Rafael Medeiros
Everything works fine at first, until you decide to click on the column headers for sorting, which opens the same grid on a View with no formatting. I have created a sample project to demonstrate it, and I am posting here.
_Layout.cshtml (Note that I register all the grid's js):
@using Telerik.Web.Mvc.UI;<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script> @(Html.Telerik().StyleSheetRegistrar() .DefaultGroup(group => group .Add("telerik.common.css") .Add("telerik.windows7.css") .Add("telerik.rtl.css") .Combined(true) .Compress(true)))</head><body> <div class="page"> @RenderBody() </div> @(Html.Telerik().ScriptRegistrar() .jQuery(false) .DefaultGroup(group => group .Add("telerik.common.js") .Add("telerik.grid.js") .Add("telerik.grid.filtering.js") .Compress(true)))</body></html>HomeController.cs
using System.Collections.Generic;using System.Web.Mvc;using ServerDataBindingGrid.Models;namespace ServerDataBindingGrid.Controllers{ public class HomeController : Controller { public ActionResult Index() { return View(); } [HttpPost] public ActionResult ShowGrid() { // Process filtering...removed for the sake of the sample. return RedirectToAction("ShowGridNoPost"); } public ActionResult ShowGridNoPost() { return PartialView(getSampleData()); } private List<Employee> getSampleData() { var employees = new List<Employee>(); employees.Add(new Employee() { FirstName = "John", LastName = "Doe", Department = "ITS", SupervisorName = "Matt Smith" }); employees.Add(new Employee() { FirstName = "Aaron", LastName = "Jacobson", Department = "ITS", SupervisorName = "Matt Smith" }); employees.Add(new Employee() { FirstName = "Phillip", LastName = "Stone", Department = "ITS", SupervisorName = "Matt Smith" }); employees.Add(new Employee() { FirstName = "Peter", LastName = "Kirkland", Department = "ITS", SupervisorName = "Matt Smith" }); employees.Add(new Employee() { FirstName = "William", LastName = "McDonald", Department = "ITS", SupervisorName = "Matt Smith" }); return employees; } }}Index.cshtml
@{ ViewBag.Title = "Home Page";}<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script><script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script><script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script><div> @using (Ajax.BeginForm("ShowGrid", "Home", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "search_results" })) { <p>Click the button below to display the grid.</p> <input type="submit" name="actionType" value="Display Grid"/> } <div id="search_results"> </div></div>And finally the Partial View where the grid resides, ShowGridNoPost.cshtml:
@using Telerik.Web.Mvc.UI;@model List<ServerDataBindingGrid.Models.Employee>@{ ViewBag.Title = "ShowGridNoPost";}<div> @{ Html.Telerik().Grid(Model) .Name("Employees") .Columns(columns => { columns.Bound(e => e.FirstName).Width(50); columns.Bound(e => e.LastName).Width(150); columns.Bound(e => e.Department).Width(50); columns.Bound(e => e.SupervisorName); }) .DataBinding(binding => binding.Server()) .Footer(false) .Sortable() .Render(); } </div>Any help would be extremely appreciated. I have also attempted to follow the example mentioned on the documentation (Loading using AJAX), but it did not work for me.
Thanks again,
Rafael Medeiros