This is a migrated thread and some comments may be shown as answers.

[Solved] Grid on View + another Grid in Modal Window

4 Answers 77 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Rainer asked on 23 Jun 2011, 09:15 PM

Hi guys,

I have a small problem with a Telerik Grid, this is my scenario: I have a view with a grid that displays some items and an Edit button for each of them which opens a (modal) Telerik window that loads a custom ascx control to edit its details. This control contains another Telerik Grid which itself is Ajax bound to a list of items - exactly the same procedure as I did with the working grid. When the window opens all textboxes are bound correctly, however the Grid does not even call the Controller method which it is bound to. Instead I get this javascript error in telerik.grid.min.js:

g[this.plugins[k]] is undefined

When I hit the Refresh button, the Grid calls the Controller and the correct JSON result is returned in response. But the Grid does not get refreshed - it dies with

o.display is not a function

This is the View which works allright. When I click the Edit button I make an Ajax GET, put the result into Window.Content and open it.

<%@ Page Title="" Language="C#" MasterPageFile="~/Areas/MemberArea/Views/Shared/MemberBE.Master" Inherits="System.Web.Mvc.ViewPage<

dynamic>" StylesheetTheme="Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

My object list

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeaderContent" runat="server">

<% Html.Telerik().ScriptRegistrar().DefaultGroup(group => group

.Add("telerik.common.min.js"));

%>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<div id="detailsPanel">

<%= Html.Telerik().Window()

.Name("Window")

.Title("Edit Object")

.Content("oops! no content loaded... yet!")

.Width(700)

.Height(500)

.Modal(true)

.Draggable(true)

.Visible(false)

%>

</div>

<% Html.Telerik().Grid<BookingObjectViewType>()

.Name("MasterGrid")

.ToolBar(toolbar =>

{

toolbar.Template(() =>

{ %>

<span class='ImageButton Add16' onclick='updateRecord()'> </span>

<%});

})

.DataKeys(keys => keys.Add(o => o.Id))

.DataBinding(dataBinding => dataBinding

.Ajax()

.Select("GetMasterObjects", "MyController")

.Insert("AddMasterObject", "MyController")

.Update("SaveMasterObject", "MyController")

.Delete("DeleteMasterObject", "MyController"))

.Columns(columns =>

{

columns.Bound(o => o.Name).Width(150);

columns.Bound(o => o.DefaultPrice).Width(70).Format("{0:c}");

columns.Bound(o => o.Id).Template(o =>

{

}).Width(150).ClientTemplate

(

"<span class='ImageButton' onclick='updateRecord(<#= Id #>)' />"

).Title("Actions");

})

.Editable(editing => editing.Mode(GridEditMode.PopUp))

.Pageable()

.Scrollable()

.Sortable()

.Render();

%>

<script type="text/javascript">

function updateRecord(id) {

var url = '<%= Url.Action("EditMasterObject", "MyController") %>';

$.get(url, { objectID: id }, function (data) {

var window = $('#Window').data('tWindow');

window.content(data);

window.center().open();

});

}

</script>

</asp:Content>

Now this is the ascx control which is loaded by the GET. Unfortunately the Grid is not able to initialize. As you can see: The Grid is in an Ajax Form which I need as this is in a popup window. However the same error occurs when I put the Grid outside of this form. The javascript error mentioned above occurs right when the window (popup) opens:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MasterObject>" %>

<script type="text/javascript">

function HandleResult(context) {

// Controller returns True if success otherwise View

if (context == '<%= Boolean.TrueString %>') {

$('#Window').data('tWindow').close();

// refresh masterGrid - that works all great except that Grid :)

}

else {

// update window with returned view data which contains the validation errors... does not matter here

}

</script>

<%= Html.ValidationSummary("Errors occured on saving: ") %>

<% Html.EnableClientValidation(); %>

<% using (Ajax.BeginForm("EditMasterObject", new { objectId = Model == null ? 0 : Model.Id}, new AjaxOptions() { OnSuccess = "HandleResult" }))

{ %>

<fieldset>

<legend>Common Fields</legend>

<span class="midi">

<%= Html.Label("Object Name")%>

<%= Html.TextBoxFor(o => o.Name)%>

<%= Html.ValidationMessageFor(o => o.Name, "*")%>

</span>

</fieldset>

<fieldset>

<legend>Product list</legend>

<%= Html.Telerik().Grid<ProductViewType>()

.Name("ProductGrid")

.ToolBar(toolbar =>

{

toolbar.Insert();

})

.DataKeys(keys => keys.Add(i => i.Id))

.DataBinding(dataBinding => dataBinding

.Ajax()

.Select("GetProducts", "MyController", new { objectId = Model == null ? 0 : Model.Id })

.Insert("AddProduct", "MyController")

.Update("SaveProduct", "MyController")

.Delete("DeleteProduct", "MyController"))

.Columns(columns =>

{

columns.Bound(i => i.Name).Width(150);

columns.Bound(i => i.Price).Width(70).Format("{0:c}");

columns.Command(commands =>

{

commands.Edit();

commands.Delete();

}).Width(150);

})

.Editable(editing => editing.Mode(GridEditMode.InLine))

.Pageable()

.Scrollable()

.Sortable()

%>

</fieldset>

<input type="submit" id="saveButton" value="Save" />

<% } // end of form %>

I really hope someone has an idea here as I am stuck.

[Solved] Grid on View + another Grid in Modal Window

4 Answers, 1 is accepted