[Solved] Show custom View (New URL) for Edit Template

[Reid]

Hello,

Is there a way to configure the grid so that when the Edit button is pressed a new view is loaded, not inside the edit template view that is being created when the grid is in Popup mode?  I would like to route to a new form entirely in a popup with it's own master.  That master is in use now with popups so doing so would keep it in sync with that layout.

Any suggestions would be appreciated.
Thanks,
Reid

[Dadv]

Hi,

You could use CustomCommand with DataKeys :(http://demos.telerik.com/aspnet-mvc/grid/customcolumncommand )



Html.Telerik().Grid<MyModel>()
        .DataKeys(a => a.Add(c=>c.CustomerId).RouteKey("CustomerId"))
        .Name("Grid")
  .Columns(columns =>
        {
columns.Command(a => a.Custom("edit").Action("Edit", "Customer").ButtonType(GridButtonType.Image).SendDataKeys(true).SendState(true).Text("Edit");
})
.Render()

Regards,

[Reid]

Hi Dadv,

Thank you for the response.  The link you provided does not work. 

I have put the code in place that you offer and it seems to work it that it is redirecting to another template I guess, I am not sure how the code defines the template or view name? 
Here is the code in place :

columns.Command(commands =>
   {
     commands.Custom("edit").Action("_AjaxUpdatePayerUser", "Users").ButtonType(GridButtonType.Text).SendDataKeys(true).Text("Edit");
}).Width(200).Title("Commands");

The result is that is displays a 1/4" square form exposing just the close button.  It appears it is being wrapped by Telerik still.  So not sure what I am doing wrong.

Can you offer more assistance?

Thanks,
Reid

[Dadv]

If i understand what you want to do is to change a "part" of the page with an Ajax partial View result  ?

<Quote>I am not sure how the code defines the template or view name? </Quote>
The command only "send" to an Action, the Action decide what view or partial view should be send back.

My first code send to a Action who's return a View (the entire page is change) like this :

the grid in a view (named "Index" for example)

Html.Telerik().Grid<MyModel>()
        .DataKeys(a => a.Add(c=>c.CustomerId).RouteKey("CustomerId"))
        .Name("Grid")
    .Columns(columns =>
        {
        columns.Command(a => a.Custom("edit").Action("Edit", "Customer").ButtonType(GridButtonType.Image).SendDataKeys(true).SendState(true).Text("Edit");
    })
    .Render()

The Edit form in an other view (named Edit for example)

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

<!-- Add update mechanics here -->

Actions in the controller named "Customer" :

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

public ActionResult Edit(int customerId)
{
MyCustomerModel model = myEntities.GetCustomerById(customerId);

return View(model);
}

In this case, you have 2 views in the folder Views/Customer named Index.aspx and Edit.aspx
When you click the command button you change the page for the Edit View.

--------------------

Now if you want the same but in Ajax Mode (for example replace the complete grid by a form for edition) you need some other mechanics.

Here the Index Page :

<div id="UpdatePanel">
<%= Html.Action("Grid", "Customer") %>
</div>

Here the Partial View named _Grid.ascx

<%

    Dictionary<string, object> dicEdit = new Dictionary<string, object>();

    dicEdit["data-ajax-update"] = "#UpdatePanel";

    dicEdit["data-ajax-mode"] = "replace";

    dicEdit["data-ajax-method"] = "Post";

    dicEdit["data-ajax"] = "true";

    dicEdit["novalidate"] = "novalidate";

     

     %>
<%
Html.Telerik().Grid<MyModel>()
        .DataKeys(a => a.Add(c=>c.CustomerId).RouteKey("CustomerId"))
        .Name("Grid")
  .Columns(columns =>
        {
columns.Command(a => a.Custom("edit").Action("_Edit", "Customer").HtmlAttributes(dicEdit).ButtonType(GridButtonType.Image).SendDataKeys(true).SendState(true).Text("Edit");
})
.Render() 
%>

Here the partial view named _Edit.ascx

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<MyCustomerModel>" %>

<%= Html.EditorForModel() %>

<!-- Add update mechanics here --> 



And the Actions in the Customer controller :

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

public ActionResult _Edit(int customerId)
{
    MyCustomerModel model = myEntities.GetCustomerById(customerId);

    return PartialView(model);
}

public ActionResult _Grid()
{
    MyModel model = myEntities.GetCustomers();

    return PartialView(model);
}

This is a really simplistic example, a lot of things have been remove for brevity.

If this didn't work for you, please send a sample project i could modify for you.

Regards,

[Dadv]

Edit : 
I read again your first post :
 
<quote>I would like to route to a new form entirely in a popup with it's own master </quote>

could you explain in detail this please ?

[Reid]

Hello Dadv,

First of all thank you for replying with such detailed code. All of what you posted was new to me in that I have no concrete understanding of how Telerik (or MVC in general) uses Ajax to load views.  In your post I decided to go the lower AJAX route so my main template just delares this  in the div the full grid markup was residing, replacing it ..

<div id="UpdatePanel">
    <%= Html.Action("_PayerUserGridUserControl", "Users") %>
</div>

Before explaning the JavaScript Error (below) that I am getting in IE I wanted to give more context. I have put it together the pieces you code above into my solution as I understand it.  

~/Views/Users/ManageUsers.aspx  <-- Main Template that now holds the div for the Ajax Update "UpdatePanel".
~/Views/Users/AjaxUpdatePayerUserCustomView.aspx
~/Views/Users/_PayerUserGridUserControl.ascx   <-- UserControl that contains the full Telerik Grid markup, strongly typed for "PayerUserViewModel", the view model class that wraps the List<PayerUserModel> member that the grid is bound too. If I use anything other than the code below in the grid declaration it bombs.  (for instance : IEnumerable<PayerUserModel>(model))

<%: Html.Telerik().Grid(Model.PayerUsers) ....

Here are the controller actions (UsersController) (the data key is a Guid, the membershipID)

public ActionResult _AjaxUpdatePayerUserCustomView(Guid memberID)
{
   PayerUserViewModel userModel = new PayerUserViewModel(); // This would be filled ..
   return View("AjaxUpdatePayerUserCustomView", userModel);
}


public ActionResult _PayerUserGridUserControl(PayerUserViewModel userModel)
{
  viewModel.PayerUsers = _PayerUsers(); // Grid Action that searches for and returns users
  return PartialView(viewModel);
}

 
When this executes there is a JavaScript Error in IE.  I assume in Firefox as well.. Not sure how to show JS errors in FireFox other than the debugger section which in this case in not showing the error.  In any result is shows a a JS error with the code below highlighted.

function anonymous(data) {
var p=[];with(data){p.push('/Users/_AjaxUpdatePayerUserCustomView/',MembershipID,'?Grid-page=',__page,'&Grid-orderBy=',__orderBy,'&Grid-groupBy=',__groupBy,'&Grid-filter=',__filter,'');}return p.join('');
}

The (data) param above is null in the debugger.

The result is no command buttons visible.

I attached image an image of a Firebug screen shot of the command buttons not showing.

The expanded HTML tab with no .css, shows an "Edit" link.   And hovered over the link shows the right data I beleive ..  the MembershipID (Guid) of the user.  (right above the horizontal deliniation of firebug).


Again thank you for spending so much time and detail on this.  I am almost there.

And in answer to your other post yes, I would like to show the Edit template in another view and then return to the ManageUsers view.

Regards,

Reid

[Dadv]

Hi,
A sample is worth a thousand words ...i'll create a sample for the 2 examples upstairs in the afternoon (GMT+1) .

[Dadv]

Here the sample.

You will found 2 examples of Custom Command button:

In server side (replace all the page) and in Ajax Mode (replace only a small part of the page)

Index.aspx

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

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

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: ViewBag.Message %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc<;/a>.
    </p>

    <p>
        To learn more about working with the Telerik Extensions for ASP.NET MVC, you can visit the folowing resources:
    </p>
    <ul>
        <li><a href="http://demos.telerik.com/aspnet-mvc/">online demos</a></li>
        <li><a href="http://www.telerik.com/help/aspnet-mvc/introduction.html">online documentation</a></li>
        <li><a href="http://www.telerik.com/community/forums/aspnet-mvc.aspx">community forums</a></li>
        <li><a href="http://tv.telerik.com/products/aspnet-mvc">videos on Telerik TV</a></li>
    </ul>



    <div id="UpdatePanel">

    <%= Html.Action("List", "Home")%>

    </div>
</asp:Content>

List.asp

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%
    Dictionary<string, object> dic = new Dictionary<string, object>();
    dic["data-ajax-update"] = "#UpdatePanel";
    dic["data-ajax-mode"] = "replace";
    dic["data-ajax-method"] = "Get";
    dic["data-ajax"] = "true";

    Html.Telerik().Grid<TelerikMvcApplication1.Models.OrderModel>()
        .Name("Grid")
        .DataKeys(dt => dt.Add(a => a.OrderID).RouteKey("OrderID"))
        .Columns(columns =>
        {
            columns.Command(c => c.Custom("edit").Action("Edit", "Home").SendDataKeys(true).Text("Server Command"));
            columns.Command(c => c.Custom("edit").Action("_Edit", "Home").SendDataKeys(true).Text("Ajax Command").HtmlAttributes(dic));
            columns.Bound(o => o.OrderID).Width(100);
            columns.Bound(o => o.Name).Width(200);
        })
        .DataBinding(dataBinding => dataBinding.Ajax().Select("_AjaxBinding", "Home"))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .Render();
%>

Edit.aspx

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

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

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

<h2>Edit</h2>


<h4>My Edition View</h4>
<%using (Html.BeginForm())
  { %>
<%= Html.EditorForModel()%>
<input id="Submit1" type="submit" value="Edit" />
<%} %>


<%= Html.ActionLink("Back", "Index", "Home")%>
</asp:Content>

_Edit.ascx

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

<h4>My Edition View</h4>
<%using (Ajax.BeginForm(new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "UpdatePanel", HttpMethod="Post" }))
  { %>
<%= Html.EditorForModel()%>
<input id="Submit1" type="submit" value="Edit" />
<%} %>

<%= Ajax.ActionLink("Back", "List", "Home", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "UpdatePanel" })%>

Site.master

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

<!DOCTYPE html>
<html>
<head runat="server">
    <title>
        <asp:ContentPlaceHolder ID="TitleContent" runat="server" />
    </title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/3.5/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>
    <%: Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.web20.css").Combined(true).Compress(true)) %></head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>      </header>
        <section id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            <footer>
            </footer>
        </section>
    </div>
    <%: Html.Telerik().ScriptRegistrar().jQuery(false).jQueryValidation(false).DefaultGroup(action=> action.Combined(true).Compress(true))%>
</body>
</html>

The Model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Telerik.Web.Mvc;

namespace TelerikMvcApplication1.Models
{
    public class OrderModel
    {
        public int OrderID
        {
            get;
            set;
        }

        public string Name
        {
            get;
            set;
        }
    }
}

And the controller

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }

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

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

        [GridAction]
        public ActionResult _AjaxBinding()
        {
            return View(new GridModel<OrderModel>
            {
                Data = GetOrders()
            });
        }


        public ActionResult Edit(GridCommand command, int orderID)
        {

            var model = GetOrders().First(o => o.OrderID == orderID);

            return View(model);
        }



        [HttpPost]
        public ActionResult Edit(OrderModel model)
        {
            if (ModelState.IsValid)
            {
                // Add Edit magic
                return RedirectToAction("Index");
            }

            return View(model);
        }


        public ActionResult _Edit( int orderID)
        {

            var model = GetOrders().First(o => o.OrderID == orderID);

            return PartialView(model);
        }


        [HttpPost]
        public ActionResult _Edit(OrderModel model)
        {
            if (ModelState.IsValid)
            {
                // Add Edit magic
                return PartialView("List");
            }

            return PartialView(model);
        }


        private IEnumerable<OrderModel> GetOrders()
        {
            List<OrderModel> list = new List<OrderModel>();
            list.Add(new OrderModel { OrderID = 1, Name = "Name1" });
            list.Add(new OrderModel { OrderID = 2, Name = "Name2" });
            list.Add(new OrderModel { OrderID = 3, Name = "Name3" });
            list.Add(new OrderModel { OrderID = 4, Name = "Name4" });

            return list;
        }
    }

I test it and work for me

Regards,

[Reid]

Hi Dadv,

Again, thanks for helping me understand this process.  I have been busy in other sections of the app for the last day or two.  I plan to look at the example over the next few days.

Thanks!
Reid