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

[Solved] Adding Columns in MVC Grid

3 Answers 264 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.

AMS asked on 24 Feb 2010, 09:52 AM

    
            Hi I am trying to add a custom column by using MVC1.0 with Telerik MVC1 library. I am using the code mentioned below:

            1) I am getting the following error 
: Invalid expression term ')' 

            on this line

            Line 101:     columns.Template(up => {%>

            Can anyone help me out in this regard????

            2) The second question is which controller's action would be called if i use this statement. If I want to change the controller name and its action name, what should i do?
%=Html.ActionLink("Edit","Edit", new {id = up.ProfileID})%>

<%=Html.Telerik().Grid<XploreVer2.Web.Models.DataObjects.UserProfile>() 
        
                    .Name("Grid") 
        
                        .DataKeys(keys => { keys.Add(up => up.ProfileID); }) 
        
                        .Columns(columns => 
        
                            { 
        
                                columns.Bound(up => up.Username).Width(100); 
        
                                columns.Bound(up => up.Password); 
        
                                columns.Template(up => {%> 
        
                                                        <%=Html.ActionLink("Edit","Edit", new {id = up.ProfileID})%> 
        
                                                        <%}); 
        
                                columns.Template(up => {%> 
        
                                                        <%=Html.ActionLink("Delete","Delete", new {id = up.ProfileID})%> 
        
                                                        <%}); 
        
                            }) 
        
                         .ClientEvents(events => events 
        
                             .OnLoad("onLoad") 
        
                             .OnDataBinding("onDataBinding") 
        
                             .OnRowDataBound("onRowDataBound") 
        
                             .OnRowSelected("onRowSelected") 
        
                             .OnDataBound("onDataBound") 
        
                             .OnError("onError") 
        
                            ) 
        
                                  //.DataBinding(dataBinding => dataBinding.Ajax().Select("_ClientSideEvents_Ajax", "Grid")) 
        
                                  .Pageable(paging => paging.PageSize(4)) 
        
                                  .Sortable() 
        
                                   .Filterable() 
        
                                   .HtmlAttributes(new { style = "margin-bottom: 1.3em" })      
        
                    %> 
        
            <!-- Site Master Code --> 
        
            <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> 
        
                                <li><%=Html.ActionLink("Client Events", "_ClientSideEvents_Ajax", "Grid")%></li> 
        
                                <li><%=Html.ActionLink("Ajax Server Binding", "_AjaxBinding", "Grid")%></li> 
        
                                <li><%=Html.ActionLink("Ajax Client Call", "_AjaxClientCall", "Grid")%></li> 
        
                            </ul> 
        
                        </div> 
        
                    </div> 
        
                    <div id="main"> 
        
                        <asp:ContentPlaceHolder ID="MainContent" runat="server" /> 
        
                        <div id="footer"> 
        
                        </div> 
        
                    </div> 
        
                </div> 
        
                <%= Html.Telerik().ScriptRegistrar() %> 
        
            </body>

3 Answers, 1 is accepted

answered on 24 Feb 2010, 12:25 PM

    
            Hi 
        
            Thanks for your reply, i have applied this and also found that this functionality is only available in Server Side Mode. 
        
            I want to use this code on client-side with Ajax functionality and also found that "Columns.Add" method is not available in my library. I only find "Columns.Template" method here. Now i am pasting my complete code here to get a detailed suggestion. 
        
            Thanks in advance. 
        
            I am using "2010.1.218.135"

            <%Html.Telerik().Grid<XploreVer2.Web.Models.DataObjects.UserProfile>() 
        
                    .Name("Grid") 
        
                        .DataKeys(keys => { keys.Add(up => up.ProfileID); }) 
        
                        .Columns(columns => 
        
                            { 
        
                                columns.Bound(up => up.Username).Width(100); 
        
                                columns.Bound(up => up.Password); 
        
                                columns. 
        
                                columns.Template(up => 
        
                                { 
        
                                    %> 
        
                                        <%=Html.ActionLink("Edit", "Edit", new { id = up.ProfileID })%> 
        
                                    <%}).Title("Edit"); 
        
                                columns.Template(up => 
        
                                { 
        
                                    %> 
        
                                        <%=Html.ActionLink("Delete", "Delete", new { id = up.ProfileID })%> 
        
                                    <%}).Title("Delete"); 
        
                            }) 
        
                         .ClientEvents(events => events 
        
                             .OnLoad("onLoad") 
        
                             .OnDataBinding("onDataBinding") 
        
                             .OnRowDataBound("onRowDataBound") 
        
                             .OnRowSelected("onRowSelected") 
        
                             .OnDataBound("onDataBound") 
        
                             .OnError("onError") 
        
                            ) 
        
                      //.DataBinding(dataBinding => dataBinding.Ajax().Select("_ClientSideEvents_Ajax", "Grid")) 
        
                              .Pageable(paging => paging.PageSize(4)) 
        
                              .Sortable() 
        
                              .Filterable() 
        
                              .HtmlAttributes(new { style = "margin-bottom: 1.3em" }) 
        
                              .Render(); 
        
                    %> 
        
            <!--Ajax Code --> 
        
            <script language="javascript" type="text/javascript"> 
        
                    function onLoad(e) { 
        
                        var grid = $(this).data('Grid'); 
        
                        //debugger; 
        
                        //$console.log("Grid loaded"); 
        
                    } 
        
                    function onDataBinding(e) { 
        
                        //debugger; 
        
                        //$console.log("OnDataBinding"); 
        
                        var grid = $("#Grid").data("tGrid"); 
        
                        $.ajax({ 
        
                            url: '/Grid/GetData', 
        
                            contentType: 'application/json; charset=utf-8', 
        
                            type: 'GET', 
        
                            dataType: 'json', 
        
                            error: function(xhr, status) { 
        
                                debugger; 
        
                                alert(status); 
        
                            }, 
        
                            data: { 
        
                                q: 'TEST' 
        
                            }, 
        
                            success: function(result) { 
        
                                //debugger; 
        
                                grid.dataBind(result); 
        
                            } 
        
                        }); 
        
                    } 
        
                    function onDataBound(e) { 
        
                        //debugger; 
        
                        //$console.log("OnDataBound"); 
        
                    } 
        
                    function onRowDataBound(e) { 
        
                        //debugger; 
        
                        //DOM element of grid 
        
                        var grid = $("#Grid").data("tGrid"); 
        
                        var row = e.row;    // //the DOM element (<tr>) representing the row which is being databound 
        
                        var dataItem = e.dataItem; 
        
                        row.cells[0].innerHTML = '<strong>' + dataItem.Username + '</strong>'; 
        
                        //$console.log("OnRowDataBound :: " + dataItem.OrderID); 
        
                    } 
        
                    function onRowSelected(e) { 
        
                        debugger; 
        
                        var row = e.row; 
        
                        //$console.log("OnRowSelected :: " + row.cells[0].innerHTML); 
        
                    } 
        
                    function onError(e) { 
        
                        //`this` is the DOM element of the grid 
        
                        var grid = $(this).data('tGrid'); 
        
                        //the current XMLHttpRequest object 
        
                        var xhr = e.XMLHttpRequest; 
        
                        //the text status of the error - 'timeout', 'error' etc. 
        
                        var status = e.textStatus; 
        
                        if (status == 'error') { 
        
                            //xhr.status is the HTTP code returned by the server 
        
                            if (xhr.status == "404") { 
        
                                alert("requested url not found") 
        
                            } 
        
                        } 
        
                        //To prevent the default error handling (which is to alert the error message) you can call `preventDefault` 
        
                        e.preventDefault(); 
        
                    } 
        
                </script> 
        
            <!-- Controller Code --> 
        
                public ActionResult AjaxClientCall() 
        
                    { 
        
                        return View(); 
        
                    } 
        
                    public ActionResult _AjaxClientCall() 
        
                    { 
        
                        return View("_AjaxClientCall"); 
        
                    } 
        
                    public JsonResult GetData() 
        
                    { 
        
                        return Json(from u in new UserProfileModel().GetAll().ToList() 
        
                                    select new 
        
                                    { 
        
                                        u.ProfileID, 
        
                                        u.FirstName, 
        
                                        u.LastName, 
        
                                        u.Password, 
        
                                        u.Username, 
        
                                        u.SCDS 
        
                                    }); //for resolving circular reference error 
        
                    }