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

Radgrid Filtering binding with ajax Call

0 Answers 99 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Nilesh
Top achievements
Rank 1
Nilesh asked on 07 Feb 2017, 02:21 PM

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; }

        }
    }

 

No answers yet. Maybe you can help?

Tags
Ajax
Asked by
Nilesh
Top achievements
Rank 1
Share this question
or