custom command column not working for gird in AngularJS

[Gomtesh]

I have used grid for performing edit delete operations on row but while editing i have passed call to API method after click on Save button but after save the save buton not not replace by Edit button
In browser console it shows error of
PUT http://localhost:63138/api/Group/GetGroupListByClientId 405 (Method Not Allowed)
parameters not passed with this call

           <div id="Grid" ej-grid e-datasource="group.data"  e-query="group.query" e-columns="group.columns" e-editsettings="group.edittsetings" e-allowsorting="group.allowsorting" e-sortsettings="group.sortsettings" e-editsettings="group.editsettings" e-actionbegin="group.actionBegin" e-enablerowhover="false" e-enableautosaveonselectionchange="false" ></div>


controller code is....

  var newColumns = [
       
                            { field: "Id", headerText: "ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75, visible: false },
   
                            { field: "Name", headerText: "Group Name", width: 90 },

                            {
                                headerText: "",
                                commands: [
                                    { type: ej.Grid.UnboundType.Edit, buttonOptions: { text: "Edit" } },
                                    { type: ej.Grid.UnboundType.Delete, buttonOptions: { text: "Delete" } },
                                    { type: ej.Grid.UnboundType.Save, buttonOptions: { text: "Save" } },
                                    { type: ej.Grid.UnboundType.Cancel, buttonOptions: { text: "Cancel" } }
                                ],
                                isUnbound: true, width: 130, textAlign: ej.TextAlign.Right
                            }
        ];


    this.columns = newColumns;
   
   this.data = ej.DataManager({ url: "http://localhost:63138/api/Group/GetGroupListByClientId", adaptor: "WebApiAdaptor" });

   this.query = new ej.Query().addParams('clientId', '1').addParams('accessId', '1');








 this.actionBegin = function (args) {

        if (args.requestType == "beginedit") {
         
        }

        if (args.requestType == "endedit") {
            args.Cancel = true;
        }

        if (args.requestType == "save") {

            console.log(args.selectedRow)          
            console.log(args.data)                      
            console.log(args.model.currentViewData[args.selectedRow]);

            var group = {};
            group.Id = args.data.Id;
            group.Name = args.data.Name;
            group.ClientId = 1;

            var d = GroupService.editGroup(group);

            d.then(function (data) {
                toastr.options = { "positionClass": "toast-bottom-right" }
                toastr.success('Group edited successfully', 'Success');
                console.log("success");
            }, function (error) {
                console.log("error");
            });

         
        }

        if (args.requestType == "delete") {

          alert("Delete")
        }
    }




API method is....

 public void EditGroup(GroupDTO GroupDTO)
        {        
                GroupService.Edit(GroupDTO);          
        }

 public object GetGroupListByClientId(string accessId, string clientId)
        {
            var queryString = HttpContext.Current.Request.QueryString;
            string access = queryString["accessId"];
            int ClientId =Convert.ToInt32(queryString["clientId"]);        

             return new { result = GroupService.GetGroupListByClientId(ClientId) };             
         }

[Alan Sangeeth S]

Hi Gomtesh,

Thanks for using Syncfusion Products.

In WebApi Controller, there are default HTTP methods (PUT, POST, and DELETE) which we have mapped to corresponding Grid CRUD operation using WebApiAdaptor.

In our current implementation architecture, on updating an existing record in Grid we would send PUT request to WebApi with a single parameter object that contains edited record. We suspect that you have WebApi PUT method paremeter as wrong type or with multiple parameters and so you got the 405 error.

From your code snippets we also found that have tried to prevent default PUT request in Grid “actionBegin” event with a condition of argument requestType as “endedit”. The condition that you have given is not a correct one and it must be requestType as “save” to cancel default server-side save operation. So server-side put request was not cancelled and you got 405 error. Please refer the following code snippets.

  this.actionBegin = function (args) {

        if (args.requestType == "endedit") { //it must be args.requestType == “save” if you intend to prevent default server-side save operation

            args.Cancel = true;

        }

Also we found that you called another method “EditGroup” in WebApi for save operation. And in “EditGroup” WebApi method you have just simply called another method and passed the edited record.

In WebApi PUT method also you can call another method with edited record. So we suggest you to use the default PUT method in WebApi for save operation.

For your convenience we have created a sample and the same can be downloaded from below link.
Sample: http://www.syncfusion.com/downloads/support/forum/119611/ze/ServerOperations-1139860688

If you do not want to use the PUT method in WebApi, then please get back to us with more information so that we could provide you a response as early as possible.

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S

[Gomtesh]

I have changed the WebApi  method as per your suggestions

 [HttpPut]
        public void GetGroupListByClientId(GroupDTO GroupDTO)
        {
        }


but it is not allow to give name like
       public void Put(GroupDTO GroupDTO)
       {
         ....
        }

Also If I use Same name for all methods with changing appropriate Http calls such as [HttpPut], [HttpDelete] and [HttpDelete] then calls going to correct API methods but changes are not reflecting in view because i have to give alert messages after successfully edit, delete ad update operations to user


Changed Code is....

controller code

function GroupController(GroupService, $route, $location, $window, $state) {

   var newColumns = [
                            { field: "Id", headerText: "ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75, visible: false },

                            { field: "ClientID", headerText: "ClientID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75, visible: false },

                            { field: "Name", headerText: "Group Name", width: 90 },                          

                            {
                                headerText: "",
                                commands: [
                                    { type: ej.Grid.UnboundType.Edit, buttonOptions: { text: "Edit" } },
                                    { type: ej.Grid.UnboundType.Delete, buttonOptions: { text: "Delete" } },
                                    { type: ej.Grid.UnboundType.Save, buttonOptions: { text: "Save" } },
                                    { type: ej.Grid.UnboundType.Cancel, buttonOptions: { text: "Cancel" } }
                                ],
                                isUnbound: true, width: 130, textAlign: ej.TextAlign.Right
                            }
    ];

    this.columns = newColumns;



  this.data = ej.DataManager({ url: "http://localhost:63138/api/Group/GetGroupListByClientId", adaptor: "WebApiAdaptor" }),

  this.query = new ej.Query().addParams('clientId', '1').addParams('accessId', '1');

   this.edittsetings = { allowEditing: true, allowAdding: true, allowDeleting: true, allowEditOnDblClick: false };

    this.allowsorting = { allowSorting: false };

    this.sortsettings = { sortedColumns: [{ field: "Name", direction: ej.sortOrder.Ascending }] }



 this.complete = function (args) {

        if (args.requestType == "save") {

            alert(JSON.stringify(args))
            console.log("success");
            args.Cancel = true;
        }
    }
}

In above code success also not printing in console...


And Another functionality i have to do is I have to add record in grid by giving separate button and after adding record successfully i have to give alert message to user

[Gomtesh]

Using above code call going to API method operations performed successfully but in view save but remains as it is it not changed as edit and delete buttons
and in console error is given as

Uncaught TypeError: Cannot read property 'record' of undefined

[Ragavee U S]

Hi Gomtesh,

Thanks for your update.

We have analyzed the reported query and based on it, we need few information from your end.

1.       Could you please share the controller code corresponding to the Update operation in grid?

2.       Could you also please share your script code if you have customized the save action externally.

3.       Also, please share the call stack, screenshot/video of the exception/error obtained.

The above provided details will be very helpful for us to analyze and assist you accordingly.

Please get back to us if you need any further assistance.
Regards,
Ragavee U S

---

GO Gomtesh July 17, 2015 09:40 AM UTC

I have send all code..

I have done following code in API

for update operation::

   [HttpPut]
        public void GetGroupListByClientId(GroupDTO GroupDTO)
        {   
                GroupService.Edit(GroupDTO);
         }

For Delete operation::::

  [HttpDelete]
        public bool GetGroupListByClientId(int Id)
        {
               return GroupService.Delete(Id);
        }

   [HttpGet]
        public object GetGroupListByClientId(string accessId, string clientId)
        {
            var queryString = HttpContext.Current.Request.QueryString;
            string access = queryString["accessId"];
            int ClientId = Convert.ToInt32(queryString["clientId"]);
            return new { result = GroupService.GetGroupListByClientId(ClientId) };
        }



HTML code for grid

<div ng-controller="GroupController as group">

            <div id="Grid" ej-grid e-datasource="group.data" e-query="group.query" e-columns="group.columns" e-editsettings="group.edittsetings"                          e-allowsorting="group.allowsorting"   e-sortsettings="group.sortsettings" e-editsettings="group.editsettings" e-actioncomplete="group.complete" e-enablerowhover="false" e-enableautosaveonselectionchange="false"></div>         

</div>


function GroupController(GroupService, $route, $location, $http) {


 var newColumns = [
                            { field: "Id", headerText: "ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75, visible: false },

                            { field: "ClientID", headerText: "ClientID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75, visible: false },

                            { field: "Name", headerText: "Group Name", width: 90 },

                            {
                                headerText: "",
                                commands: [
                                    { type: ej.Grid.UnboundType.Edit, buttonOptions: { text: "Edit" } },
                                    { type: ej.Grid.UnboundType.Delete, buttonOptions: { text: "Delete" } },
                                    { type: ej.Grid.UnboundType.Save, buttonOptions: { text: "Save" } },
                                    { type: ej.Grid.UnboundType.Cancel, buttonOptions: { text: "Cancel" } }
                                ],
                                isUnbound: true, width: 130, textAlign: ej.TextAlign.Right
                            }
    ];

    this.columns = newColumns;

    this.data = ej.DataManager({ url: "http://localhost:63138/api/Group/GetGroupListByClientId", adaptor: "WebApiAdaptor" }),

    this.query = new ej.Query().addParams('clientId', '1').addParams('accessId', '1');

    this.edittsetings = { allowEditing: true, allowAdding: true, allowDeleting: true, allowEditOnDblClick: false };
 this.complete = function (args) {

        if (args.requestType == "save") {
            alert(JSON.stringify(args))
            console.log("success");
        }

        console.log(args);

        if (args.requestType == "delete") {
            //alert(JSON.stringify(args))
            // console.log(args)
            toastr.options = { "positionClass": "toast-bottom-right" }
            toastr.success('Success', 'Group deleted successfully!')
        }
    }
}


Using above all code i have done add and delete operations but for update operation call is going  to API for update operation but changes not reflected to view because after click on edit button it become save button  but after click on save button it is not seen again back edit button it give error like

Uncaught TypeError: Cannot read property 'record' of undefined(anonymous function) @ ej.web.all.min.js:10n.Callbacks.j @ jquery-2.1.1.min.js:2n.Callbacks.k.fireWith @ jquery-2.1.1.min.js:2x @ jquery-2.1.1.min.js:4n.ajaxTransport.k.cors.a.crossDomain.send.b @ jquery-2.1.1.min.js:4

---

GO Gomtesh replied to Gomtesh Hatgine July 17, 2015 09:47 AM UTC

I have send all code..

I have done following code in API

for update operation::

   [HttpPut]
        public void GetGroupListByClientId(GroupDTO GroupDTO)
        {   
                GroupService.Edit(GroupDTO);
         }

For Delete operation::::

  [HttpDelete]
        public bool GetGroupListByClientId(int Id)
        {
               return GroupService.Delete(Id);
        }

   [HttpGet]
        public object GetGroupListByClientId(string accessId, string clientId)
        {
            var queryString = HttpContext.Current.Request.QueryString;
            string access = queryString["accessId"];
            int ClientId = Convert.ToInt32(queryString["clientId"]);
            return new { result = GroupService.GetGroupListByClientId(ClientId) };
        }



HTML code for grid

<div ng-controller="GroupController as group">

            <div id="Grid" ej-grid e-datasource="group.data" e-query="group.query" e-columns="group.columns" e-editsettings="group.edittsetings"                          e-allowsorting="group.allowsorting"   e-sortsettings="group.sortsettings" e-editsettings="group.editsettings" e-actioncomplete="group.complete" e-enablerowhover="false" e-enableautosaveonselectionchange="false"></div>         

</div>


function GroupController(GroupService, $route, $location, $http) {


 var newColumns = [
                            { field: "Id", headerText: "ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75, visible: false },

                            { field: "ClientID", headerText: "ClientID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75, visible: false },

                            { field: "Name", headerText: "Group Name", width: 90 },

                            {
                                headerText: "",
                                commands: [
                                    { type: ej.Grid.UnboundType.Edit, buttonOptions: { text: "Edit" } },
                                    { type: ej.Grid.UnboundType.Delete, buttonOptions: { text: "Delete" } },
                                    { type: ej.Grid.UnboundType.Save, buttonOptions: { text: "Save" } },
                                    { type: ej.Grid.UnboundType.Cancel, buttonOptions: { text: "Cancel" } }
                                ],
                                isUnbound: true, width: 130, textAlign: ej.TextAlign.Right
                            }
    ];

    this.columns = newColumns;

    this.data = ej.DataManager({ url: "http://localhost:63138/api/Group/GetGroupListByClientId", adaptor: "WebApiAdaptor" }),

    this.query = new ej.Query().addParams('clientId', '1').addParams('accessId', '1');

    this.edittsetings = { allowEditing: true, allowAdding: true, allowDeleting: true, allowEditOnDblClick: false };
 this.complete = function (args) {

        if (args.requestType == "save") {
            alert(JSON.stringify(args))
            console.log("success");
        }

        console.log(args);

        if (args.requestType == "delete") {
            //alert(JSON.stringify(args))
            // console.log(args)
            toastr.options = { "positionClass": "toast-bottom-right" }
            toastr.success('Success', 'Group deleted successfully!')
        }
    }
}


Using above all code i have done add and delete operations but for update operation call is going  to API for update operation but changes not reflected to view because after click on edit button it become save button  but after click on save button it is not seen again back edit button it give error like

Uncaught TypeError: Cannot read property 'record' of undefined(anonymous function) @ ej.web.all.min.js:10n.Callbacks.j @ jquery-2.1.1.min.js:2n.Callbacks.k.fireWith @ jquery-2.1.1.min.js:2x @ jquery-2.1.1.min.js:4n.ajaxTransport.k.cors.a.crossDomain.send.b @ jquery-2.1.1.min.js:4

Functionality i have to do just given in following link
 
http://js.syncfusion.com/demos/web/#!/azure/grid/editing/commandcolumn

but add delete and update operation  and impotent thing is i have to give alert message to user if successfully done update, delete and add operations
i.e that if successfully updated or deleted then i have to give alert message

---

GO Gomtesh July 17, 2015 10:33 AM UTC

I sending screenshot of error

when i click on save button its state not changed to edit an delete button
it is remains as save button

---

GO Gomtesh July 17, 2015 10:35 AM UTC

Error caused while uploading image

---

AS Alan Sangeeth S Syncfusion Team July 20, 2015 12:11 PM UTC

Hi Gomtesh,

Thanks for the update.

We are able to reproduce the issue “Script error throws while updating record in WebAPI” in earlier Essential Studio Product version such as in 13.1.0.21 and 13.1.0.26 and we suspect that you are using one of these earlier versions.

This issue has been fixed in our latest version 13.2.0.29 and it can be downloaded from below link.
http://www.syncfusion.com/forums/119549/essential-studio-2015-volume-2-final-release-v13-2-0-29-available-for-download

We can also resolve the issue using a workaround in which we need to return a data as object in WebApi PUT request handler. Please refer the following code snippets.

[HttpPut]

        public object GetGroupListByClientId(EmployeePhoto employee)

        {
…
return new { record = employee }; // Need to return data as an object with record property

        }

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S

[Gomtesh]

I have send all code..

I have done following code in API

for update operation::

   [HttpPut]
        public void GetGroupListByClientId(GroupDTO GroupDTO)
        {   
                GroupService.Edit(GroupDTO);
         }

For Delete operation::::

  [HttpDelete]
        public bool GetGroupListByClientId(int Id)
        {
               return GroupService.Delete(Id);
        }

   [HttpGet]
        public object GetGroupListByClientId(string accessId, string clientId)
        {
            var queryString = HttpContext.Current.Request.QueryString;
            string access = queryString["accessId"];
            int ClientId = Convert.ToInt32(queryString["clientId"]);
            return new { result = GroupService.GetGroupListByClientId(ClientId) };
        }



HTML code for grid

<div ng-controller="GroupController as group">

            <div id="Grid" ej-grid e-datasource="group.data" e-query="group.query" e-columns="group.columns" e-editsettings="group.edittsetings"                          e-allowsorting="group.allowsorting"   e-sortsettings="group.sortsettings" e-editsettings="group.editsettings" e-actioncomplete="group.complete" e-enablerowhover="false" e-enableautosaveonselectionchange="false"></div>         

</div>


function GroupController(GroupService, $route, $location, $http) {


 var newColumns = [
                            { field: "Id", headerText: "ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75, visible: false },

                            { field: "ClientID", headerText: "ClientID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75, visible: false },

                            { field: "Name", headerText: "Group Name", width: 90 },

                            {
                                headerText: "",
                                commands: [
                                    { type: ej.Grid.UnboundType.Edit, buttonOptions: { text: "Edit" } },
                                    { type: ej.Grid.UnboundType.Delete, buttonOptions: { text: "Delete" } },
                                    { type: ej.Grid.UnboundType.Save, buttonOptions: { text: "Save" } },
                                    { type: ej.Grid.UnboundType.Cancel, buttonOptions: { text: "Cancel" } }
                                ],
                                isUnbound: true, width: 130, textAlign: ej.TextAlign.Right
                            }
    ];

    this.columns = newColumns;

    this.data = ej.DataManager({ url: "http://localhost:63138/api/Group/GetGroupListByClientId", adaptor: "WebApiAdaptor" }),

    this.query = new ej.Query().addParams('clientId', '1').addParams('accessId', '1');

    this.edittsetings = { allowEditing: true, allowAdding: true, allowDeleting: true, allowEditOnDblClick: false };
 this.complete = function (args) {

        if (args.requestType == "save") {
            alert(JSON.stringify(args))
            console.log("success");
        }

        console.log(args);

        if (args.requestType == "delete") {
            //alert(JSON.stringify(args))
            // console.log(args)
            toastr.options = { "positionClass": "toast-bottom-right" }
            toastr.success('Success', 'Group deleted successfully!')
        }
    }
}


Using above all code i have done add and delete operations but for update operation call is going  to API for update operation but changes not reflected to view because after click on edit button it become save button  but after click on save button it is not seen again back edit button it give error like

Uncaught TypeError: Cannot read property 'record' of undefined(anonymous function) @ ej.web.all.min.js:10n.Callbacks.j @ jquery-2.1.1.min.js:2n.Callbacks.k.fireWith @ jquery-2.1.1.min.js:2x @ jquery-2.1.1.min.js:4n.ajaxTransport.k.cors.a.crossDomain.send.b @ jquery-2.1.1.min.js:4

[Gomtesh]

I have send all code..

I have done following code in API

for update operation::

   [HttpPut]
        public void GetGroupListByClientId(GroupDTO GroupDTO)
        {   
                GroupService.Edit(GroupDTO);
         }

For Delete operation::::

  [HttpDelete]
        public bool GetGroupListByClientId(int Id)
        {
               return GroupService.Delete(Id);
        }

   [HttpGet]
        public object GetGroupListByClientId(string accessId, string clientId)
        {
            var queryString = HttpContext.Current.Request.QueryString;
            string access = queryString["accessId"];
            int ClientId = Convert.ToInt32(queryString["clientId"]);
            return new { result = GroupService.GetGroupListByClientId(ClientId) };
        }



HTML code for grid

<div ng-controller="GroupController as group">

            <div id="Grid" ej-grid e-datasource="group.data" e-query="group.query" e-columns="group.columns" e-editsettings="group.edittsetings"                          e-allowsorting="group.allowsorting"   e-sortsettings="group.sortsettings" e-editsettings="group.editsettings" e-actioncomplete="group.complete" e-enablerowhover="false" e-enableautosaveonselectionchange="false"></div>         

</div>


function GroupController(GroupService, $route, $location, $http) {


 var newColumns = [
                            { field: "Id", headerText: "ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75, visible: false },

                            { field: "ClientID", headerText: "ClientID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75, visible: false },

                            { field: "Name", headerText: "Group Name", width: 90 },

                            {
                                headerText: "",
                                commands: [
                                    { type: ej.Grid.UnboundType.Edit, buttonOptions: { text: "Edit" } },
                                    { type: ej.Grid.UnboundType.Delete, buttonOptions: { text: "Delete" } },
                                    { type: ej.Grid.UnboundType.Save, buttonOptions: { text: "Save" } },
                                    { type: ej.Grid.UnboundType.Cancel, buttonOptions: { text: "Cancel" } }
                                ],
                                isUnbound: true, width: 130, textAlign: ej.TextAlign.Right
                            }
    ];

    this.columns = newColumns;

    this.data = ej.DataManager({ url: "http://localhost:63138/api/Group/GetGroupListByClientId", adaptor: "WebApiAdaptor" }),

    this.query = new ej.Query().addParams('clientId', '1').addParams('accessId', '1');

    this.edittsetings = { allowEditing: true, allowAdding: true, allowDeleting: true, allowEditOnDblClick: false };
 this.complete = function (args) {

        if (args.requestType == "save") {
            alert(JSON.stringify(args))
            console.log("success");
        }

        console.log(args);

        if (args.requestType == "delete") {
            //alert(JSON.stringify(args))
            // console.log(args)
            toastr.options = { "positionClass": "toast-bottom-right" }
            toastr.success('Success', 'Group deleted successfully!')
        }
    }
}


Using above all code i have done add and delete operations but for update operation call is going  to API for update operation but changes not reflected to view because after click on edit button it become save button  but after click on save button it is not seen again back edit button it give error like

Uncaught TypeError: Cannot read property 'record' of undefined(anonymous function) @ ej.web.all.min.js:10n.Callbacks.j @ jquery-2.1.1.min.js:2n.Callbacks.k.fireWith @ jquery-2.1.1.min.js:2x @ jquery-2.1.1.min.js:4n.ajaxTransport.k.cors.a.crossDomain.send.b @ jquery-2.1.1.min.js:4

Functionality i have to do just given in following link
 
http://js.syncfusion.com/demos/web/#!/azure/grid/editing/commandcolumn

but add delete and update operation  and impotent thing is i have to give alert message to user if successfully done update, delete and add operations
i.e that if successfully updated or deleted then i have to give alert message

[Gomtesh]

I sending screenshot of error

when i click on save button its state not changed to edit an delete button
it is remains as save button

[Gomtesh]

Error caused while uploading image

[Alan Sangeeth S]

Hi Gomtesh,

Thanks for the update.

We are able to reproduce the issue “Script error throws while updating record in WebAPI” in earlier Essential Studio Product version such as in 13.1.0.21 and 13.1.0.26 and we suspect that you are using one of these earlier versions.

This issue has been fixed in our latest version 13.2.0.29 and it can be downloaded from below link.
http://www.syncfusion.com/forums/119549/essential-studio-2015-volume-2-final-release-v13-2-0-29-available-for-download

We can also resolve the issue using a workaround in which we need to return a data as object in WebApi PUT request handler. Please refer the following code snippets.

[HttpPut]

        public object GetGroupListByClientId(EmployeePhoto employee)

        {
…
return new { record = employee }; // Need to return data as an object with record property

        }

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S