Grid Toolbar with standard buttons and custom dropdown elements

[Joseph A Whelan]

Hi,

I have a grid with batch editing mode and a standard toolbar with Update option (Add, and Delete is not allowed). The grid has one of the column as "Status". The requirement is to be able to select the multiple rows and set the status (from among the values Ready, In-progress, Completed) from the toolbar option.

Can you please suggest how can I have a toolbar with standard buttons - Update, Cancel and also a button "Set Status", and when one Clicks on "Set Status for selected Rows", it should give an option to select one of the three options (Ready, In-progress, Completed) in a dropdown and set the value in "Status" column for the selected rows?

Thanks!

[Vikram Sundararajan]

Hi Tera P Keplinger,

Based on your requirement you would like to change the status column value of selected records when you change the dropdown in the toolbar. We have achieved your requirement using toolbar template with dropdown component. In change event to update the dropdown value using updateCell method. Please refer the below code snippet, sample, and API documentation for more information,

  [index.js]

 

var status=["Ready","In Progress","Completed"]

var selectedStatus = status[0];

 

function dataBound(){

    var dropDownListObject = new ej.dropdowns.DropDownList({

        dataSource: status,

        placeholder:"Select Status",

        change: function (e) {

            selectedStatus = e.value;

            var selectedIndexes = grid.getSelectedRowIndexes();

            if (selectedIndexes.length === 0) return;

                for (var i = 0; i < selectedIndexes.length; i++) {

                    var selectedIndex = selectedIndexes[i];

                    grid.updateCell(selectedIndex, "Status", selectedStatus);

                }

        },

        popupHeight :200

    });

    dropDownListObject.appendTo('#ddlelement');

}

 

Sample: https://stackblitz.com/edit/avxap2-eg3oxo?file=index.html,index.js

updateCell: https://ej2.syncfusion.com/documentation/api/grid#updatecell

Please get back to us, if you need any further assistance. 

Regards,

Vikram S

[Joseph A Whelan]

Hi Vikram,

Thank you for the suggested solution. This is working good for us except for one issue - I see multiple nested dropdown every time I click on update. I guess databound is invoked each time an update is made, and it appends new dropdown. 

The other thing I wanted to ask is - if there is a control/component in EJ2 library like self disappearing notification or banner. Once user selects the rows and picks the status value from the dropdown, we would like to show a notification that x number of rows were updated in the grid. We don't want it to be an alert which would require user to click "Ok" (or something else) each time. Just some sort of a notification that disappears in couple of seconds and mentions that "N number of rows were updated."

Thanks!

[Vikram Sundararajan]

Hi Tera P Keplinger,

I'm glad to inform you that the EJ2 library does indeed offer a toast component, which perfectly suits your requirement for a self-disappearing notification. To demonstrate this, we have created a sample based on your needs. When you click the "Update" button in the sample, the toast component will be displayed, notifying you of the number of rows that have been updated. The toast will automatically disappear after a short period. Please refer the below code snippet, sample and documentation for more information

[index.js]

 

document.getElementById('click').onclick=(e)=>{

   if(e.target.innerText==="Update"){

        grid.editModule.batchSave()

        var toast = new ej.notifications.Toast({

            content: changedRecords+' numbers of rows are updated',

            target: document.body,

            timeOut: 1000

        });

        toast.appendTo('#element');

        toast.show()

   }

   if(e.target.innerText==="Cancel"){

        grid.closeEdit();

    }  

 

}

Sample: https://stackblitz.com/edit/avxap2-cgztgv?file=index.html,index.js

Toast: https://ej2.syncfusion.com/javascript/documentation/toast/es5-getting-started

Please let us know if you need any further assistance.

Regards,

Vikram S

[Joseph A Whelan]

Thank you! This is what I was looking for.

[Suganya Gopinath]

We are glad that the provided solution helped to solve the issue.