i'm trying to show the master/detail, and the detail won't show until I click Edit on the master row and save. So, initially when the grid appears, the + signs appear but when I click on them, no data displayed. The data is displayed after I click on Edit on the master line and save.
Here is my view:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<GridAlphabeticPaging.Models.AlphabeticStudentsViewModel>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Index
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Students</h2>
<%Html.Telerik()
.Grid(Model.Students)
.Name("Students")
.DataKeys(k => k.Add(s => s.StudentID))
.DataBinding(dataBinding => dataBinding
//Server binding
.Ajax()
//Home.Index renders the grid initially
.Select("Index", "Student")
//Home.Insert inserts a new data record
.Insert("Insert", "Student")
//Home.Update updates an existing data record
.Update("Update", "Student")
//Home.Delete deletes an existing data record
.Delete("Delete", "Student")
)
.ToolBar(toolBar => toolBar.Template(() =>
{%>
<a href="#" class="t-grid-action t-button t-state-default t-grid-add">Add Student</a>
<div class="t-pager-wrapper" style="border-bottom:0">
<div class="t-pager t-reset">
<%foreach (var letter in Model.Letters){%>
<%=Html.ActionLink(letter, "Index", new { letter }, new { @class = "t-link" })%>
<%}%>
<%=Html.ActionLink("All", "Index")%>
</div>
</div>
<%}))
.Columns(columns =>
{
columns.Bound(s => s.FirstName).Width(20).Filterable(true);
columns.Bound(s => s.LastName).Width(20).Filterable(true);
columns.Bound(s => s.City).Width(20).Filterable(false);
columns.Bound(s => s.State).Width(20).Filterable(false);
columns.Bound(s => s.Cell).Width(20).Filterable(false);
columns.Command(commands =>
{
commands.Edit();
commands.Delete();
commands.Select();
}).Width(100);
})
.DetailView(detailView => detailView.ClientTemplate(
// Define a grid bound to the Order object
Html.Telerik().Grid<Models.StudentSchool>()
//Ensure the Name of each grid is unique
.Name("Schools_<#= StudentID #>")
.DataBinding(dataBinding => dataBinding.Ajax()
// Specify the action method which returns the Orders for a particular Employee
// Notice how the `EmployeeID` value is passed as the `id` argument using a client expression
.Select("Schools", "Student", new { id = "<#= StudentID #>" }))
.Columns(columns =>
{
columns.Bound(c => c.StudentID);
columns.Bound(c => c.SchoolID);
})
.Pageable()
// The client detail view template requires a string so we are using the ToHtmlString method
.ToHtmlString()
))
// Handle the OnRowDataBound event in order to expand certain rows
.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
.Filterable(filtarable => filtarable.Filters(filters =>
{
if(!string.IsNullOrEmpty(Model.SelectedLetter))
{
filters.Add(s => s.LastName).StartsWith(Model.SelectedLetter);
}
}))
.Scrollable(c => c.Height("400px"))
.HtmlAttributes(new { @style = "width:100%" })
.Selectable()
.Editable(editing => editing.Mode(GridEditMode.PopUp))
.Render();
%>
<script type="text/javascript">
function onRowDataBound(e) {
var grid = $(this).data('tGrid');
// Expand the first row only
if (grid.$rows().index(e.row) == 0) {
grid.expandRow(e.row);
}
}
</script>
</asp:Content>
15 Answers, 1 is accepted
This is very strange because your code looks perfectly ok. Do you see any JavaScript errors? A JavaScript error may prevent the detail view from working. Is there a chance to send us a project which reproduces the problem?
Regards,Atanas Korchev
the Telerik team
Rank 1
This just started with an upgrade to the 2010.3.1318 release.
We have a grid with a Master -> Detail -> Detail hierarchy, Server binding. When the 1st level of detail is expanded, it works fine. But when you click on the + for the 2nd level of detail, nothing happens, the row is not expanded. I tried putting in a RowAction to expand both levels on initial entry to the view, and that works fine & expands both levels, but then when you click on the - to collapse the 2nd level of detail, nothing happens. Clicking the - to collapse the first level works fine.
The same grid is working in release 2010.2.1101.
If I look at the HTML using Developer Tools, I can see the data is there for that 2nd level of detail, so it's something to do with the +/- not responding. Any suggestions?
Rank 1
This is my controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Company.Models;
using GridAlphabeticPaging.Models;
using Telerik.Web.Mvc;
namespace Company.Controllers
{
public class StudentController : Controller
{
//
// GET: /Student/
IStudentRepository studentRepository;
public StudentController() : this(new StudentRepository())
{
}
public StudentController(IStudentRepository repository)
{
studentRepository = repository;
}
[GridAction]
public ActionResult Index(string letter)
{
return View(new AlphabeticStudentsViewModel
{
Students = studentRepository.All(),
//Students = db.Students,
Letters = Enumerable.Range(65, 25).Select(i => ((char)i).ToString()),
SelectedLetter = letter
});
}
//
// GET: /Student/Details/5
public ActionResult Details(int id)
{
return View();
}
[HttpPost]
[GridAction]
//public ActionResult Insert([Bind(Exclude = "StudentID")]
// Student student)
public ActionResult Insert()
{
//Create a new instance of the EditableCustomer class.
Student student = new Student();
//Perform model binding (fill the customer properties and validate it).
if (TryUpdateModel(student))
{
//The model is valid - insert the customer.
studentRepository.Insert(student);
studentRepository.Save();
}
//Rebind the grid
return View(new GridModel(studentRepository.All()));
}
//
// GET: /Student/Edit/5
public ActionResult Edit(int id)
{
return View();
}
//
// POST: /Student/Edit/5
[AcceptVerbs(HttpVerbs.Post)]
[GridAction]
public ActionResult Update(int id)
{
Student student = studentRepository.GetStudent(id);
UpdateModel(student);
studentRepository.Save();
return View(new GridModel(studentRepository.All()));
}
[GridAction]
public ActionResult Schools(int id)
{
return View(new GridModel(new CompanyDataContext().StudentSchools.Where(s => s.StudentID == id)));
}
}
}
Unfortunately we cannot provide any further help without reproducing the problem first. Please send us some runnable code with this regard. You can use dummy in-memory data to avoid sending us production databases.
Looking forward to your reply!Regards,
Atanas Korchev
the Telerik team
Rank 1
Thank you.
Rank 1
[
GridAction]
public ActionResult Index(string letter)
{
return View(new AlphabeticEmployeesViewModel
{
Employees = EmployeeRepository.All(),
Letters =
Enumerable.Range(65, 25).Select(i => ((char)i).ToString()),
SelectedLetter = letter
});
}
The constructor of the GridModel needs an IEnumerable<T>. You can try this:
return View(new GridModel(EmployeeRepository.All()));
Atanas Korchev
the Telerik team
Rank 1
Inherits
="System.Web.Mvc.ViewPage<GridAlphabeticPaging.Models.AlphabeticEmployeesViewModel>"
Because I am using the alphbetic paging example you have online. How am I suppose to return the Letters and SelectedLetter varaibles then?
The ajax method which feeds the grid (decorated with the GridAction attribute) never renders the actual view.
Regards,Atanas Korchev
the Telerik team
Rank 1
I guess I'm just unsure what else I need to change at this point.
Thanks.
I somehow missed your attachment. Now after reviewing it I know what the problem is.
Originally the alphabetic pager example is using server binding. In your project you are defining the client detail template which is however populated only if you are using client binding for the master grid. This is the reason why the child template is empty initially and appears after editing a record. There are two possible ways to solve this problem:
- Convert the alphabetic paging to work with ajax bound master grid
- Use only server binding (thus server detail template) for the child and master grids
I implemented the first option and I am attaching the updated project.
Atanas Korchev
the Telerik team
Rank 1
Thanks again for the timely response!
Michael
Rank 1
When I click on the Add button in the toolbar, the insert popup is displayed and immediately disappears. Do you know why?
Thanks...
Probably because of the code in onLoad which performs the alphabetic paging. Change the selector to exclude the add link:
$(this).find("> .t-grid-toolbar a:not(.t-grid-add)").click(function(e) {
Atanas Korchev
the Telerik team
Rank 1