Radgrid Filtering binding with ajax Call

1 posts, 0 answers
  1. Nilesh
    Nilesh avatar
    1 posts
    Member since:
    Dec 2016

    Posted 07 Feb Link to this post

    Hi,

        Well i am new to Sitefinity. I was trying to implement Dynamic Sorting Filtering and Pagination in client side. I have implemented sorting and pagination. I want to implement excel type filtering as explained in the demo ( http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/filtering/excel-like-filtering/defaultcs.aspx) to my department column. The issue is i cant use FilterType="HeaderContext". I get a issue saying The values permitted for this attribute dosent inclue HeaderContext. I went to multiple article but couldn't figure out. Can you please help me out. The other issue is i am binding my radgrid in ajax call i don't know how to bind the data for the filtering in ajax call and how to pass filter data from ajax call to webservice.

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="SitefinityWebApp.Pages.test" EnableEventValidation="true" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls" %>

    <html xmlns='http://www.w3.org/1999/xhtml'>

    <head runat="server">
        <title>Telerik ASP.NET Example</title>


        <telerik:RadScriptBlock ID="RadCodeBlock" runat="server">
            <script type="text/javascript">

                function rad_gridCreated(sender, args) {
                    tableView = $find("<%= gridData.ClientID %>").get_masterTableView();
                    makeServiceCall(updateGrid, serviceFailure);
                };

                function serviceFailure(error) { alert("failure " + error.statusText); };
                function updateGrid(result) {
                    tableView.set_dataSource(result.employee);
                    tableView.dataBind();
                    tableView.set_virtualItemCount(result.totalCount);
                };
                function getRequestStringfyData(startIndex, pageSize, sortExpression, filterExpression) {
                    return JSON.stringify({
                        startIndex: startIndex,
                        maximumRows: pageSize,
                        sortExpression: sortExpression,
                        filterExpression: filterExpression
                    });
                };

                function makeURL(startIndex, pageSize, sortExpression, filterExpression) {
                    return "/CustomServices/NewsService/getmyWork?startIndex=" + startIndex + "&maximumRows=" + pageSize + "&sortExpression=" + sortExpression + "&filterExpression=" + filterExpression;
                };

                function makeServiceCall(onCallBackSuccess, onCallbackFailure) {
                    var pageSize = tableView.get_pageSize(); var startIndex = (tableView.get_currentPageIndex() * pageSize);
                    var sortExpression = tableView.get_sortExpressions().toString(); var filterExpression = "";
                    $.ajax({
                        type: "GET",
                        url: makeURL(startIndex, pageSize, sortExpression, filterExpression),
                        dataType: "json",
                        data: getRequestStringfyData(startIndex, pageSize, sortExpression, filterExpression),
                        contentType: "application/json; charset=utf-8",
                        processData: true,
                        success: onCallBackSuccess,
                        error: onCallbackFailure
                    });
                };

                function radgrid_OnCommand(sender, args) {
                    tableView = sender.get_masterTableView();
                    makeServiceCall(updateGrid, serviceFailure);
                };
            </script>
        </telerik:RadScriptBlock>




    </head>
    <body>
        <form id="form1" runat="server">

            <script type="text/javascript" src="test.js"></script>

            <telerik:RadScriptManager runat="server" ID="RadScriptManager1">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                </Scripts>
            </telerik:RadScriptManager>
            <div style="margin-top: 100px;">
                <asp:UpdatePanel ID="ProductsUpdatePanel" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
                    <ContentTemplate>
                        <telerik:RadGrid RenderMode="LightWeight" ID="gridData" name="gridData" runat="server" EnableViewState="false"  AutoGenerateColumns="false" AllowPaging="true" PageSize="10" AllowSorting="true" FilterType="HeaderContext">
                            <MasterTableView TableLayout="Fixed">
                                <Columns>
                                    <telerik:GridBoundColumn DataField="EmpID" HeaderText="Emp ID" ReadOnly="true" SortExpression="EmpID" UniqueName="EmpID" />
                                    <telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name" ReadOnly="true" SortExpression="FirstName" UniqueName="FirstName" />
                                    <telerik:GridBoundColumn DataField="LastName" HeaderText="Last Name" ReadOnly="true" SortExpression="LastName" UniqueName="LastName" />
                                    <telerik:GridBoundColumn DataField="Department" HeaderText="Department" ReadOnly="true" SortExpression="Department" UniqueName="Department" />
                                </Columns>
                            </MasterTableView>
                            <ClientSettings EnablePostBackOnRowClick="false">
                                <ClientEvents OnCommand="radgrid_OnCommand" OnGridCreated="rad_gridCreated" />
                            </ClientSettings>
                        </telerik:RadGrid>
                    </ContentTemplate>
               </asp:UpdatePanel>
            </div>

           
        </form>
    </body>
    </html>

     

    Interface 

    namespace SitefinityWebApp.CustomServices
    {
        [ServiceContract]
        [AllowDynamicFields]
        public interface INewsService
        {
            [OperationContract]
            [WebInvoke(Method = "GET", UriTemplate = "getmyWork?startIndex={startIndex}&maximumRows={maximumRows}&sortExpression={sortExpression}&filterExpression={filterExpression}", ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json)]
            SitefinityWebApp.CustomServices.NewsService.DynamicItemsContext DoWork(int startIndex, int maximumRows, string sortExpression, string filterExpression);
        }

    wcf class

     [ServiceBehavior(IncludeExceptionDetailInFaults = true, InstanceContextMode = InstanceContextMode.Single, ConcurrencyMode = ConcurrencyMode.Single)]
        [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Required)]
        public class NewsService : INewsService
        {

            public DynamicItemsContext RetrieveItems(int startIndex, int maximumRows, string sortExpression)
            {
                DynamicModuleManager dynamicModuleManager = DynamicModuleManager.GetManager();
                Type testType = TypeResolutionService.ResolveType("Telerik.Sitefinity.DynamicTypes.Model.Employees.Employee");
                var dynamicItems = dynamicModuleManager.GetDataItems(testType).Where(d => d.Status == Telerik.Sitefinity.GenericContent.Model.ContentLifecycleStatus.Master);

                if (!string.IsNullOrEmpty(sortExpression))
                    dynamicItems = dynamicItems.OrderBy(sortExpression);

                List<Employee> employees = new List<Employee>();
                foreach (var item in dynamicItems)
                {
                    var employee = new Employee();
                    employee.FirstName = item.GetValue("FirstName").ToString();
                    employee.LastName = item.GetValue("LastName").ToString();
                    employee.Department = item.GetValue("Department").ToString();
                    employee.EmpID = item.GetValue("EmpID").ToString();
                    employees.Add(employee);
                }

                var dynamicItemContext = new DynamicItemsContext();
                dynamicItemContext.totalCount = employees.Count;
                dynamicItemContext.employee = employees;
                dynamicItemContext.employee = dynamicItemContext.employee.Skip(startIndex).Take(maximumRows);
                // employees.Skip(startIndex).Take(maximumRows);
                return dynamicItemContext;
            }


            public DynamicItemsContext DoWork(int startIndex, int maximumRows, string sortExpression, string filterExpression)
            {
                var items = RetrieveItems(startIndex, maximumRows, sortExpression);
                return items;
            }

            public class Employee
            {
                public string FirstName { get; set; }
                public string LastName { get; set; }
                public string Department { get; set; }
                public string EmpID { get; set; }
            }

            [DataContract]
            [KnownType(typeof(Employee))]
            public class DynamicItemsContext
            {
                [DataMember]
                public IEnumerable<Employee> employee { get; set; }

                [DataMember]
                public int totalCount { get; set; }

            }
        }

     

Back to Top