Essential/JS grid with AngularJS

[Carlos Flores]

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]

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:

         http://www.syncfusion.com/downloads/support/forum/120169/ze/MvcApplication4-1637296052

Regards,
Seeni Sakthi Kumar S.

---

CF Carlos Flores September 8, 2015 11:22 AM UTC

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>

---

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 9, 2015 07:43 AM UTC

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.

SIGN IN To post a reply.

• 3 Replies
• 2 Participants
• Want to subscribe?
  SIGN IN
• Created by
  CF Carlos Flores
• Platform
  jQuery
• Control
  ejGrid
• Created On
  Sep 7, 2015 04:20 PM UTC
• Last Activity On
  Sep 9, 2015 07:43 AM UTC

[Carlos Flores]

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]

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.