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.

Essential/JS grid with AngularJS

Thread ID:

Created:

Updated:

Platform:

Replies:

120169 Sep 7,2015 12:20 PM Sep 9,2015 03:43 AM JavaScript 3
loading
Tags: ejGrid
Carlos Flores
Asked On September 7, 2015 12:20 PM

Hi there, 

I just wondering if do you have any documentation or support to load a eGrid component with AngularJS.
I have it done with knockout, but we want to move to angular.

Thanks!

Here is my code with Knockout:
@{
    ViewBag.Title = "KMS - Syncfusion Grid Example";
    ViewBag.xsTitle = "Syncfusion Grid Example";
}

<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/knockout")

<script src="~/Scripts/Syncfusion/web/ej.web.all.min.js"></script>
<script src="~/Scripts/Syncfusion/common/ej.widget.ko.min.js"></script>

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

<div ng-app="listCtrl">
    <div ng-controller="phonelistctrl">
        <div id="Grid" data-bind="ejGrid: {dataSource: data, allowPaging: true, pageSettings: { pageSize:15 }, allowSorting: ssort, allowFiltering: true}"></div>
    </div>
</div>

<script type="text/javascript">
    window.employeeView = {
        ssort: ko.observable(true),
        data: ej.DataManager({ url: "/Syncfusion/_GetEmployees", adaptor: new ej.UrlAdaptor() }),
    };

    ko.applyBindings(employeeView);
</script>

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On September 8, 2015 03:47 AM

Hi Carlos,

Thanks for contacting Syncfusion Support.

To render the Angular Grid, please follow the below steps,

1)      Refer the following files,


    <script src="~/Scripts/angular.min.js"></script>

    <script src="@Url.Content("~/Scripts/ej.web.all.min.js")"></script>   

<script src="~/Scripts/ej.widget.angular.min.js"></script>


2)      Since the “EJ” directives are available in the module “ejangular”, please refer to the below code to refer it in your ng-app, 

<script>

        . . .

        angular.module('listCtrl', ['ejangular'])

          .controller('GridCtrl', function ($scope) {

              . . .

          });

    </script>


3)      The angular directive for ejGrid is “ej-grid” and its model properties can be set using prefix “e-“.  For more complex models like pageSize, we can extend the “hyphen”, as shown in the below code example,

<div ng-controller="GridCtrl">

    <div id="grid" ej-grid e-datasource="data"  e-pagesettings-pagesize="15" e-pagesettings-currentpage="1" e-pagesettings-pagecount="6" e-allowpaging="true" e-allowSorting="true">

        <div e-columns>

            <div e-column e-field="OrderID" e-headertext="Order ID" e-isprimarykey="true" e-textalign="right" div>

            . . .

 </div>


4)      Please refer to the following Help document for more information on AngularJS with GridControl,

http://docs.syncfusion.com/js/angularjs

5)       For you convenience, we have created a sample on angularjs. Please find the sample from the following location:

Carlos Flores
Replied On September 8, 2015 07:22 AM

Thanks for the answer, works fine!

I have a couple of extra questions:
  1. I want to do an export function with the current dataset (filter and order), How can I do to send the current grid filter and the grid order settings to the server? Or a better question, Is there any export functionality in Essential/JS ?
  2. Is possible to have an edit modal popup?
  3. How can I do a deletion confirm box?
  4. Is there any filter widget based on the column type? 
  5. How can I do a custom filter widget with a combobox?

My code right now:

@View:
<div ng-app="listCtrl">
    <div ng-controller="userlistctrl">
        <div id="Grid" ej-grid
             e-datasource="data"
             e-allowpaging="true"
             e-allowsorting="true"
             e-allowscrolling="true"
             e-allowfiltering="true"
             e-allowgrouping="true"
             e-pagesettings-pagesize="20"
             allowkeyboardnavigation="true"
             e-toolbarsettings-showtoolbar='true'
             e-toolbarclick="toolbarHandler"
             e-toolbarsettings-toolbaritems='toolbar'
             e-recorddoubleclick="recordDblClick"
             e-editsettings-allowdeleting='true'
             e-editsettings-allowediting='true'
             e-editsettings-allowadding='true'>
            <div e-columns>
                <div e-column e-field="Employee_ID" e-headertext="ID" e-textalign="left" e-width="50"></div>
                <div e-column e-field="Employee_FName" e-headertext="First Name" e-textalign="left"></div>
                <div e-column e-field="Employee_LName" e-headertext="Last Name" e-textalign="left"></div>
                <div e-column e-field="UserName" e-headertext="UserName" e-textalign="left"></div>
                <div e-column e-field="Email" e-headertext="Email" e-textalign="left"></div>
                <div e-column e-field="Active" e-headertext="Active" e-textalign="center" e-width="50"></div>
            </div>
        </div>  
    </div>
</div>

<script type="text/javascript">

    angular.module('listCtrl', ['ejangular'])
        .controller('userlistctrl', function ($scope) {

            $scope.toolbar = ["excelExport", "add", "edit", "delete", "update", "cancel"]
            $scope.data = ej.DataManager({ url: '@Url.Action("_GetEmployees", "Syncfusion")', adaptor: new ej.UrlAdaptor() });
            $scope.toolbarHandler = function (args) {
                if (args.itemName == "Excel Export") {
                    args.cancel = true;
                    goTo('@Url.Action("ExcelExport", "Syncfusion")');   <----- HERE I WANT TO SEND THE CURRENT FILTER AND ORDER
                }
            };
        });
</script>

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On September 9, 2015 03:43 AM

Hi Carlos,

Query 1: I want to do an export function with the current dataset (filter and order), How can I do to send the current grid filter and the grid order settings to the server? Or a better question, Is there any export functionality in Essential/JS ?

To export the Grid with current dataset, use toolbarclick event of Grid in angularjs.

Please refer to the below link for available events, http://docs.syncfusion.com/js/api/ejgrid#events

<div ng-controller="GridCtrl">

     <div id="grid" ej-grid e-datasource="data"

          e-toolbarclick="toolbarHandler"

          e-toolbarsettings-toolbaritems='toolbar'

          e-toolbarsettings-showtoolbar='true'

          >
. . .

             </div>

</div>


angular.module('listCtrl', ['ejangular'])

          .controller('GridCtrl', function ($scope) {

              $scope.toolbar = ["add", "edit", "delete", "cancel","excelExport", "pdfExport","wordExport"];

              $scope.data = dm;

              $scope.toolbarHandler = function (args) {

                  if (args.itemName == "Excel Export") {

                      args.cancel = true;

                      this.export("/Home/ExportToExcel");

                  }

                  . . .

              }
          });

public class HomeController : Controller
    {
     . . .

     public void ExportToExcel(string GridModel)

        {

            ExcelExport exp = new ExcelExport();

            IEnumerable < Order > DataSource = new DataClasses1DataContext().Orders.ToList();

            var obj = ConvertGridObject(GridModel);

            exp.Export(obj, DataSource, "Export.xlsx", ExcelVersion.Excel2010, false, false, "flat-saffron");
        }
       . . .
     }



On clicking the toolbar, “export”, a public method of Grid, will call the ExportToExcel action of the HomeController, will export the Grid. For more information on this, please refer to the below links,
http://docs.syncfusion.com/js/grid/exporting
https://www.syncfusion.com/kb/5040/how-to-export-the-grid-in-angularjs
https://www.syncfusion.com/kb/javascript/ejgrid?sortId=0&tags=export
https://www.syncfusion.com/kb/aspnetmvc/all?sortId=0&tags=exporting

Query 2: Is possible to have edit modal popup?

This feature is available with the dialog editing mode. To use a edit modal popup or dialog editing, set edit mode as a “dialog”.

<div ng-controller="GridCtrl">

     <div id="grid" ej-grid e-datasource="data"

          e-toolbarclick="toolbarHandler" e-toolbarsettings-showtoolbar='true'

          e-toolbarsettings-toolbaritems='toolbar'

          e-editsettings-editmode="dialog"

          e-editsettings-showdeleteconfirmdialog="true">
     . . .

             </div>

</div>



Query 3: How can I do a deletion confirm box?

To prompt the deletion action, enable the showDeleteConfirmDialog of the editSettings.

<div ng-controller="GridCtrl">

     <div id="grid" ej-grid e-datasource="data"

          e-toolbarclick="toolbarHandler" e-toolbarsettings-showtoolbar='true'

          e-toolbarsettings-toolbaritems='toolbar'

          e-editsettings-editmode="dialog"

          e-editsettings-showdeleteconfirmdialog="true">
     . . .

             </div>

</div>



Query 4: Is there any Filter Widget based on the column Type?

We found that you have enabled allowFiltering in the provided code. On enabling the allowFiltering, by default the filterBar will be enabled.

With the filterbar, we don’t have a column type specified filtering like, string or number or date.  But the menu Filtering will provide these kind of support. To enable menu filtering, filterType of FilterSettings will be given as “menu” . Please refer the below example.  

<div ng-controller="GridCtrl">

     <div id="grid" ej-grid e-datasource="data"

     . . .

          e-allowfiltering="true"

          e-filtersettings-filtertype="menu"
          >
        . . .

             </div>
</div>



Please refer our online sample, http://js.syncfusion.com/demos/web/#!/azure/grid/filtering/filteringmenu

Query 5: How do I customer filter widget with combobox?

If your requirement is to use an external filtering, please make use of filterColumn method to achieve this.

Please refer to the “ExternalFiltering” section of below page, to get a clear picture about this.
http://docs.syncfusion.com/js/grid/filtering

Here is the API link for filterColumn: http://docs.syncfusion.com/js/api/ejgrid#methods:filtercolumn

For your convenience, with the above requirement, we have created a sample and the same can be downloaded from the below location.
http://www.syncfusion.com/downloads/support/forum/120169/ze/MvcApplication41284050957

Regards,
Seeni Sakthi Kumar 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.

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.

;