Current filter:
                                You should refresh the page.
                                  • Hi,

                                    I‍'m settings my grid columns from code:

                                    <dx-data-grid #mainGrid id="gridContainer"
                                                  [remoteOperations]="true"
                                                  [showBorders]="false"
                                                  [columnAutoWidth]="true"
                                                  [allowColumnReordering]="true"
                                                  [columnHidingEnabled]="true"
                                                  [columns]='columns'
                                      ...
                                    </dx-data-grid>

                                    ‍How can I move the Buttons columns (delete, edit, ...) to a fixed left position?

                                    G‍reetings

                                1 Solution

                                Creation Date Importance Sort by

                                Hi Denis,

                                You can add the buttons column to the required position. For example:

                                [HTML]
                                <dx-data-grid ... > <dxi-column type="buttons" [buttons]="['edit', 'delete']"></dxi-column> <dxi-column dataField="firstName"></dxi-column> <dxi-column dataField="lastName"></dxi-column> </dx-data-grid>

                                See also:
                                https://js.devexpress.com/Documentation/Guide/Widgets/DataGrid/Columns/Column_Types/Command_Columns/#Create_a_Column_with_Custom_Buttons

                                Updated:

                                In this case, I recommend you try the approach from the dxDataGrid - How to change command column position ticket instead. The main idea is to change the visibleIndex option of the command column in the onContentReady handler:

                                [JavaScript]
                                onContentReady(e:any) { e.component.columnOption("command:edit", "visibleIndex", -1) }

                                Updated by the Owner:

                                Thank you for the example.

                                I found the problem: <dxo-column-fixing [enabled]="true"></dxo-column-fixing>‍ will move the edit column back to the right site.
                                Even { type: "buttons", visibleIndex: -1 },will not help. The solution is: { type: "buttons", fixed: true, fixedPosition: 'left' },

                                Show all comments
                                • Denis Sowa 01.14.2020

                                  Hi and thank you for your reply.
                                  B‍ut as I wrote, I am assigning the columns via code [columns]='columns', so I can not use the approach with <dxi-column...
                                  I‍ have to reorder the button column via code, not html.

                                • Lex (DevExpress Support) 01.14.2020

                                  Thank you for the update, Denis. In this case, I recommend you try the approach from the dxDataGrid - How to change command column position ticket instead. The main idea is to change the visibleIndex option of the command column in the onContentReady handler:

                                  [JavaScript]
                                  onContentReady(e:any) { e.component.columnOption("command:edit", "visibleIndex", -1) }

                                  Let me know if it helps.

                                • Denis Sowa 01.14.2020

                                  Hi,

                                  I‍ stumbled over the ticket already. Because of:

                                  >>>
                                  David Evan K9 months ago
                                  This example is four years old.  Is there a more updated way to do this?

                                  Artem (DevExpress Support)9 months ago
                                  Hi David,

                                  Yes, we provide the built-in API starting with v18.2. Now you can specify a command column and its position (visibleIndex) in the columns array. Please check the Command_Columns help section for more information.
                                  <<<

                                  I opened this ticket. The help section is not answering my question, as long as I'm using the code approach. I will check the onContentReady solution tomorrow.

                                • Lex (DevExpress Support) 01.14.2020

                                  Hi Denis,

                                  It is possible to specify the visibleIndex property for a specific column. However, it all is based on how your columns array look like. Would you please demonstrate it to me?

                                • Denis Sowa 01.15.2020

                                  Hi,
                                  e.g.

                                   columns: Array<DevExpress.ui.dxDataGridColumn> = [
                                      { dataField: 'werk', caption: 'Werk' },
                                      { dataField: 'standort', caption: 'Standort' },
                                      { dataField: 'region', caption: 'Region' },
                                      { dataField: 'hauptgueltigkeit', caption: 'HG' },
                                      { dataField: 'anzWochen', caption: 'Anzahl Wochen' },
                                    ];

                                  B‍ut the onContentReady approach is also working.

                                • Lex (DevExpress Support) 01.15.2020

                                  Hi Denis,

                                  Thank you for the update. In this case, you can just a add buttons column at the beginning of the columns' array:

                                   	columns: Array<DevExpress.ui.dxDataGridColumn> = [
                                      	{ type: "buttons" },
                                      	{ dataField: 'CompanyName', caption: 'Werk' },
                                  	    { dataField: 'City', caption: 'Standort' },
                                  	    { dataField: 'State', caption: 'Region' },
                                  	    { dataField: 'Phone', caption: 'HG' },
                                      	{ dataField: 'Fax', caption: 'Anzahl Wochen' },     
                                    	];

                                  Let me know if you have further questions.

                                • Denis Sowa 01.16.2020

                                  Hi,

                                  t‍hat was the first I've tried last week:
                                  columns: Array<any> = [
                                      {type: 'buttons' },
                                      {dataField: 'tma',caption: 'TMA'},
                                      {dataField: 'mGr',caption: 'MGr'},
                                      {dataField: 'hGr',caption: 'HGr'},
                                      {dataField: 'idx',caption: 'Idx'},

                                  b‍ut as you can see in the attached screenshot. that is not working:

                                • Lex (DevExpress Support) 01.16.2020

                                  Hi Denis,

                                  Thank you for the update. The demonstrated behavior is unexpected. I created a sample using one of our demos and my approach works correctly in this demo:
                                  https://codesandbox.io/s/ffdc9

                                  Clipboard-File-1.png

                                  Would you please check my sample on your side and modify it to demonstrate the issue? I look forward to your reply,

                                • Denis Sowa 01.17.2020

                                  Thank you for the example.

                                  I found the problem: <dxo-column-fixing [enabled]="true"></dxo-column-fixing>‍ will move the edit column back to the right site.
                                  Even { type: "buttons", visibleIndex: -1 },will not help. The solution is:  { type: "buttons", fixed: true, fixedPosition: 'left' },

                                  Thank you for your support!

                                • Lex (DevExpress Support) 01.17.2020

                                  I'm happy to hear that the issue has been resolved, Denis! Have a nice weekend!