Very customised datasource

[Umair]

Hi. I need a customised datasource, such that:

1. Sometimes the data will be preloaded, other times I will need to grab the data via an ajax request
2. paging and sorting is externally handled
3. Filtering is also externally handled since we have a complex filter structure
4. All data requests are made via a post request

I can't figure out how to do all of this with the data manager, it's almost like it can do one but not the others.

[Isuriya Rajan]

Hi Umair,
Thanks for using the syncfusion product.
We have tried to answer all of you questions below. Please let us know if we have missed anything.

Query	Response
Sometimes the data will be preloaded, other times I will need to grab the data via an ajax request	While using the urlAdaptor , data will be loaded  on LoadAtOnce. LoadAtOnce  will retrieve the single page data from the server side. So could you tell us how you load your preloaded data? This will help us determine how best we can help you.
paging and sorting is externally handled Filtering is also externally handled since we have a complex filter structure All data requests are made via a post request	We can achieve paging ,filtering and sorting via  the Query property. By using this query we can get specified data from the Datamanager based on the condition we set. The sample below shows Paging, Filtering, and Sorting in the Buttonclick event. We can achieve the Paging operation using “Page” method and Filtering operation with the “Where” method and we can achieve sorting operation using “SortBy” method of the grid. We have retrieved the data using “Query” property from the Grid model and refreshed the Grid content using “refreshContent” method of the Grid.   $(function () {         var dataManger = ej.DataManager({             url: "/Home/DataSource",             adaptor: "UrlAdaptor"         });         $("#Grid").ejGrid({             dataSource: dataManger,            columns: [                              { field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right },                                        ],         });     }); function click(args) {         var query = new ej.Query().page(1, 7).where("CustomerID", "contains", "AS", false).sortBy("CustomerID", ej.sortOrder.Ascending, false);         $("#Grid").ejGrid('model.query', query)         $("#Grid").ejGrid("refreshContent");    }; In the below example, we have demonstrated filtering,paging ,and sorting with a single request: Sample Link: http://www.syncfusion.com/downloads/support/forum/120002/ze/Grid791701809

Please let us know if you require further assistance on this.

Regards,

Isuriya R       

[Umair]

Hi Umair,
Thanks for using the syncfusion product.
We have tried to answer all of you questions below. Please let us know if we have missed anything.

Query	Response
Sometimes the data will be preloaded, other times I will need to grab the data via an ajax request	While using the urlAdaptor , data will be loaded  on LoadAtOnce. LoadAtOnce  will retrieve the single page data from the server side. So could you tell us how you load your preloaded data? This will help us determine how best we can help you.
paging and sorting is externally handled Filtering is also externally handled since we have a complex filter structure All data requests are made via a post request	We can achieve paging ,filtering and sorting via  the Query property. By using this query we can get specified data from the Datamanager based on the condition we set. The sample below shows Paging, Filtering, and Sorting in the Buttonclick event. We can achieve the Paging operation using “Page” method and Filtering operation with the “Where” method and we can achieve sorting operation using “SortBy” method of the grid. We have retrieved the data using “Query” property from the Grid model and refreshed the Grid content using “refreshContent” method of the Grid.   $(function () {         var dataManger = ej.DataManager({             url: "/Home/DataSource",             adaptor: "UrlAdaptor"         });         $("#Grid").ejGrid({             dataSource: dataManger,            columns: [                              { field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right },                                        ],         });     }); function click(args) {         var query = new ej.Query().page(1, 7).where("CustomerID", "contains", "AS", false).sortBy("CustomerID", ej.sortOrder.Ascending, false);         $("#Grid").ejGrid('model.query', query)         $("#Grid").ejGrid("refreshContent");    }; In the below example, we have demonstrated filtering,paging ,and sorting with a single request: Sample Link: http://www.syncfusion.com/downloads/support/forum/120002/ze/Grid791701809

Please let us know if you require further assistance on this.

Regards,

Isuriya R       

1. Basically there is a possibility that we will already have the data for grid. And that point there is no need to make another ajax request to grab data. However if the user then sorts or pages, then we will need to go and grab the updated data set. But there is also the possibility that the we have to initially load the data as well. I need the grid to handle both scenarios in one control. Not sure if that helps clear anything up?

[Isuriya Rajan]

Hi Umair,

Thanks for the update.
We can achieve your requirement in initial Grid rendering itself by enabling the properties sortSettings, filterSettings and pageSettings.  

SortedColumns property will sort the columns based on the given “field” and “direction”. By enabling the pageSettings property, you can define the “currentPage” and “pageSize”.  

FilterSettings property will filter the data based on the condition in filtersettings property.

$("#Grid").ejGrid({

            dataSource: dataManger,

            allowPaging: true,

            allowFiltering: true,

            sortSettings: {sortedColumns: [{field:"EmployeeID", direction:"descending"}]}    ,

            filterSettings: {  filterType: "menu", filteredColumns: [{ field: "ShipCity", operator: "startswith", value: "re", predicate: "and" }] } ,

            pageSettings: {  currentPage: 1, pageSize: 3 },

            columns: [

                              . . . . . . . .                             

                             { field: "ShipCity", headerText: "Ship City" }

                              . . . . . . . .

            ],
        });

We have created a sample and the same can be downloaded from the following location:
Sample Link: http://www.syncfusion.com/downloads/support/directtrac/142257/ze/Grid-178933228

Please refer below Help documentation link for more details regarding how we can use Paging, Sorting and Filtering properties for Grid columns.

Online Documentation Link: Sorting, Paging,Filter

Please try the above sample and let us know if it helps. If we misunderstood your query, please provide us clear information regarding your requirements. It will help us to provide the prompt solution.

Regards,

Isuriya R

[Umair]

Thank you for the example but it is still what I am looking for. Let us start again :)

Ok, basically I need this

var data= [];

//populate data with the data for FIRST page, e.g. from an ajax call 

$("#Grid").ejGrid({
           dataSource: data,
           allowPaging: true,
           allowFiltering: true,
           sortSettings: { sortedColumns: [{ field: "EmployeeID", direction: "descending" }] },
           filterSettings: { filterType: "menu", filteredColumns: [{ field: "ShipCity", operator: "startswith", value: "re", predicate: "and" }] },
           pageSettings: { pageCount: 1, currentPage: 1, pageSize: 3 },
           columns: [
                            { field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right },
                            { field: "CustomerID", headerText: "Customer ID" },
                            { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right },
                            { field: "OrderDate", headerText: "Order Date", textAlign: ej.TextAlign.Right, format: "{0:MM/dd/yyyy}" },
 
                            { field: "ShipCity", headerText: "Ship City" }
           ],
       });

i.e. data is passed in as an existing array, BUT I still need the option for paging and sorting by making a separate ajax call.

[Umair]

Sorry no edit button!

Ok so, basically data is passed in as an array, but it is only the data for the 1st page of the result set. For other pages, and for sorting, a separate ajax request is needed. I don't want to use the urlAdapter because I already have the data at that point!

[Isuriya Rajan]

Hi Umair,

We have rendered an initial Grid with empty records and bound the filtered, sorted Grid records via Button click event. All these operations are done in Server side and get the data by using the AJAX request. 

By default, the AJAX post done in source level. So, separate AJAX post for Filtering and Sorting operations is not needed. It will pass the request in a single query and return the records.
We can perform Paging operation using the “Page” method and Sorting through the “SortBy” method. Filtering can be achieved through “where” method. All these operations can be performed by via ej.Query() method. 

public ActionResult DataSource(DataManager dm)

        {

            var DataSource = OrderRepository.GetAllRecords();

            DataResult result = new DataResult();

            DataOperations operation = new DataOperations();

            //Sorting ,filtering done in data itself

            IEnumerable res1=operation.PerformSorting(DataSource,dm.Sorted);

            res1 = operation.PerformWhereFilter(DataSource, dm.Where, "and");

            IEnumerable res = operation.Execute(DataSource, dm);

            result.result = res;

            result.count = DataSource.Count();

            return Json(res1, JsonRequestBehavior.AllowGet);
        }

   var query = new ej.Query().page(1, 7).where("CustomerID", "contains", "AS",false).sortBy("CustomerID", ej.sortOrder.Ascending, false);

       

         dataManger.executeQuery(query).done(function (e) {

            $("#Grid").ejGrid({ dataSource: e.result });
        })

If we misunderstood your query, please provide below information,

·         Do you want to perform filtering, sorting operations in server side?

·         Need separate request for each and every operations?

·         Need to perform sorting/paging and filtering operations in single request?

Download a sample from the following location: 

 http://www.syncfusion.com/downloads/support/forum/120002/ze/Grid_Query1456377929

Please let us know if you require further assistance on this.
Regards,
Isuriya R

[Umair]

Do you want to perform filtering, sorting operations in server side? Yes

Need separate request for each and every operations? Yes

Need to perform sorting/paging and filtering operations in single request? Yes

Basically everytime paging, sorting, or filtering changes I need to send a post request to grab the new data set. I cannot use DataManager with query to get data, because our filtering/sorting structure is very different to just standard odata + REST.

[Balaji Marimuthu]

Hi Umair,

Based on your requirement we have created a sample. Please refer the sample and code example below:
Sample: EJGrid

function click() {

       

            var gridObject = $("#Grid").ejGrid("instance");

            $.ajax({

                url: "/Home/DataSource",

                type: "POST",

                data: { gridDetails: JSON.stringify({ sortSettings: gridObject.model.sortSettings, filterSettings: gridObject.model.filterSettings, pageSettings: gridObject.model.pageSettings }) },

                success: function (data) {

                    var parsedata = ej.isJSON(data.result);

                    $("#Grid").ejGrid("model.dataSource", parsedata);

                    obj = $("#Grid").ejGrid("instance");

                    obj._count = data.count;

                    obj.getPager().ejPager("option", { totalRecordsCount: obj._count })

                }

            });

       

    }

In button click, we have passed the sortSettings, filterSettings, pageSettings value to the controller and processed server side operation sorting, filtering, paging. Please refer the below code example:

  public ActionResult DataSource(string gridDetails)

        {

            IEnumerable DataSource = OrderRepository.GetAllRecords();

            int count = DataSource.AsQueryable().Count();

            DataResult result = new DataResult();

            var gridprop= this.ConvertDM(gridDetails);

            DataOperations operation = new DataOperations();

            //perform sorting

            DataSource = operation.PerformSorting(DataSource, gridprop.SortSettings.SortedColumns);

            //perform filtering

            DataSource = operation.PerformFiltering(DataSource, gridprop.FilterSettings.FilteredColumns);

            if (gridprop.FilterSettings.FilteredColumns.Count > 0)

               result.count = DataSource.AsQueryable().Count();

            else

            result.count = count;

            int skip = (gridprop.PageSettings.CurrentPage - 1) * gridprop.PageSettings.PageSize;

            ////perform paging

            DataSource = operation.PerformSkip(DataSource, skip);

            DataSource = operation.PerformTake(DataSource, gridprop.PageSettings.PageSize);

            ////return result

            result.result = DataSource;

          

            return Json(result, JsonRequestBehavior.AllowGet);
        }

In ajax success event we have bound the data to Grid and updated the pager in Grid action Complete event. If we use the Adaptor the pager will be updated automatically based on the return datasource count. But while using the ajax we need to update the pager.

function complete(args) {

        if (args.requestType == "paging") {

            obj = $("#Grid").ejGrid("instance");

            obj.getPager().ejPager("option", { totalRecordsCount: obj._count, currentPage: args.currentPage });

        }
    }

By using the above code example, you can passed the grid model properties to server side in ajax post request.

Regards,
Balaji Marimuthu