[CLOSED] MVC Ajax Automatic binding

  1. #1

    [CLOSED] MVC Ajax Automatic binding

    What is the propery way, in MVC, to pass a GridPanel item via an Ajax Proxy in order to wire up automatic binding to the parameter of the function, and what is the correct result type to pass back (if any) to the Grid?

    For example:
    Controller Code
    <HttpPost()> _
    Public Function _AddTeam(ByVal team As CWTeam) As ActionResult
                Dim grid As Telerik.Web.Mvc.GridModel
                Dim results As New List(Of Models.CWTeam)
                Dim svc As New Services.TeamService
    
                results.Add(svc.CreateTeam(team))
                grid = New Telerik.Web.Mvc.GridModel(results)
    
                Return View(grid)
    
            End Function

    Model:
    Namespace Models
        Public Class CWTeam
    #Region "Properties"
            <DisplayName("Team ID")> _
            Public Property CWTeamID As Integer
                Get
                    Return Me._CWAssignmentTeamID
                End Get
                Set(ByVal value As Integer)
                    Me._CWAssignmentTeamID = value
                End Set
            End Property
    
            <Required(), DisplayName("Team Name")> _
            Public Property Name() As String
                Get
                    Return _name
                End Get
                Set(ByVal value As String)
                    _name = value
                End Set
            End Property
    
    #Region "ForeignKeys"
            <Required(), DisplayName("Reviewer")> _
            Public Property ReviewerEmployeeID As Integer
                Get
                    Return Me._reviewerEmployeeID
                End Get
                Set(ByVal value As Integer)
                    Me._reviewerEmployeeID = value
                End Set
            End Property
    
            <Required(), DisplayName("QA Reviewer")> _
            Public Property QAReviewerEmployeeID As Integer
                Get
                    Return Me._qaReviewerEmployeeID
                End Get
                Set(ByVal value As Integer)
                    Me._qaReviewerEmployeeID = value
                End Set
            End Property
    
            <Required(), DisplayName("Drafter")> _
            Public Property DrafterEmployeeID As Integer
                Get
                    Return Me._drafterEmployeeID
                End Get
                Set(ByVal value As Integer)
                    Me._drafterEmployeeID = value
                End Set
            End Property
    
            <Required(), DisplayName("Correspondent")> _
            Public Property CorrespondentEmployeeID As Integer
                Get
                    Return Me._correspondentEmployeeID
                End Get
                Set(ByVal value As Integer)
                    Me._correspondentEmployeeID = value
                End Set
            End Property
    #End Region
    
            <Required(), DisplayName("Last Modified"), [ReadOnly](True)> _
            Public Property LastModified As Date
                Get
                    Return Me._lastModified
                End Get
                Set(ByVal value As Date)
                    Me._lastModified = value
                End Set
            End Property
    
      #End Region
    
    #Region "Local"
            Private _name As String
            Private _CWAssignmentTeamID As Integer
            Private _lastModified As Date
            Private _reviewerEmployeeID, _qaReviewerEmployeeID, _drafterEmployeeID, _correspondentEmployeeID As Integer
    #End Region
    
        End Class
        
    End Namespace
    Last edited by Daniil; Jun 11, 2012 at 2:34 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Quote Originally Posted by adelaney View Post
    What is the propery way, in MVC, to pass a GridPanel item via an Ajax Proxy in order to wire up automatic binding to the parameter of the function, and what is the correct result type to pass back (if any) to the Grid?
    Could you, please, clarify the requirement with more details? Do you just need to add a row for the GridPanel from a controller action when, for example, you are clicking on the Button?

    Thanks for the example. But I'm not experienced with Telerik to understand well what it does.
  3. #3
    Sorry to confuse. That was poor form. I didn't mean to leave the Telerik code in there. The application had some Telerik controls in originally and the code there simply returns a grid model which is just a class that shapes a collection to a convenient Grid/JSON response {Data:"x", Total:"#", state:"gripOptions"} etc. Actually, it is a very convenient class they provide for MVC, and it really would be nice if you had an equivalent. Still, for the purpose of this example, please read the Telerik "GridModel" as a custom class.

    Now, as to my original question, I have a grid with data loaded. I also have set up the grid's store to use proxy, Ajax functions for update, insert, etc. I am using a RowEditing plugin to update and add rows. I now have the client-side able to add a new record and to manually fire off the store's sync upon the edit event which calls my "_AddTeam" function. That's where I get stuck. When I watch the input value of the function's parameter (team), I have nothing. Additionally, when I inspect the QueryString of the post, I see this:
    {_dc=1339075015470&Data=%5bobject+Object%5d}
    System.Web.HttpValueCollection: {_dc=1339075015470&Data=%5bobject+Object%5d}

    Now, it may be that I am not forming the Proxy or Javascript correctly. If so, then I would like to know what to do to have my incoming parameter object's (i.e. team) properties automatically wired up by MVC.

    For clarity, here is my proxy config:
     .Proxy(Sub(proxy)
                                                                                 Dim prxy As New Ext.Net.AjaxProxy()
                                                                                 With prxy
                                                                                     .API.Create = Url.Content("~/Assignments/_AddTeam/")
                                                                                     .API.Read = Url.Content("~/Assignments/_GetTeams/") + MvcApplication.CurrentApplicationUser.EmployeeID.ToString()
                                                                                     .API.Update = Url.Content("~/Assignments/_EditTeam")
                                                                                     .API.Destroy = ""
                                                                                     .Json = True
                                                                                     .Reader.Add(New Ext.Net.JsonReader() With {.Root = "Data", .AutoDataBind = True})
                                                                                     .Writer.Add(New Ext.Net.JsonWriter() With {.Root = "Data", .AutoDataBind = True, .AllowSingle = False, .ExcludeId = False})
                                                                                 End With
                                                                                         
                                                                                 proxy.Add(prxy)
                                                                             End Sub) _
    And my javascript is this:
    function editGrid(editor, e, eOpts) {
            var grid = App.TeamGrid;
            grid.store.sync();
        }
    Maybe there is some parameter configuration I need to add, some record information I need to add to the Javascript etc. However, I am not sure how to pass the current team back to my function's input parameter. I have seen in your DirectMethod examples how the function has a parameter for each grid's column, but I really want not to have to do that if possible as some of my grids will have many, many columns. Anyway, anything you can provide to move this forward would be very helpful.

    Thanks in advance.
  4. #4
    Here is the example.

    Example View
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net.MVC v2 Example</title>
    
        <script type="text/javascript">
            var add = function () {
                App.GridPanel1.getStore().insert(0, {});
                App.RowEditing1.startEdit(0, 0);
            };
    
             var sync = function () {
                App.GridPanel1.getStore().sync();
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:Button runat="server" Text="Add">
            <Listeners>
                <Click Fn="add" />
            </Listeners>
        </ext:Button>
    
        <ext:Button runat="server" Text="Sync">
            <Listeners>
                <Click Fn="sync" />
            </Listeners>
        </ext:Button>
    
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            Height="200" 
            Width="400">
            <Store>
                <ext:Store runat="server" AutoSync="false">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Proxy>
                        <ext:AjaxProxy Url="/Test/GetData">
                            <API Create="/Test/Create" />
                            <Reader>
                                <ext:JsonReader Root="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column 
                        runat="server" 
                        Text="Test" 
                        DataIndex="test" 
                        Flex="1">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:RowEditing ID="RowEditing1" runat="server" />
            </Plugins>
        </ext:GridPanel>
    </body>
    </html>
    Example Controller
    public class TestController : Controller
    {
        public class Test
        {
            public string test { get; set; }
        }
    
        public ActionResult TestAspx()
        {
            return View();
        }
    
        public List<object> MyData = new List<object> 
        { 
            new Test() { test = "test1" },
            new Test() { test = "test2" },
            new Test() { test = "test3" }
        };
    
        public ActionResult GetData()
        {
            StoreResult r = new StoreResult();
            r.Data = this.MyData;
    
            return r;
        }
    
        public void Create(Test[] records)
        {
            //the records is an array of created records
        }
    }
  5. #5
    Thank you. That was very helpful.

Similar Threads

  1. [CLOSED] automatic data moving from bottom to top in grid panel
    By Vasudhaika in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: May 28, 2014, 5:26 AM
  2. [CLOSED] Automatic window height based on content
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 28, 2011, 3:49 PM
  3. Binding ajax based combo from the code behind
    By verbatimbot in forum 1.x Help
    Replies: 0
    Last Post: Apr 06, 2011, 2:02 PM
  4. Automatic grid size, in width and height.
    By Galo Q in forum 1.x Help
    Replies: 1
    Last Post: May 12, 2010, 12:12 PM

Tags for this Thread

Posting Permissions