[Solved] Pure Client Side Binding/Paging/Sorting

[Hardy Wang]

Hi all,

After I did some testing, I could bind my JSON to grid from client side, but it does not display page information at lower part of my grid. When I click on header to sort, grid goes to server side and all content are gone.

I am just wandering is Telerik Grid control capable to support pure client side binding/paging/sorting?

My sample code of controller is:

public class HomeController : Controller {
    public ActionResult Index() {
        return View();
    }
    [HttpPost]
    public ActionResult Index(string btnButton) {
        ResultViewModel data = new ResultViewModel();
        data.EntityData = new List<MyEntity>();
        for (int i = 0; i < 50; i++) {
            data.EntityData.Add(new MyEntity
            {
                Id = i,
                Name = "N" + i,
                Value1 = "V" + i
            });
        }
        return Json(data);
    }

 

My View is

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% using (Ajax.BeginForm("Index",
       new AjaxOptions { HttpMethod = "Post", OnComplete = "SearchData.onComplete" })) { %>
    <input type="submit" id="btnButton" value="Click Me" />
    <% } %>
    <%= Html.Telerik().Grid<MyEntity>().Name("SearchResult").Columns(
        columns => {
            columns.Bound(o => o.Id)
                .ClientTemplate("<input type='checkbox' name='checkedRecords' value='<#= Id #>' />")
                .Title("")
                .Width(40)
                .HtmlAttributes(new { style = "text-align:center" });
            columns.Bound(o => o.Name);
            columns.Bound(o => o.Value1);
        }).Pageable().Sortable().Scrollable().Resizable(resizing => resizing.Columns(true))
    %>

    <script type="text/javascript">
        var SearchData = {
            onComplete: function (content) {
                var output = eval(content.get_response().get_object());
                //alert(output);

                var grid = $('#SearchResult').data('tGrid');
                grid.dataBind(output.EntityData);
            }
        }
    </script>
</asp:Content>

My model is

public class ResultViewModel {
        public List<MyEntity> EntityData {
            get;
            set;
        }
    }

    public class MyEntity {
        public int Id {
            get;
            set;
        }

        public string Name {
            get;
            set;
        }

        public string Value1 {
            get;
            set;
        }
    }

[John DeVight]

I am developing extensions to the client API for the Telerik MVC controls and have implemented a pure client side sort.  You can download a sample application for ASPX or RAZOR  view engines that shows all the client side api extensions that I have written at: http://www.aspnetwiki.com/page:extending-the-telerik-mvc-client-api

Here is an example of enabling the client-side sort with my client api extensions:

$('#SampleGrid').data('tGrid').enableClientSort();

I am  working on a pure client-side filter for the grid now.  I'll look at a pure client-side paging function as well....

Regards,

John DeVight