Editable grid powered by AngularJS, Javascript and MVC

MS Madhu Sudhanan P Syncfusion Team 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>

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

MU Muyiwa 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

MS Madhu Sudhanan P Syncfusion Team 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.

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

MU Muyiwa 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

MU Muyiwa 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>

@*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>

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>

AS Alan Sangeeth S Syncfusion Team 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>

$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

MU Muyiwa 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

MS Madhu Sudhanan P Syncfusion Team 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

MU Muyiwa 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-column e-field="Department" e-headertext="Department" e-textalign="left" e-edittype="dropdownedit" e-datasource="dataDept"></div>

</div>

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.

MS Madhu Sudhanan P Syncfusion Team 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 e-column e-field="Name" e-type="string" e-foreignkeyfield="text" e-foreignkeyvalue="value"

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

</div>

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

MU Muyiwa 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

MS Madhu Sudhanan P Syncfusion Team 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

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

Enterprise Solutions

Free Products

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

Learning

Resources

Support

Editable grid powered by AngularJS, Javascript and MVC