problem with insert a new line of grid in a partial view

[Jack Ma]

Hi,
   I have a scenario that in one aspx page there's a tabstrip and in each tab will show a grid in a partial view, the grid has a standard insert button, the initial loading of this page is perfect, all tab laoded and the grid loaded by demand, but the bad thing is once click the insert button, the content is shown in a totally new whole page but not the right place inside a tab. Anybody can tell me where is incorrect?
   Below is my aspx file

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<OrganizationNavigationViewModel>" %>

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

    <h2><%=Resources.Globalization.MyOrganizationUserInRole%></h2>
<%
     Html.Telerik().TabStrip()
           .Name("TabStrip")
           .BindTo(Model.OrganizationNavigationData,
                   (item, OrganizationNavigationData) =>
                   {
                       item.Text = OrganizationNavigationData.Text;
                       item.ContentUrl = OrganizationNavigationData.ContenUrl;

                   })
           .SelectedIndex(0)
           .Render();

%>
</asp:Content>

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

And the partial view

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<OrganizationUsersPartialViewModel>" %>
<%
    if (Model.OrganizationUsers != null)
    {

        Html.Telerik().Grid(Model.OrganizationUsers)
        .Name("OrganizationAdministrator")
        .ToolBar(commands => commands.Insert())
        .DataKeys(keys => keys.Add(c => c.ID))
        .Columns(columns =>
        {
            columns.Bound(c => c.UserName).Width(130);
            columns.Bound(c => c.Email).Width(130);
            columns.Bound(c => c.OrganizationRole).Width(130);
            columns.Command(commands =>
            {
                commands.Delete();
            }).Width("20%").Title(iNuggets.Resources.Globalization.Commands);
        })
        .DataBinding(dataBinding =>
        {
            dataBinding.Ajax()
            .Select("MyOrganizationUserInRolePartial", "MyOrganization", new { ActionName = "Select" })
            .Insert("MyOrganizationUserInRolePartial", "MyOrganization", new { ActionName = "Insert" })
            .Delete("MyOrganizationUserInRolePartial", "MyOrganization", new { ActionName = "Delete" });
        })

        .Pageable()
        .Sortable()
        .Render();
    }

 %>

And the controller actions

        public ActionResult MyOrganizationUserInRole()
        {
            Guid userId = (Guid)System.Web.HttpContext.Current.Session["session_UserId"];
            OrganizationNavigationViewModel model = new OrganizationNavigationViewModel
            {
                OrganizationNavigationData = OrganizationNavigationDataBuilder.BuildOrganizationNavigationData(OrganizationUsersRepository.GetOrganizationsAdmined(userId, 1, 10), "MyOrganizationUserInRolePartial")
            };
            return View(model);
        }

        public ActionResult MyOrganizationUserInRolePartial(string OrganizationId)
        {
            Guid myOrganizationId = new Guid(OrganizationId);
            OrganizationUsersPartialViewModel model = new OrganizationUsersPartialViewModel
            {
                   OrganizationUsers = OrganizationUsersRepository.GetOrganizationAdministrators(myOrganizationId, 1, 10)
            };
            return PartialView(model);
        }

Any reply is very appreciated!

[Atanas Korchev]

Hello Jack Ma,

This is a very common problem and that's why we have prepared a help article showing how to load UI components in partial views via ajax (what is tab load on demand). Also we have explained the requirements in the defining content tabstrip help topic.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Jack Ma]

Hi Atanas,
    Thanks for your prompt reply just like we're face to face.
    I just go through you mentioned help link, but I don't see there's any hint about insert or edit action of grid inside the partial view.  And in my code, I'm using model binding to the tabstrip, and use contentUrl to retrieve the content for the partial view, the diaplaying is perfect but just once I click the insert button on top of the grid, it goes outside the tab to a grand new page.  
    In the mentioned help link, it's not using model binding for the tabstrip. So could you please give me a advice base on my practise, what changes should I make?


Regards
Jack

[Atanas Korchev]

Hello Jack Ma,

The help topic is generic - it does not depend on binding etc. Please read both help articles. I am sure you will manage to solve the problem.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Jack Ma]

Hi Atanas,
    You're really amazing me. Hehe, ok, I'll try and if got any problem will trouble you again. Appreciate!!

Regards
Jack

[Jack Ma]

Hi Atanas,

    I tried to add the code 

<%= Ajax.ActionLink("Load partial view", "PartialGrid", new AjaxOptions
{
    //JavaScript function executed after successful Ajax request
    OnSuccess = "updatePlaceholder",
    //The "id" attribute of the HTML placeholder
    UpdateTargetId = "result"
})%>

into my code as previous showed, but I failed to insert this code snippet, what method should I use? As I'm using contentUrl to retrieve my partial view data, and now if I want to replace it with this code snippet, what method should use? item.Action()? or item.content?  I struggled this too much time almost lose my patient to blame myself, am i too stupid? 

and also where to put the Placeholder HTML element if I'm using tabstrip, inside the tapstripitem or just the page it's self?

In the telerik extension demo, I can see only one example that use model binding for tabstrip, but unfortunately not triggering partial view showing.

Regards

Jack

[Atanas Korchev]

Hi Jack Ma,

Did you read this help topic? It clearly shows what needs to be done.

All the best,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Jack Ma]

Hi Atanas,

Yes, I do read that topic. But that link the tabstrip is using LoadContentFrom() method, but in model binding, I dont see this method can be used? 

Regards

Jack

[Atanas Korchev]

Hello Jack Ma,

Using LoadContentFrom and ContentUrl are basically the same thing. LoadContentFrom just sets the ContentUrl behind the scenes. Use the approach mentioned in the help topic.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Jack Ma]

Hi Atanas,

    Ok. but in the sample of tabstrip, there's no code to place the content into <div id="result"></div> , just use LoadContentFrom to load the content and

the content will be shown in the right tab, and I see the execution is ok,

but one thing different from my exercise is I will trigger insert function for the grid, and that content is shown in a grand new page

which is NOT my demand, should show in the respective tab,

if let's say I should write some javascript code to handle the result placeholder, just like this showed, where should I put that Ajax.actionlink code?

Regards

Jack

[Jack Ma]

Hi Atanas,

Or could you show me a sample that in a tab, a partial view has grid with insert, edit ,delete function and once trigger any function, the content shown inside the right place of tab? 

Many thanks!

Regards

Jack

[Atanas Korchev]

Hello Jack Ma,

It seems you still have not read this help topic. There is no <div id="result"></div> involved in there. I cannot help you unless you follow my suggestions. We have no example which will fullfil your exact requirements so you have to implement the approach suggested in the help topic. I don't know how to help you further.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Andy Yu]

I've got a similar problem with ajax enabled grids when we have loaded tabs on demand via LoadContentFrom. Sorting and paging seems to work fine but clicking on the "Add new record" navigates the browser to a new page contaning only the partial view with the grid. I've read the help topics but I can't seem to understand where the problem lies. I've also search around the forum and seen a few of post regardning this issue but not seen a solution.

I've used a test project that looks like this:

Index.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

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

  <h2>GridAndTabStrip</h2>

   <% Html.Telerik().TabStrip()
            .Name("AdminTab")
            .Items(tabstrip =>
            {
                tabstrip.Add()
                    .Text("FakeData1")
                    .LoadContentFrom("LoadOnDemandDocument", "Home");

                tabstrip.Add()
                    .Text("FakeData2")
                    .LoadContentFrom("LoadOnDemandDocument", "Home");

                tabstrip.Add()
                    .Text("Grid")
                    .LoadContentFrom("GridLoadOnDemand", "Home");
            })
            .Render();
        %>
</asp:Content>

GridLoadOnDemand.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<GridAndTabStrip.Models.Employee>>" %>
        <%= Html.Telerik().Grid(Model)
                .Name("Employees")
                .Pageable(pager=>pager.PageSize(2))
                .Columns(columns =>
                {
                    columns.Add(o => o.EmployeeID).Width(50);
                    columns.Add(o => o.FirstName).Width(50);
                    columns.Add(o => o.LastName).Width(50);
                    columns.Add(o => o.Address).Width(100);
                    columns.Add(o => o.City).Width(50);
                })
                .Ajax(settings => settings.Action("_AjaxBinding", "Home"))
                .Sortable(sorting => sorting.Enabled(true))
                .ToolBar(commands => commands.Insert())

        %>

HomeController.ascx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Data.Linq;
using System.Web;
using System.Web.Mvc;
using GridAndTabStrip.Models;
using Telerik.Web.Mvc;

namespace GridAndTabStrip.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            return View();
        }

        public ActionResult LoadOnDemandDocument()
        {
            return PartialView();
        }

        public ActionResult GridAndTabStrip()
        {
            return View(new NWDataContext());
        }

        public ActionResult GridLoadOnDemand()
        {
            var nw = new NWDataContext();
            return PartialView(nw.Employees.ToList());
        }

        [GridAction]
        public ActionResult _AjaxBinding()
        {
            NWDataContext nw = new NWDataContext();
            return View(new GridModel<Employee>
            {
                Data = nw.Employees
            });
        }

        public ActionResult PostBackGridInTabStrip(int? tabIndex)
        {
            ViewData["tabIndex"] = tabIndex ?? 0;
            NWDataContext nw = new NWDataContext();
            return View(nw.Employees.ToList());
        }
    }
}

Site.Master

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <%= Html.Telerik().StyleSheetRegistrar()
                     .DefaultGroup(group => group.Add("Site.css")
                                                 .Add("telerik.common.css")
                                                 .Add("telerik.vista.css")
                                  ) %>
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>

            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div>

            <div id="menucontainer">

                <ul id="menu">
                    <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%= Html.ActionLink("About", "About", "Home")%></li>
                </ul>

            </div>
        </div>

        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />

            <div id="footer">
            </div>
        </div>
    </div>
            <%= Html.Telerik().ScriptRegistrar()
                           .DefaultGroup(group => group
                                                    .Add("telerik.common.js")
                                                    .Add("telerik.grid.js")
                                                    .Add("telerik.grid.filtering.js"))
            %>
</body>
</html>

I've got no place to put a sample project but, I've managed to reuse a project that was posted by Georgi Krustev (Telerik team) on a post I found regarding a similar problem. You can recreate the problem by following these steps:

Download the project gridandtabstrip.zip on this page:

http://www.telerik.com/community/forums/aspnet-mvc/grid/problem-with-grid-loaded-in-partial-view.aspx#1174729

Upgrade the Telerik MVC 2 library

Add the code below to the grid in GridLoadOnDemand.ascx

".ToolBar(commands => commands.Insert())"

Fire up the web app and click on the grid tab and then on the "Add new record" button.

Any tips are appreciated!