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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Editable grid powered by AngularJS, Javascript and MVC

Thread ID:

Created:

Updated:

Platform:

Replies:

118071 Jan 28,2015 09:58 AM UTC Feb 27,2015 11:32 AM UTC JavaScript 12
loading
Tags: ejGrid
Muyiwa
Asked On January 28, 2015 09:58 AM UTC

Hi,

I want to develop an editable grid powered by AngularJS and MVC/Web API conected to a SQL Server backend. I was not able to locate the relevant documentation for this, the closest i was able to find was Thread id - 116912 titled -'column formatting example with ejGrid with angularjs'.

This is very urgent and your quick response will be well appreciated.

Thanks
Muyiwa.


Madhu Sudhanan P [Syncfusion]
Replied On January 29, 2015 01:39 PM UTC

Hi Muyiwa,

Thanks for using Syncfusion products.

Query: “I want to develop an editable grid powered by AngularJS and MVC/Web API conected to a SQL Server backend. I was not able to locate the relevant documentation for this,

Essential Javascript have in-built support to perform editing using WebAPI controller. This can be achieved by using the WebApiAdaptor. Please refer the below code snippet for grid initialization and assigning the WebApiAdaptor  adaptor for ej.DataManager.

<div class="row">

    <div ej-grid id="Grid" e-datasource="data" e-allowpaging="true" e-editsettings-allowadding="true" e-editsettings-allowdeleting="true" e-editsettings-allowediting="true" e-editsettings-showconfirmdialog="false" e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools">

        <div e-columns>

            <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-isprimarykey="true"></div>

            <div e-column e-field="Name" e-headertext="Employee Name"></div>           

        </div>

    </div>

</div>

<script>

    angular.module("GridCtrl", ["ejangular"])

        .controller("bodyCtrl", function ($scope) {

        //Provide the datasource to the grid. Here the WebApiAdaptor is used.

        $scope.data = ej.DataManager({ url: "api/Orders", adaptor: "WebApiAdaptor" });

        $scope.tools = ["add", "edit", "delete", "update", "cancel"];

    });

</script>

 While editing, the data will be posted to the WebAPI controller and processed at the server side. For you convenience, we have created a simple sample with Angular Grid in MVC and the same can be downloaded from the below location.

Sample Location:  http://www.syncfusion.com/downloads/support/directtrac/118071/WebAPI-AngularEdit1459652055.zip

In the above sample, we have performed the editing operation using Linq to Sql and please refer the above sample for server side codes.

And also please refer the below link initializing control using AngularJS.

http://help.syncfusion.com/ug/js/default.htm#!documents/angularjs.htm

The properties to the grid control will be provided as the directive value in which the directive will starts with the “e-” followed by property name (in Lowercase).  The complex properties will be separated by hypen symbol as e-editsettings-allowadding. Please refer the below link for the available properties in grid.

http://help.syncfusion.com/UG/JS_CR/ejGrid.html

Concepts and features: http://help.syncfusion.com/ug/js/default.htm#!documents/conceptsandfeatures22.htm

Please let us know if you have any queries.

Regards,

Madhu Sudhanan. P



Muyiwa
Replied On January 30, 2015 03:49 PM UTC

Hi Madhu,

Thanks for your response.

I tried enhancing the sample you gave me, got one feature working but was not able to get the rest to work. The bit that worked is shown below
 
e-editsettings-editmode="mode"
$scope.mode = ej.Grid.EditMode.Dialog;

I could not get any of the following to work. 

e-filtersettings-allowfiltering="true" e-filtersettings-showfilterbarstatus="true"  e-filtersettings-filtertype="filterMode" e-isresponsive="true" e-locale="es-ES" e-showcolumnchooser="true"
    What i am trying to do is to enable filtering etc. 
    The urls you supplied have some information on these attributes but not very detailed. Are there any other pages, books or samples that have more detailed information on using angularjs with the grid control?

    Thanks for all your help.

    Regards
    Muyiwa


      Madhu Sudhanan P [Syncfusion]
      Replied On February 2, 2015 02:04 PM UTC

      Hi Muyiwa,

      Please find the response.

      Query #1: “What i am trying to do is to enable filtering etc

      Filtering:

      While using remote binding datasource, all the grid actions such as filtering, grouping and sorting should be handled at the server side itself. But in the previously provided sample, we didn’t performed such operations and hence grid actions were not worked.

      Now we have modified the Web API controller to handle the grid actions and please refer the below code snippet.


      // GET api/<controller>      

              public PageResult<EmployeePhoto> Get(ODataQueryOptions opts)

              {

                  List<EmployeePhoto> emp = db.EmployeePhotos.ToList();

                  return new PageResult<EmployeePhoto>(opts.ApplyTo(emp.AsQueryable()) as IEnumerable<EmployeePhoto>, null, emp.Count);

              }

      The ejDataManager works well  OData and the parameter sends to web api will be in OData format.  Hence we have used ODataQueryOptions to get parameter from the request.  For more information on Odata query support for Web API please refer the below link.

      http://www.asp.net/web-api/overview/odata-support-in-aspnet-web-api/supporting-odata-query-options#enable

      For your convenience, we have modified the previously provided sample and the same can be downloaded from the below location.

      Sample Location:  http://www.syncfusion.com/downloads/support/directtrac/118071/WebAPI-AngAllOperations-2144667810.zip

      Locale:

      To localize the grid default string, we have to provide the localization string value by adding a property(property name should be same as locale name) to the object “ej.Grid.locale”.  The default property and values of locale “en-US” will be as follows.


      ej.Grid.locale["en-US"] = {

                  EmptyRecord: "No records to display",

                  //Editing option localization strings

                  DeleteOperationAlert: "No records selected for delete operation",

                  EditOperationAlert: "No records selected for edit operation",

                  SaveButton: "Save",

                  OkButton: "OK",

                  CancelButton: "Cancel",

                  EditFormTitle: "Details of ",

                  AddFormTitle: "Add New Record",

                  //Key Combination alert message

                  Notactionkeyalert: "This Key-Combination is not avaiable",

                  Keyconfigalerttext: "This Key-Combination has already been assigned to ",

                  //Group drop area and caption format

                  GroupDropArea: "Drag a column header here to group its column",

                  GroupCaptionFormat: "items",

                  //Bulk Editing Alert Messages

                  BatchSaveConifrm: "Are you sure you want to save changes?",

                  BatchSaveLostChanges: "Unsaved changes will be lost. Are you sure you want to continue?",

                  //Pager bar message string

                  PagerInfo: "{0} of {1} pages ({2} items)",

                  //Frozen Alert Messages

                  FrozenColumnsViewAlert: "Frozen columns should be in grid view area",

                  FrozenColumnsScrollAlert: "Enable allowScrolling while using frozen Columns",

                  FrozenNotSupportedException: "Frozen Columns and Rows are not supported for Grouping, Row Template, Detail Template and Batch Editing",

                  //Toolbar tooltip

                  Add: "Add",

                  Edit: "Edit",

                  Delete: "Delete",

                  Update: "Update",

                  Cancel: "Cancel",

                  //Filter menu strings

                  StringMenuOptions: [{ text: "StartsWith", value: "StartsWith" }, { text: "EndsWith", value: "EndsWith" }, { text: "Contains", value: "Contains" }, { text: "Equal", value: "Equal" }, { text: "NotEqual", value: "NotEqual" }],

                  NumberMenuOptions: [{ text: "LessThan", value: "LessThan" }, { text: "GreaterThan", value: "GreaterThan" }, { text: "LessThanOrEqual", value: "LessThanOrEqual" }, { text: "GreaterThanOrEqual", value: "GreaterThanOrEqual" }, { text: "Equal", value: "Equal" }, { text: "NotEqual", value: "NotEqual" }],

                  PredicateAnd: "AND",

                  PredicateOr: "OR",

                  Filter: "Filter",

                  MatchCase: "Match Case",

                  Clear: "Clear"

                  PrintGrid: "Print",

                  ExcelExport: "Excel Export",

                  WordExport: "Word Export",

                  PdfExport: "PDF Export"

                  ResponsiveFilter: "Filter",

                  ResponsiveSorting: "Sort"

              };

      Please refer our online demo of localizing grid.

      http://js.syncfusion.com/demos/web/#!/azure/grid/Localization

      ShowColumnChooser:

      Please refer our below user guide for enabling the column chooser in grid.

      http://help.syncfusion.com/ug/js/default.htm#!documents/columns2.htm

      Responsive Grid:

      To use the adaptive feature in ejGrid we have include the following css files in your view page.


      <link rel='nofollow' href="themes/responsive-css/ej.responsive.css" rel="stylesheet" />

         <link rel='nofollow' href="themes/responsive-css/ejgrid.responsive.css" type="text/css" rel="stylesheet" />

      Query #2: Are there any other pages, books or samples that have more detailed information on using angularjs with the grid control?

      Please refer our online concept and features section of user guide for more details of using grid features.

      http://help.syncfusion.com/ug/js/default.htm#!documents/conceptsandfeatures22.htm

      Please let us know if you have any queries.

      Regards,

      Madhu Sudhanan. P



      Muyiwa
      Replied On February 4, 2015 06:14 PM UTC

      Hi Madhu,

      Many thanks for all your help. 

      I will use the attached sample and let you know if there are any issues.

      Kind Regards
      Muyiwa

      Muyiwa
      Replied On February 5, 2015 02:21 AM UTC

      Hi Madhu,

      I have extended the sample you sent to have frozen columns etc. I have repeated the Name column in order to test the frozen column functionality. My next challenge is to have a dropdown box. It displays the box but does not allow me to select values!

      Please find the markup code below (the commented out lines are the web pages that seemed to be closely related to what i am trying to achieve). The server code is the same as that which you sent me.

      The other thing i noticed is that after a while i had to put the full path of the api in order to get it to work, the relative path was no longer working !

      I look forward to hearing from you soon.

      Regards
      Muyiwa





      @{
          ViewBag.Title = "Home Page";
      }

      <div class="row">

          <div ej-grid id="Grid" e-width="500px" e-datasource="data" e-scrollsettings="mysettings" e-allowscrolling="true" e-editsettings-editmode=" mode" e-allowsorting="true" e-allowfiltering="true" e-allowpaging="true" e-editsettings-allowadding="true" e-editsettings-allowdeleting="true" e-editsettings-allowediting="true" e-editsettings-showconfirmdialog="false" e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools" e-locale="es-ES" e-showcolumnchooser="true">
              <div e-columns>
                  <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-isprimarykey="true" e-isfrozen="true" e-textalign="right"></div>
                  <div e-column e-field="Name" e-isfrozen="true" e-headertext="Employee Name" e-textalign="right"></div>
                  <div e-column e-field="Name" e-headertext="Employee Name" e-textalign="right" e-edittype="dropdownedit" e-datasource="data1"></div>
                  <div e-column e-field="Name" e-headertext="Employee Name" e-textalign="right"></div>
                  <div e-column e-field="Name" e-headertext="Employee Name" e-textalign="right"></div>
                  <div e-column e-field="Name" e-headertext="Employee Name" e-textalign="right"></div>
                  <div e-column e-field="Name" e-headertext="Employee Name" e-textalign="right"></div>
              </div>

              @*http://www.syncfusion.com/forums/117482/dropdown-list-in-column-is-empty*@
              @*e-edittype="dropdownedit" e-datasource="data1"*@
              @*e-edittype="dropdownedit"*@
              @*See http://mvc.syncfusion.com/demos/ui/grid/editing/dropdowndatabinding*@

              @*e-allowgrouping="true"*@

          </div>
          

      </div>

      <script>
          angular.module("GridCtrl", ["ejangular"])
              .controller("bodyCtrl", function ($scope) {

              //Provide the datasource to the grid. Here the WebApiAdaptor is used.
              //$scope.data = ej.DataManager({ url: "api/Orders", adaptor: "WebApiAdaptor" });
              $scope.data = ej.DataManager({ url: "http://localhost:2088/api/Orders", adaptor: "WebApiAdaptor" });
                  

              $scope.tools = ["add", "edit", "delete", "update", "cancel"];

              $scope.mode = ej.Grid.EditMode.Dialog;
              $scope.mysettings = { height: 300, width: "800" };

              $scope.data1 = { id: "1", Name: "One"};
              

              //e-edittype="dropdownedit" e-datasource="data1"
                  //editType: ej.Grid.EditingType.Dropdown

          });
      </script>

      Alan Sangeeth S [Syncfusion]
      Replied On February 5, 2015 10:27 AM UTC

      Hi Muyiwa,

      Thanks for the update.

      Query 1: “unable to select values in dropdown column”

      We have analyzed your code snippets and found that you have given dropdown datasource as object with property names as “id” & “Name” which is the cause of the issue.

      We would like to let you know that datasource for the dropdown must be given in value and text format as in the below code snippet.

      <div ej-grid id="Grid" e-datasource="data" e-scrollsettings="mysettings" e-allowscrolling="true" e-allowsorting="true"...>

      <div e-columns>

                  <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-isprimarykey="true" e-textalign="right"></div>

                  <div e-column e-field="Name" e-headertext="Employee Name" e-edittype="dropdownedit" e-datasource="data1"></div>

      ...

      </div>

      $scope.data1 = [{ text: "One", value: "One" }, { text: "Two", value: "Two" }];

      Query 2: “relative path was no longer working”

      We are able to reproduce the issue and we suggest you to use “@Url.Content()” to set relative path that resolves the issue. Please find the below code snippets.

      $scope.data = ej.DataManager({ url: '@Url.Content("~/api/Orders")', adaptor: "WebApiAdaptor" });

      Alternatively, you can also use the below code snippet to resolve the issue.

      $scope.data = ej.DataManager({ url: “../api/Orders", adaptor: "WebApiAdaptor" });

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

      Sample: http://www.syncfusion.com/downloads/support/directtrac/118071/WebAPI-AngAllOperations-21446678101721085226.zip

      Please let us know if you need any further assistance.

      Regards,
      Alan Sangeeth S



      Muyiwa
      Replied On February 7, 2015 12:56 AM UTC

      Hi Alan,

      Thanks for your prompt response. I have tried your suggestions and they work.

      Kind Regards
      Olu

      Madhu Sudhanan P [Syncfusion]
      Replied On February 9, 2015 04:24 AM UTC

      Hi Olu,

      Thanks for your update.

      Please get back to us if you need further assistance. We will happy to assist you.

      Regards,

      Madhu Sudhanan. P



      Muyiwa
      Replied On February 26, 2015 12:30 AM UTC

      Hi there,

      I wish to have a dropdown column in my  (AngularJS + MVC) grid and my use case is very similar to that of the example shown - http://mvc.syncfusion.com/demos/web/grid/foreignkeycolumn   where the EmployeeID is the foreign key.
      This example is in MVC, can you give me the equivalent code snippet for AngularJS + MVC ?

      The code below displays the numerical value in the Department column of the Doctors grid as opposed to the text one. I am currently passing in hard coded value into the dropdown but there is a separate Department table which will provide the values once i am able to get this working.

      <div ej-grid id="Grid" e-datasource="data"  e-allowscrolling="true" e-editsettings-editmode=" mode" 
                                   e-allowsorting="true" e-allowfiltering="true" e-allowpaging="true" e-editsettings-allowadding="true" e-editsettings-allowdeleting="true" 
                                   e-editsettings-allowediting="true" e-editsettings-showconfirmdialog="false" e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools" 
                                   e-showcolumnchooser="false" e-allowtextwrap="true" e-filtersettings="myfilterSettings"
                                   >
                                  <div e-columns>
                                      <div e-column e-field="Id" e-headertext="Id" e-visible="false" e-isprimarykey="true" e-isfrozen="false" e-textalign="left"></div>                                
                                      <div e-column e-field="LastName" e-headertext="Last Name" e-isfrozen="false" e-textalign="left"></div>
                                      <div e-column e-field="FirstName" e-headertext="First Name"  e-isfrozen="false" e-textalign="left"></div>
                                      <div e-column e-field="Email" e-headertext="Email"  e-textalign="left"></div>
                                      <div e-column e-field="AddressLine1" e-headertext="Address Line 1"  e-textalign="left"></div>
                                      <div e-column e-field="AddressLine2" e-headertext="Address Line 2"  e-textalign="left"></div>
                                      <div e-column e-field="AddressLine3" e-headertext="Address Line 3"  e-textalign="left"></div>
                                      <div e-column e-field="PostCode" e-headertext="Post Code"  e-textalign="left"></div>
                                      <div e-column e-field="Phone" e-headertext="Phone"  e-textalign="left"></div>
                                      <div e-column e-field="Department" e-headertext="Department" e-textalign="left" e-edittype="dropdownedit" e-datasource="dataDept"></div>
                                      <div e-column e-field="Notes" e-headertext="Notes" e-width="100px" e-textalign=" left"></div>
                                  </div>
                          </div>


      <script>
          angular.module("GridCtrl", ["ejangular"])
              .controller("bodyCtrl", function ($scope) {

                  //Provide the datasource to the grid. Here the WebApiAdaptor is used.            
                  $scope.data = ej.DataManager({ url: "http://localhost:2088/api/DoctorsAPI", adaptor: "WebApiAdaptor" });


                  $scope.tools = ["add", "edit", "delete", "update", "cancel"];

                  $scope.mode = ej.Grid.EditMode.Dialog;
                  $scope.mysettings = { height: 450, width: "1000" };
                  $scope.myfilterSettings = { filterType: "excel", filterBarMode:"onEnter"};           
                  
                  $scope.dataDept = [{ text: "Cardiovascular", value: "1" }, { text: "Neurology", value: "2" }]; 
              });
      </script>



      Thanks
      Muyiwa.

      Madhu Sudhanan P [Syncfusion]
      Replied On February 26, 2015 11:46 AM UTC

      Hi Muyiwa,

      Please find the response.

      Query: “How to use ForeignKeyColumn binding in AngularJS and MVC?”

      The foreign key column can be defined in grid using the foreignKeyField and foreignKeyValue property. The foreignKeyField property defines the field name of the grid datasource which is used as foreignkey to another datasource and foreignKeyValue is the field in the foreign table.

      The foreign key column can be used in the grid as follows.

      <div ej-grid id="Grid>

              <div e-columns>

                  . . . . . . .. .

                  <div e-column e-field="Name" e-type="string" e-foreignkeyfield="text" e-foreignkeyvalue="value"

      e-datasource="dropdata" e-textalign="right"></div>

              </div>

          </div>

      <script>

          angular.module("GridCtrl", ["ejangular"])

              .controller("bodyCtrl", function ($scope) {

      . . . .

              $scope.dropdata = [{ text: "Janet", value: 2 }, { text: "Nancy", value: 9 }, { text: "Balram", value: 4 }, { text: "Maddy", value: 5 }, { text: "Indiana", value: 6 }, { text: "Api", value:7 }]

          });

      </script>

      Now while editing, the dropdownlist will be used while editing the foreign key column. For your kind information, please specify the type property of the column(e-type="string") to do the property casting between the foreignkey values.

      For your convenience, we have modified the previously provided sample with the above requirement and the same can be downloaded from the below location.

      Sample Location: http://www.syncfusion.com/downloads/support/directtrac/118071/Angular-ForeignKey1473075350.zip

      Please let us know if we misunderstood your requirement or if you require further assistance.

      Regards,

      Madhu Sudhanan. P



      Muyiwa
      Replied On February 27, 2015 02:00 AM UTC

      Many thanks for your quick response.

      I will let you know if there are any problems.

      Regards
      Muyiwa

      Madhu Sudhanan P [Syncfusion]
      Replied On February 27, 2015 11:32 AM UTC

      Hi Muyiwa,

      Thanks for your update.

      We will wait to hear from your. Please get back to us if you need further assistance. We will happy to assist you.

      Regards,

      Madhu Sudhanan. P



      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

      ;