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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Ejgrid DataManager object

Thread ID:

Created:

Updated:

Platform:

Replies:

123753 Apr 18,2016 05:49 PM UTC Apr 20,2016 11:10 AM UTC JavaScript 4
loading
Tags: ejGrid
Joaquim Santos
Asked On April 18, 2016 05:49 PM UTC

Hello,

Im trying to use Js Grid like in this example.
https://www.syncfusion.com/forums/123658/js-grid-excel-like-filtering-server-side

Client Side:

var dataManger = ej.DataManager({
               url: "@(Url.Action("GetList","Survey"))" + "/" + $("#SurveySelector").val()
           });
$("#Grid").ejGrid({
              locale: "pt-PT",
              dataSource: dataManger,
              allowPaging: true,
              allowSorting: true,
              allowGrouping: true,
              enableDropAreaAnimation: false,
              allowFiltering: true,
              filterSettings: { showFilterBarStatus: true },
              columns: [
                      { field: "EntityValue", headerText: "Entidade", width: 70 },
                      { field: "EntityCreated", headerText: "Criada a", format: "{0:dd/MM/yyyy HH:mm:ss}", width: 65 },
                      { field: "StatusValue", headerText: "Estado", width: 40 },
                      { field: "AnsweredByDescription", headerText: "Respondido por", width: 60 },
                      { field: "Phone1", headerText: "Telefone 1", width: 40 },
                      { field: "Phone2", headerText: "Telefone 2", width: 40 },
                      { field: "MobilePhone", headerText: "Telemóvel", width: 40 },
                      { field: "Email", headerText: "Email", width: 90 },
                      { field: "", headerText: "Respostas", template: "#templateRespostas", width: 40, textAlign: ej.TextAlign.Center },
                      { field: "", headerText: "Operações", template: "#templateOperacoes", width: 40, textAlign: ej.TextAlign.Center }
              ]
          });
Server Side:

[HttpGet]
public ActionResult GetList()
{
    string surveyId = Request.Url.Segments[4].Remove(Request.Url.Segments[4].Length - 1);
    int topParam = int.Parse(Request.QueryString["$top"]);
    int skipParam = int.Parse(Request.QueryString["$skip"]);
    string filterParam = Request.QueryString["$filter"];
    string orderByParam = Request.QueryString["$orderBy"];

Dm property always gets empty. Any help? Im not using any MVC tool from syncfusion, only JS grid. The only thing i add to test the datamanager on server side was the include of Syncfusion.EJ.dll on my project.

Jayaprakash Kamaraj [Syncfusion]
Replied On April 19, 2016 07:21 AM UTC

Hi Joaquim,

Thanks for contacting Syncfusion support.

We have analyzed your code example and found that you have missed setting adaptor as 
UrlAdaptor in the ejDataManager. So, please set adaptor as the UrlAdaptor. In this adaptor, you have to pass the parameter as DataManager, and also have to refer Syncfusion.Ej dll in your project to use DataManager. Please refer to the following code example, help document and sample.

Index.cshtml

<script>

    $(function () {

        var dataManager = ej.DataManager({ url: "/Home/DataSource", adaptor: new ej.UrlAdaptor() });


        $("#Grid").ejGrid({

            locale: "pt-PT",

            dataSource: dataManager,

            allowPaging: true,

            allowSorting: true,

            allowGrouping: true,

            enableDropAreaAnimation: false,

            allowFiltering: true,

            filterSettings: { showFilterBarStatus: true },

            columns: [

            { field: "OrderID", headerText:"OrderID",width: 120 },

            { field: "OrderDate", headerText: "Archived", format: "{0:yyyy/MM/dd HH:mm:ss}", width: 140 },

            { field: "CustomerID",headerText:"CustomerID",width: 100 }]

        });

    });


</script>
HomeContoller.cs

public ActionResult DataSource(DataManager dm)

        {

            IEnumerable DataSource = new NorthwindDataContext().OrdersViews.ToList();

            DataOperations operation = new DataOperations();

            DataResult result = new DataResult();

            result.result = DataSource;

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

            if (dm.Skip > 0)

                result.result = operation.PerformSkip(result.result, dm.Skip);

            if (dm.Take > 0)

                result.result = operation.PerformTake(result.result, dm.Take);

            return Json(result, JsonRequestBehavior.AllowGet);

        }

        public class DataResult

        {

            public IEnumerable result { get; set; }

            public int count { get; set; }
        }


Help document: http://help.syncfusion.com/js/grid/editing#persisting-data-in-server

Sample: http://www.syncfusion.com/downloads/support/forum/123753/ze/ejGrid_Filtering-1680098298

Regards,

Jayaprakash K.

Joaquim Santos
Replied On April 19, 2016 10:03 AM UTC

Thanks worked all fine.

Joaquim Santos
Replied On April 19, 2016 10:07 AM UTC

Taking this opportunity to make additional question. Is there any feature or way to make ejgrid look better in mobile or different size browsers, phones? As width gets shorter all information becomes clumsy. Is there any card feature or any to display information in another format? Thanks once again!

Jayaprakash Kamaraj [Syncfusion]
Replied On April 20, 2016 11:10 AM UTC

Hi Joaquim,

In Grid, we have default support for responsive behavior. If responsive is enabled, then the grid will be rendered based on parent’s width and height. We need to set isResponsive and min-width Property to enable responsive in Grid. Min Width is used to maintain minimum width for the Grid and if the grid width is less than minWidth then the scrollbar will be displayed. Please refer to the below code example, help documentation, online demo link and sample.

    <script type="text/javascript">

        $(function () {

            // the datasource "window.gridData" is referred from jsondata.min.js

            var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));

            $("#Grid").ejGrid({

                dataSource: data,

                           isResponsive: true,

                           minWidth: 700,

                allowPaging: true,

                allowSorting: true,

                columns: [

                        { field: "OrderID", headerText: "Order ID", width: 75 , textAlign: ej.TextAlign.Right },

                        { field: "CustomerID", headerText: "Customer ID", width: 80 },

                        { field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },

                        { field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right },

                        { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },

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

                ]

            });

        });
    </script>


Help Documentation for IsResponsive: http://help.syncfusion.com/js/api/ejgrid#members:isresponsive

Help Documentation for MinWidth: http://help.syncfusion.com/js/api/ejgrid#members:minwidth

Online Demo link: http://js.syncfusion.com/demos/web/#!/azure/grid/adaptive

Sample: http://www.syncfusion.com/downloads/support/forum/123753/ze/Responsive1367555081


Regards,

Jayaprakash K.

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

;