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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Newbie Grid question

Thread ID:

Created:

Updated:

Platform:

Replies:

129662 Mar 27,2017 02:44 PM UTC Mar 28,2017 05:51 PM UTC JavaScript 1
loading
Tags: ejGrid
Mark Fuqua
Asked On March 27, 2017 02:44 PM UTC

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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;