Request data from Server - with MVC code behind

[Carlos Flores]

Hi, 

I have an MVC 5 application and I purchased the Javascript licence some days ago.

I've been trying to make a grid that request data from the server, but I couldn't.

After read so many posts I arrived to the following solution but still without compiling: 

Error: Can not find the type or namespace name 'Syncfusion' (are you missing a using directive or an assembly reference?)

BTW: I have the references added on my solution 

• Syncfusion.Core
• Syncfusion.EJ

Could you help me and tell me where I'm doing wrong? OR what is the best way to load data from the server using Javascript Platform and MVC as code behind?

Thanks!!

Here is the View:

@{

    ViewBag.Title = "KMS - Syncfusion Grid Example";

    ViewBag.xsTitle = "Syncfusion Grid Example";

    Layout = null;

}

<link rel='nofollow' href="@Url.Content("~/Content/ej.widgets.core.min.css")" rel="stylesheet" />

<link rel='nofollow' href="@Url.Content("~/Content/ej.widgets.core.bootstrap.min.css")" rel="stylesheet" />

<link rel='nofollow' href="@Url.Content("~/Content/bootstrap-theme/ej.widgets.all.min.css")" rel="stylesheet" />

@Scripts.Render("~/bundles/syncfusion-needs")

<script src="~/Scripts/Syncfusion/web/ej.web.all.js"></script>

<div class="content-container-fluid">

    <div class="row">

        <div class="cols-sample-area" style="height:550px">

            <div id="Grid"></div>

        </div>

    </div>

</div>

<script type="text/javascript">   

    $(function () {

        var dataManger = ej.DataManager({

            url: "@Url.Action("_GetEmployees", "Syncfusion")"

        });

        $("#Grid").ejGrid({

            dataSource: dataManger,

            allowPaging: true,

            pageSettings: { pageSize: 9 },

            columns: [

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

                { field: "Employee_LName", headerText: "Last Name" },

                { field: "Employee_FName", headerText: "First Name" },

                { field: "UserName", headerText: "UserName" }

            ]

        });

    });

</script>

Bundle:

            bundles.Add(new ScriptBundle("~/bundles/syncfusion-needs").Include(

                "~/Scripts/jquery-2.1.4.js",

                "~/Scripts/jquery.easing.1.3.js",

                "~/Scripts/jquery.globalize.js",

                "~/Scripts/jsrender.js"));

Controller

using KMSApplications.Models;

using KMSDataAccess;

using System;

using System.Collections;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Syncfusion.Core;

using Syncfusion.JavaScript;

namespace KMSApplications.Controllers

{

    public class SyncfusionController : BaseController

    {

        // GET: Syncfusion

        public ActionResult Index()

        {

            return View();

        }

        public ActionResult _GetEmployees(DataManager dm)

        {

            var model = DataServiceLocator.GetEmployee_DAO()

                                          .GetAll(Context)

                                          .Select(x => new EmployeeModel

                                          {

                                              Active = x.Active ?? false,

                                              Email = x.Email,

                                              Employee_FName = x.Employee_FName,

                                              Employee_ID = x.Employee_ID,

                                              Employee_LName = x.Employee_LName,

                                              UserName = x.UserName

                                          });

            var Data = model as IEnumerable;

            int count = model.Count();

            Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations();

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting

            {

                Data = operation.PerformSorting(Data, dm.Sorted);

            }

            if (dm.Where != null && dm.Where.Count > 0) //Filtering

            {

                Data = operation.PerformWhereFilter(Data, dm.Where, dm.Where[0].Operator);

            }

            if (dm.Skip != 0)

            {

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

            }

            if (dm.Take != 0)

            {

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

            }

            return Json(new { result = Data, count = count }, JsonRequestBehavior.AllowGet);

        }

    }

}

[Alan Sangeeth S]

Hi Carlos,

Thanks for using Syncfusion products.

We suspect that you have not added Syncfusion DLL references under the assemblies section in Web.config file which is the cause of the issue. Please refer the following code snippets.

<configuration>

…

<system.web>

    <compilation debug="true" targetFramework="4.5.1">

      <assemblies>

        <add assembly="Syncfusion.EJ, Version=13.2450.0.34, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

        <add assembly="Syncfusion.EJ.Mvc, Version=13.2500.0.34, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

      </assemblies>

    </compilation>

Please find the detailed documentation corresponding for the MVC Project where we have explained how to included Syncfusion references into the project under the section ‘Introduction -> Server side Wrappers -> ASP.NET -> Create Manually’ in the document.

Documentation Link: Introduction

From your code snippets we have also found that you have not specified adaptor in DataManager. When we are fetching data from MVC controller action we need to specify the adaptor as “UrlAdaptor”. Please refer the following code snippets.

var dataManger = ej.DataManager({

            url: "@Url.Action("_GetEmployees", "Home")",

            adaptor: new ej.UrlAdaptor()

        });

Please refer the following documentation link for further reference on UrlAdaptor.
https://help.syncfusion.com/js/datamanager/data-adaptors#url-adaptor

For your convenience we have created a sample and the same can be downloaded from below location.
Sample: https://www.syncfusion.com/downloads/support/forum/120037/ze/EJGrid44426244

Please let us know if you have any queries.

Regards,
Alan Sangeeth S

[Carlos Flores]

Hi Alan, 

Thanks for the reply!

One thing that I didn't clarify is that we have only Syncfusion/Javascript license, not Syncfusion/MVC one.

When I try to run your example I got an error about the Syncfusion.EJ.Mvc library not found.

Maybe I can do it with a knockout mode. My idea is to call a method that will return JSON data that will be in a knockout model and I want to bind the grid to the knockout model.

Thanks!

[Alan Sangeeth S]

Hi Carlos,

The libaray “Syncfusion.EJ.MVC” will be shipped to your machine only when you install Syncfusion MVC Platform controls.

We have modified the sample by not using the libraries “Syncfusion.EJ” and “Syncfusion.EJ.MVC” and the same can be downloaded from below link.

Sample: https://www.syncfusion.com/downloads/support/forum/120037/ze/EJGrid1103874756

For your information, Classes such as “DataManager”, “DataOperations” belongs to “Syncfusion.EJ” library. And as we have not referenced it in project we need to bind values, that are passed from client-side, in server-side manually and we need to perform data operations using “System.Linq”. Please refer the following code snippets.

<div id="Grid" data-bind="ejGrid: {dataSource: data,allowPaging:true,pageSettings:{pageSize:5},allowSorting:ssort}"></div>

<script type="text/javascript">

    window.employeeView = {

        ssort: ko.observable(true),

        data: ej.DataManager({ url: "/Home/_GetEmployees", adaptor: new ej.UrlAdaptor() }),

    };

public class HomeController : Controller

    {

        public ActionResult _GetEmployees(int skip, int take)

        {

            var model = new NorthwindDataContext().EmployeeViews.ToList();

            var count  = model.Count;

            model = model.Skip(skip).Take(take).ToList();

            return Json(new { result = model, count = count }, JsonRequestBehavior.AllowGet);

        }

Regards,
Alan Sangeeth S

[Carlos Flores]

Thanks Alan, now it works!

Could you send me a link of full documentation about configuration with ko?

I want to know the ordering, filtering, etc.

Thanks again.

[Alan Sangeeth S]

Hi Carlos,

Query 1: “documentation about configuration with Knockout”

Please refer the following documentation for detail regarding configuration Grid Control in Knockout.

https://help.syncfusion.com/js/knockoutjs

Query 2: “want to know the ordering, filtering”

We suspect that you are asking about handling filtering and sorting queries in server side.

When we perform Grid actions like filtering,a request would be sent to server with details of filtering column in request header. Please refer the following screenshot


We can bind those params in server-side and perform corresponding actions using System.Linq. Please refer the following code snippets

public ActionResult _GetEmployees(int skip, int take, List<Filter> where, List<Sorted> sorted)

        {

var model = new NorthwindDataContext().EmployeeViews.ToList();

…model = model.AsQueryable().Provider.CreateQuery(Expression.Call(typeof(Queryable), "Where", new Type[] { model.AsQueryable().ElementType }, model.AsQueryable().Expression, lambda)).Cast<EmployeeView>().ToList();

For your convenience we have created a sample and the same can be downloaded from below link.

Sample:  https://www.syncfusion.com/downloads/support/forum/120037/ze/EJGrid-935234577

Regards,
Alan Sangeeth S

[Carlos Flores]

Many thanks! I have almost everything.

Just one thing, the filter always do an equal operation:

var bExp = Expression.Equal(memExp, Expression.Constant(Convert.ChangeType(filtre.Value, memExp.Type), memExp.Type));

I was trying to change the code in order to get the string filter as startwith working but I don't know how can I do that.

Could you give me an example?, we are close to the end :-)

[Alan Sangeeth S]

Hi Carlos,
 
Please refer the following link for details regarding filter operation with "StartsWith".
https://stackoverflow.com/questions/8321548/expression-call-in-simple-lambda-expression-is-it-possible
 
Regards,
Alan Sangeeth S