Click here to Skip to main content
14,239,722 members
Rate this:
Please Sign up or sign in to vote.
Hi,

I used
kendo.dynamic.linq.DataSourceResult
to implement filtering in server side.

[AcceptVerbs("GET","POST")]
public DataSourceResult Filter(Models.DataSourceRequest request)
{
    if (request != null)
    {
        request.Filter.Field = request.Filter.Filters.FirstOrDefault().Field;
        request.Filter.Operator = request.Filter.Filters.FirstOrDefault().Operator;
        request.Filter.Value = request.Filter.Filters.FirstOrDefault().Value;
        var o = request;
    }
    var employees = db.Users.OrderBy(ii => ii.Id).Select(x => new RegisterBindingModel()
    {
        Id = x.Id,
        Email = x.Email,
        UserName = x.UserName,
        FirstName = x.FirstName,
        LastName = x.LastName,
        Age = x.Age,
        Phone = x.Phone,
        Department = x.Department
    });
    var i = employees.ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter);
    var data = i.Data; // This is contain filtered data
    request.Take = i.Total;
    var d = Json(data);
    System.Diagnostics.Debug.WriteLine(d);
    var aa = data.Cast<RegisterBindingModel>().ToList();
    var b = aa;
    //  return Content(HttpStatusCode.OK,d.Content);
     return employees.ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter);
    //return data.Cast <RegisterBindingModel>().ToList();
}


Well, I saw the filter data from fiddler in the body of this request.

What I have tried:

I used the following code, I want to update the grid with the filter data but instead of this the grid updated with all data within one page !!

$scope.DS = new kendo.data.DataSource({
           type: "json",
           transport: {
               read: {
                   url: "/api/Employees",
                   dataType: "json",
                   contentType: "application/json",
                   type: "GET",
                   headers: { 'Authorization': 'Bearer ' + sessionStorage.getItem("accessToken") }
               },
               update: {
                   url: "/api/Employees/PUT",
                   dataType: "json",
                   contentType: "application/json",
                   type: "PUT",
                   headers: { 'Authorization': 'Bearer ' + sessionStorage.getItem("accessToken") }
               },
               destroy: {
                   url: "/api/Employees/DELETE",
                   dataType: "json",
                   contentType: "application/json",
                   type: "DELETE",
                   headers: { 'Authorization': 'Bearer ' + sessionStorage.getItem("accessToken") } },
               create: {
                   url: "/api/Employees/POST",
                   dataType: "json",
                   contentType: "application/json",
                   type: "POST",
                   headers: { 'Authorization': 'Bearer ' + sessionStorage.getItem("accessToken") }  },
               parameterMap: function (options, operation) {
                   if (operation !== "read") {
                       console.log(JSON.stringify(options.models));
                       return JSON.stringify(options.models);
                   }}},
           batch: true,
           pageSize: 5,
           serverFiltering: true,
           schema: {
               model: {
                   id: "Id",
                  data: 'Data',
                  total: 'Total',
                 //  errors: 'Errors',
                   fields: {
            Id: { editable: false, nullable: false, type: "number" },
          Email: { editable: true, type: "string" },
           UserName: {editable: true,type: "string"},
  FirstName: { editable: true, type: "string" },
    LastName: { editable: true, type: "string"},
  Age: { editable: true,  validation: { required: true } },
  Phone: { editable: true, validation: { required: true } },
    Department: { editable: true,type: "string"}
    } }
           },
       });

       $scope.mainGridOptions = {
           dataSource: $scope.DS,
           dataBound: function () {
 var data = this.dataSource.view();
           },
           toolbar: ["create"],
           columns: [
               { field: "Email", title: "Email", width: "100px" },
               { field: "UserName", title: "User Name", width: "100px"},
              { field: "FirstName", title: "First Name", width:"100px"},
            { field: "LastName", title: "Last Name", width: "100px" },
               { field: "Phone", title: "Phone", width: "100px" },
               { field: "Age", title: "Age", width: "100px" },
            { field: "Department", title: "Department", width: "100px"},
               {
                   command: [{
                       name: "edit",
                       text: {
                           edit: "Edit",
                           update: "Save",
                           cancel: "Cancel"
                       }
                   }, "destroy"], title: "Actions", width: "150px"
               }
           ],
           filterable: true,
           pageable: {
               refresh: true,
               input: true,
               numeric: false,
               pageSizes: [5, 10, 20, 30, 50, 75, 100, 500, 1000]
           },
           sortable: true,
           resizable: true,
           navigatable: true,
           serverFiltering: true,
           editable: { mode: "inline" },
           filter: function (data) {
               console.log((data));
               console.log((data.filter));
               const requestOptions = {
                   headers: { 'Authorization': 'Bearer ' + sessionStorage.getItem("accessToken") }
               };
               $http.post("/api/Account/Filter", data, requestOptions).then(function (d) {
                   console.log(JSON.stringify(d.data.Data));
                   // $scope.DS.read = d.data.Data;
                   debugger;
                   $scope.mainGridOptions.dataSource.query(d.data.Data);

               }, function () {
               alert("Failed.Please try again.")
                   });
           },

           noRecords: { template: "No results available."}

       };


Could you please tell what am I doing wrong??
Posted
Comments
Christian Graus 28-Apr-19 19:16pm
   
Show us the back end code that implements your filer
Member 12919448 29-Apr-19 1:05am
   
It's already there, see Filter method
Member 12919448 29-Apr-19 1:09am
   
I'm concerned on filtering, so the Filter receive the filter data. Sort is null.
Member 12919448 29-Apr-19 1:18am
   
I used kendo.DynamicLinq, which is receive the filter request and return the filter data
Christian Graus 29-Apr-19 1:14am
   
I didn't see that before - have you debugged it to see if your filter comes through and is applied?
Member 12919448 29-Apr-19 1:22am
   
Yes, but it's back to read operation and read all data, I think I have problem on how to read filter data and update the grid. In the beginning, nothing was change so I tried to use $scope.mainGridOptions.dataSource.query(d.data.Data); after that, all data is return, I set the page side to be 5 but also this is override and all data is showing within one page
Christian Graus 29-Apr-19 1:26am
   
So have you debugged and confirmed your filter data doesn't come through?
Member 12919448 29-Apr-19 1:34am
   
Yes, through debugging I see the filter data back to $scope.mainGridOptions.dataSource.query(d.data.Data); but as I said after that it back to read operation and read all data.
Christian Graus 29-Apr-19 1:39am
   
If your filter data gets back, but it returns all data, then your code is wrong. You're pulling the data twice. Is it filtered the first time? Does the filter variable survive to be used the second time?
Member 12919448 29-Apr-19 1:41am
   
Ok, the wrong is in this $scope.mainGridOptions.dataSource.query(d.data.Data);?
Member 12919448 29-Apr-19 1:43am
   
If you know a sample project that done filtering on server side, It'll be great
Christian Graus 29-Apr-19 1:45am
   
https://docs.telerik.com/aspnet-mvc/helpers/grid/binding/custom-binding
Member 12919448 29-Apr-19 1:48am
   
Of course I went through this :). Anyway, thank you for your time
Christian Graus 29-Apr-19 1:49am
   
Break your code down into steps. Make each step work. Step through and see, does the first pull get the filtered data? Why do you need to ask for data twice?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100