We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. Newbie Grid question

Newbie Grid question

I am trying to get a test of the grid working...having trouble.

Here is a link to the page:


Here is the code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My first Syncfusion page</title>
    <link rel='nofollow' href="http://cdn.syncfusion.com/15.1.0.37/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <link rel="stylesheet" rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"> </script>
    <script src="http://cdn.syncfusion.com/15.1.0.37/js/web/ej.web.all.min.js"></script>
</head>
<body>
<div id="Grid"></div>
<script type="text/javascript">
    $(function () {// Document is ready.
        var dataManager = new ej.DataManager({
            url:"data.cfc?method=getAll",
            crudUrl:"data.cfc?method=crudContact",
            batchUrl:"data.cfc?method=batchContact",
            insertUrl:"data.cfc?method=insertContact",
            removeUrl:"data.cfc?method=deleteContact",
            updateUrl:"data.cfc?method=updateContact"
            ,adaptor: new ej.UrlAdaptor()

        });
        $("#Grid").ejGrid({
            dataSource: dataManager,
            allowPaging: true,
            allowFiltering: true
        });
    });
</script>
</body>
</html>

Problem:  Paging 'footer' and Sorting 'header' are present, but not functioning.  Most of the code is from the docs and, hopefully it is not pertinent, as I'm thinking the paging and sorting are done locally, but the only function/method written is the 'getALL' function/method.

Thanks for the help,

Mark

1 Reply
TS Thavasianand Sankaranarayanan Syncfusion Team March 28, 2017 05:51 PM UTC

Hi Claudio, 
 
Thanks for contacting Syncfusion support. 
 
Query: Using UrlAdaptor in Syncfusion Grid control with paging and sorting operation.  
 
We have checked your code example and found that you have enable the UrlAdaptor in your sample. In your sample we suspect that you have return all data in server-side.  
 
To perform server-side operation(Paging and Sorting), use PerformSorting, PerformSkip and PerformTake methods. 
 
Refer the below code example. 
 
 
[GridFeatures.cshtml] 

<script type="text/javascript"> 
    $(function () { 
       $("#Grid").ejGrid({ 
              dataSource : ej.DataManager({ 
 
                     url : "/Grid/DataSource", 
 
                     adaptor : "UrlAdaptor" 
              }), 
              //showSummary: true, 
        allowPaging:true, 
        allowSorting: true, 
              pageSettings: { pageSize: 10 }, 
               
              columns : [ 
                      
                   --------------------------------- 
              ] 
       }); 
}); 
       </script> 
 
 
 
[GridController.cs] 

public ActionResult DataSource(DataManager dm) 
        { 
            IEnumerable DataSource = new NorthwindDataContext().OrdersViews.ToList(); 
            DataResult result = new DataResult(); 
            DataOperations operation = new DataOperations(); 
            result.result = DataSource; 
 
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 
            { 
                result.result  = operation.PerformSorting(result.result, dm.Sorted); 
            } 
 
            result.count = result.result.AsQueryable().Count(); 
 
            if (dm.Skip > 0)  // for paging  
 
                result.result = operation.PerformSkip(result.result, dm.Skip); 
 
            if (dm.Take > 0) 
 
                result.result = operation.PerformTake(result.result, dm.Take); 
 
            return Json(new { result = result.result, count = result.count });        } 
 
 
 
 
We have prepared a sample and it can be downloadable from the below location. 
 
 
The response from server should be wrapped in an object with properties named result to hold the data and count to hold the total records count. To handle the server-side operations, we have Server-side APIs which has been found in the DataOperations class of Syncfusion Libraries. Refer to the following KB.  
 
Note: skip/take are the queries responsible for handling the paging action and it returns current page records to the Grid. 
 
 
Refer the help documentation. 
 
 
NOTE:  
 
In given code example of yours, having the CrudUrl, BatchUrl, insert, delete, remove Urls. No need to use all at the same time in Grid . 
 
CRUD URL: Crud Url is used instead of specifying methods for Crud (Insert, Update, Delete) operations. 
 
BATCH URL: BatchURL property supports only for batch editing mode. 
 
Refer the below documentations for the Insert, Update, Delete, Crud, Batch URL’s using in Grid. 
 
 
 
 
 
Regards, 
Thavasianand S. 


Loader.
Up arrow icon