1

I have a DevExtreme grid that has an edit pop up. Currently everything is working and it has the edit button in the last column. I want to get rid of that column and instead have a link on the object name that you click to open the edit form. I have found where you can customize the buttons, but I don't know how I would get the data in there to create a link on the object name https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/Columns/Column_Types/Command_Columns/#Customize_the_Edit_Column.

I also tried to use a click event on a normal column (using a column template), and had a viewChild to the datagrid, but I couldn't figure out any way to make that open the edit form.

I am using Angular 9 in the project.

dmoore1181
  • 1,793
  • 1
  • 25
  • 57

1 Answers1

0

Here is documentation: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/buttons/.

Command Column Customization demos: https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CommandColumnCustomization/Angular/Light/

Construction looks like:

            ["edit", "delete", {
                hint: "Clone",
                icon: "repeat",
                visible: function(e) {
                    return !e.row.isEditing && !isChief(e.row.data.Position);
                },
                onClick: function(e) {
                    var clonedItem = $.extend({}, e.row.data, { ID: ++maxID });

                    employees.splice(e.row.rowIndex, 0, clonedItem);
                    e.component.refresh(true);
                    e.event.preventDefault();
                }
            }]

You can use onClick event to assign function or use template to create your own component.

Template example: https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/buttons/#template

nobody.price
  • 221
  • 1
  • 14
  • Unfortunately this doesn't answer my question at all. I am able to get an edit button, but if I don't have access to the data to change the text that is displayed to be based on the row data. I can add a template which will give me access to the row data, but then I don't have a way that I know of to open the edit pop up from that template. – dmoore1181 Mar 02 '21 at 16:59
  • You can get row id from button event. Then you can update datasource data based on id and update datagrid. – nobody.price Mar 03 '21 at 13:13