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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Try Essential JS 2

Total item does not update after deleting a row!

Thread ID:

Created:

Updated:

Platform:

Replies:

147795 Sep 24,2019 01:19 PM UTC Oct 10,2019 12:20 PM UTC jQuery 9
loading
Tags: ejGrid
Toan
Asked On September 24, 2019 01:19 PM UTC

Hi,

I tried to delete several rows and realized that the grid did not update the number of total items!! 
Could you check again about that issue?

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On September 25, 2019 11:31 AM UTC

Hi Toan, 

Thanks for using Syncfusion products. 

Query#:- I tried to delete several rows and realized that the grid did not update the number of total items!! 
 
We have checked your reported problem by preparing sample but we are unable to reproduce your reported problem at our end. Refer to the sample Link:- 

Refer to the screenshot before deletion:- 
 

After deletion:- 

 

We need some more additional details to find the cause of the issue. Share us the following details. 

  1. Complete Grid code example.
  2. Exact scenario you have faced the issue.
  3. Screenshot/ Video Demo regarding the issue.
  4. If possible replicate the issue in the above sample and revert us back.
  5. Product version details.

Regards, 
Farveen sulthana T 


Toan
Replied On September 25, 2019 12:18 PM UTC

Hi,
Thanks for your response.

Please follow my implementation as below:

#In .html file:

 

#In .js file:

lockerInGroupData = ej.DataManager({
        url: "/api/LockerAPI/GetAllLocker/?Level=" + level + "&ControllerIMEI=" + controllerdeviceimei + "&GroupLocker=" + group + "&Page=" + cPageLocker,
        adaptor: new ej.WebApiAdaptor(),
        offline: true,
    });

    lockerInGroupData.ready.done(e => {
        if (e.result != null) {
            $("#DvAllLockerInGroup").ejGrid({
                dataSource: ej.DataManager({
                    json: e.result.locker,
                    adaptor: new ej.remoteSaveAdaptor(),
                    crudUrl: "CrudLevelInGroupAction",
                }),
                allowPaging: true,
                pageSettings: { pageSize: 25 },
                locale: "vi-VN",
                editSettings: {
                    allowDeleting: true,
                    showDeleteConfirmDialog: true,
                },
                columns: [
                    { field: "locker.lockerId", visible: false, isPrimaryKey: true, isIdentity: true },
                    { field: "locker.createdAt", visible: false },
                    { field: "locker.createdBy", visible: false },
                    { field: "locker.updatedAt", visible: false },
                    { field: "locker.updatedBy", visible: false },
                    { field: "controller.level", headerText: "Tầng", width: 60, textAlign: "center", headerTextAlign: "center" },
                    { field: "locker.label", headerText: "Nhãn", width: 70, textAlign: "center", headerTextAlign: "center" },
                    { field: "locker.position", headerText: "Mô tả vị trí", textAlign: "center", headerTextAlign: "center" },
                    { field: "locker.controllerDeviceImei", headerText: "Thiết bị điều khiển", textAlign: "center", headerTextAlign: "center" },
                    {
                        commands: [
                            { type: "delete", buttonOptions: { text: "" } },
                        ],
                        headerTextAlign: "center",
                        textAlign: "center",
                        width: 50,
                    }
                ],
            });
        }
    });

The result of DataManager could be downloaded here: https://drive.google.com/file/d/1fsGhB46q-Atv9hVPx3mBc5BnbkYhZmgv/view?usp=sharing
The attached file for the result also was added


p/s: I captured some images (the different table but they are the same in the implementation) 
P1: before delete (total item equal 9)



after the first row has been deleted 



Regards,
Toan




Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On September 26, 2019 12:50 PM UTC

Hi Toan, 

Thanks for your update. 

We have prepared sample as per your code example but we are unable to reproduce your problem at our end. Refer to the sample Link:- 

We need some more additional details to find the cause of the issue. Share us the following details. 

  1. Share us the server side code example.
  2. Share us the screenshot of the Network Tab while performing delete operation.
  3. If possible replicate the issue in the above sample and revert us back.

Regards, 
Farveen sulthana T 


Toan
Replied On September 27, 2019 08:43 AM UTC

Hi,

Please follow full an implementation of a table in my site:

# In the server site: 

+ API section
      [HttpGet("[action]")]
public IEnumerable<ControllerDevice> GetAllControllerDevice(int Level)
{
return this._context.ControllerDevices.Where(p => Level == 0 ? true : p.Level == Level);
}
 
+ CRUD action

[HttpPost]
public async Task<IActionResult> CrudControllerAction([FromBody]CRUDViewModel<ControllerDevice> CAction)
{
switch (CAction.action)
{
case "update":
await this.EditControllerDevice(CAction.value);
break;
case "remove":
await this.RemoveControllerDevice(CAction.key);
break;
default:
break;
}
return View(nameof(AddNewControllerDevice));
}

private async Task RemoveControllerDevice(object key)
{
var removingCtrlDevice = this._context.ControllerDevices.Where(p => p.ControllerDeviceId.ToString() == key.ToString()).FirstOrDefault();
if (removingCtrlDevice != null)
{
this._context.ControllerDevices.Remove(removingCtrlDevice);
await this._context.SaveChangesAsync();
}
}



+ Model section:
1)
    public class ControllerDevice : AuditInfo
    {
        [DatabaseGenerated(DatabaseGeneratedOption.Identity), Key]
        public int ControllerDeviceId { get; set; }
        [StringLength(maximumLength: 128)]
        public string IMEI { get; set; }
        public int Level { get; set; }
public int? Zone { get; set; }
        [StringLength(maximumLength: 256)]
        public string Description { get; set; }
       
    }

2)
    public class AuditInfo
    {
        public DateTime? CreatedAt { get; set; }
        public DateTime? UpdatedAt { get; set; }
        [StringLength(maximumLength: 128)]
        public string CreatedBy { get; set; }
        [StringLength(maximumLength: 128)]
        public string UpdatedBy { get; set; }
    }

3)
public class CRUDViewModel<T> where T: class
{
public string action { get; set; }
public object key { get; set; }
public string antiForgery { get; set; }
public T value { get; set; }
public List<T> Added { get; set; }

public List<T> Changed { get; set; }

public List<T> Deleted { get; set; }
}


+ Serialized data:
[{"controllerDeviceId":7,"imei":"869033029500031","level":2,"zone":null,"description":"Cụm tủ 1, phòng ban tài chính quản lý","createdAt":"2019-09-11T15:15:11.1491207","updatedAt":null,"createdBy":"toannm","updatedBy":null},{"controllerDeviceId":8,"imei":"309100073247344","level":2,"zone":null,"description":"Cụm tủ 2, phòng ban  tài chính quản lý","createdAt":"2019-09-11T15:15:54.2114776","updatedAt":null,"createdBy":"toannm","updatedBy":null},{"controllerDeviceId":9,"imei":"917093035311098","level":3,"zone":null,"description":"Cụm tủ 5, phòng vật tư quản lý","createdAt":"2019-09-11T15:16:18.2574173","updatedAt":null,"createdBy":"toannm","updatedBy":null},{"controllerDeviceId":10,"imei":"861405127980570","level":3,"zone":null,"description":"Cụm tủ 7, phòng kỹ thuật quản lý","createdAt":"2019-09-11T15:16:35.5731869","updatedAt":null,"createdBy":"toannm","updatedBy":null},{"controllerDeviceId":11,"imei":"66f7476ab8854405","level":3,"zone":null,"description":"Cụm tủ 6, Phòng ban test thiết bị quản lý","createdAt":"2019-09-11T16:34:43.1048309","updatedAt":null,"createdBy":"toannm","updatedBy":null},{"controllerDeviceId":12,"imei":"8c846d11beab7281","level":3,"zone":null,"description":"Cụm tủ 1, phòng ban test","createdAt":"2019-09-11T10:22:05","updatedAt":"2019-09-11T17:24:05.6372802","createdBy":"toannm","updatedBy":"toannm"},{"controllerDeviceId":14,"imei":"359411082849700","level":1,"zone":null,"description":"Cụm Test","createdAt":"2019-09-25T01:09:11.8347213","updatedAt":null,"createdBy":"toannm","updatedBy":null},{"controllerDeviceId":15,"imei":"d8dde00bb75e0a08","level":23,"zone":null,"description":"Tầng 3, Zone 2","createdAt":"2019-09-26T07:42:45","updatedAt":"2019-09-26T14:45:22.7609674","createdBy":"toannm","updatedBy":"toannm"}]


# In .html file

<div id="DvTotalLevel">
</div>

# In .js file:

var controllerData = ej.DataManager({
        url: "/api/LockerAPI/GetAllControllerDevice",
        adaptor: new ej.WebApiAdaptor(),
        offline: true,
    });

    controllerData.ready.done(function (e) {
        $("#DvTotalLevel").ejGrid({
            dataSource: ej.DataManager({
                json: e.result,
                adaptor: new ej.remoteSaveAdaptor(),
                crudUrl: "CrudControllerAction",
            }),
            allowPaging: true,
            pageSettings: { pageSize: 10, pageSizeList: [10, 15, 20, 25] },
            allowResizing: true,
            isResponsive: true,
            enableResponsiveRow: true,
            allowResizeToFit: true,
            locale: "vi-VN",
            editSettings: {
                allowEditing: true,
                allowDeleting: true,
                showDeleteConfirmDialog: true,
            },
            columns: [
                { field: "controllerDeviceId", visible: false, isPrimaryKey: true, isIdentity: true },
                { field: "createdAt", visible: false },
                { field: "createdBy", visible: false },
                { field: "updatedAt", visible: false },
                { field: "updatedBy", visible: false },
                { field: "level", headerText: "Tầng", width: 100 },
                { field: "imei", headerText: "Mã định danh" },
                { field: "zone", headerText: "Khu vực" },
                { field: "description", headerText: "Mô tả" },
                {
                    headerText: "Tiện ích",
                    commands: [
                        { type: "delete", buttonOptions: { text: "<i class='far fa-trash-alt'></i>" } },
                    ],
                    headerTextAlign: "center",
                    textAlign: "center",
                    width: 100,
                }
            ]
        });
    });


# Screenshot before the deletion



After the deletion:



Regards,
Toan

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On September 30, 2019 03:47 PM UTC

Hi Toan, 

We have created new incident under your account. Please on to that and contact us for better assistance  

Kindly sign into the account for further assistance regarding your queries. 

Regards, 
Farveen sulthana T 



Toan
Replied On October 8, 2019 10:55 AM UTC

Hi,

Sorry for this inconvenience

I am a little bit busy this week.
I tried by adding the toolbar action utility like you used to. It seems to works, the total item also updated after the deletion. But, with my custom delete button for each row,

                {

                    headerText: "Tiện ích",
                    commands: [
                        { type: "delete", buttonOptions: { text: "<i class='far fa-trash-alt'></i>" } },
                    ],
                    headerTextAlign: "center",
                    textAlign: "center",
                    width: 100,
                }
The delete operation is incorrect.

Moreover, When I use my delete button, If I delete the rows from top to bottom, The CrudAction will send to the server the same identity key for all rows. That means, If I delete 10 rows from the first to tenth position, The client only sends the "remove" action with the identity key of the first row.

Thanks,
Toan

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On October 9, 2019 01:32 PM UTC

Hi Toan,

As per previous update, we are unable to reproduce your reported problem at our end by using delete button placed as custom button. Refer to the sample Link:-


Refer to the screenshot:-


Also we have created the new Ticket for this query and  look into your issue further.

Kindly sign in to your account for further queries.

Regards,
Farveen sulthana T 


Toan
Replied On October 9, 2019 06:33 PM UTC

Hi,

Thanks for your reply,

I recorded a short video to describe the deletion step by step
Please see the youtube link below for more information!

Best regards,
Toan

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On October 10, 2019 12:20 PM UTC

Hi Toan,

Sorry for the inconvenience caused.

We are unable to reproduce your reported problem at our end. We need to ensure the following scenarios from your end.

  1. Please confirm that normal deleting through delete icon from toolbar working at your end?
  2. Does the dataSource GetAllControllerDevice has been called again after performing delete action at server end?
  3. If possible replicate the issue in the above sample and revert us back.
Also we have created the new Ticket for this query and  look into your issue further to resolve your problem.

Kindly sign in to your account and contact us for further queries.

Regards,
Farveen sulthana T


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon