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.

custom command column not working for gird in AngularJS

Thread ID:

Created:

Updated:

Platform:

Replies:

119611 Jul 14,2015 07:24 AM Jul 20,2015 08:11 AM JavaScript 9
loading
Tags: ejGrid
Gomtesh
Asked On July 14, 2015 07:24 AM

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 [Syncfusion]
Replied On July 15, 2015 08:03 AM

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
Replied On July 16, 2015 01:47 AM


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
Replied On July 16, 2015 01:57 AM

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 [Syncfusion]
Replied On July 17, 2015 05:07 AM

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

Gomtesh
Replied On July 17, 2015 05:40 AM

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
Replied On July 17, 2015 05:47 AM

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
Replied On July 17, 2015 06:33 AM

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
Replied On July 17, 2015 06:35 AM

Error caused while uploading image

Alan Sangeeth S [Syncfusion]
Replied On July 20, 2015 08:11 AM

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

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.

;