Ejgrid DataManager object

[Joaquim Santos]

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]

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]

Thanks worked all fine.

[Joaquim Santos]

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]

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.