Text Editors - Custom Action Buttons

[churkin]

The Problem

DevExtreme editors do not support custom action buttons out of the box, and it takes a lot of time and resources to implement this capability.

The Proposed Solution

We plan to add a buttons option to each DevExtreme editor. It will accept an array of objects that configure predefined and custom buttons. Each object will have the following structure:

buttons: [{
    name: 'customButtonName', // a name used to identify the button 
    location: 'before|after', // button location relative to the input field
    options: { /* custom button options */ } // options of the DevExtreme Button widget
}]

Predefined buttons can be declared using their names (dropDown, clear, spins) instead of configuration objects (see an example below).

In addition, each editor will have the getButton(name) that gets the instance of a predefined or custom button by name.

Add a custom button

$("#widgetContainer").dxTextBox({
    text: 'ExcelRemote IR',
    buttons: [{
        name: 'customButtonName1',
        location: 'after',
        options: {
            text: 'custom'
        }
    }]
});

Add a custom button before the input field

$("#widgetContainer").dxTextBox({
    text: 'ExcelRemote IR',
    buttons: [{
        name: 'customButtonName1',
        location: 'before',
        options: {
            text: 'custom'
        }
    }]
});

Insert a custom button between two predefined buttons

$("#widgetContainer").dxSelectBox({ 
    text: 'ExcelRemote', 
    buttons: [ 
        'clear', 
        { 
            name: 'customButtonName1', 
            location: 'after', 
            options: { text: 'custom' } 
        }, 
        'dropDown'
    ]
});  

Configure a predefined button

$("#widgetContainer").dxSelectBox({ 
    text: 'ExcelRemote', 
    buttons: [{ 
        name: 'dropDown', 
        location: 'before', 
        options: { disabled: true } 
    }]
});  

Try it

Live Sandbox

jQuery

Angular

We Need Your Feedback

Take a Quick Poll

Do you find the capability to add custom buttons to DevExtreme editors helpful?

Get Notified of Updates

Subscribe to this thread or to our Facebook and Twitter accounts for updates on this topic.

Related issues

#6044

[briosheje]

Button locations aside, it would be an interesting feature to actually implement whether the button should be floating or fixed instead (or others).

In fact, many inputs are usually "linked" to the text box itself (like bootstrap's input groups https://getbootstrap.com/docs/4.0/components/input-group/), while some others have the floating button inside the text box (like the one in the devextreme datepicker), so it would be useful to be able to handle both the scenarios.

That aside, adding the button group support as well would be awesome, I don't think it should be a great deal since it has many common behaviors with the button widget.

[rprimora]

The proposed solution sounds nice. How would one add an image here instead of button?

Would this be a disabled button with icon specified?

[briosheje]

@rprimora Sounds like it supports the widget itself (just like the dx-toolbar, if you've ever used that I'm pretty sure you're familiar with it).
Basically, I think you can apply all the widget properties available in the configuration: https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxButton/Configuration/

[briosheje]

Additional suggestion: for angular-like frameworks, I would suggest you to provide the dxTemplate for custom cases, like the datagrid's template renderer.

[churkin]

Hi guys,
The use of a static icon instead of a button is a different task, we will consider the possibility of implementing it in the feature. @rprimora yes, you can emulate images through disabled buttons, but it would be useful if we add the type field to the buttons option for different widgets support (button, dropDownButton, image ...). We will think about this in the next releases. Thank you for your feedback.

[San4es]

FYI, @MikeVitik

[rprimora]

@churkin The thing is, you can only show final amount of controls inside every control as I think you already know there in DevExpress since you guys have a long tradition of building user controls.

Where is this line drawn? Easiest would be as @briosheje said - give possibility of a template. This is easiest(I think) but it is usable only in so many scenarios. For instance, usable controls inside text input would be:

• Check box
• Radio button
• Button
• Image

It would be ridiculous to put, lets say, grid. Or list...

If you give us an option to specify our own button sooner or later a demand for check box or radio button will be made :)

[alexander-kotov-dx]

@rprimora thank you for your feedback. This makes sense. Although I cannot promise that we'll add this functionality to the upcoming release (as we're now polishing the current implementation), we'll definitely consider it for further development.

[Shiko1st]

It is not clear yet -- will it be possible to show / hide that buttons dynamically without modifying all buttons set?

[alexander-kotov-dx]

Yes, you can use either framework-specific configuration components, or the getButton(name) method to get access to all options of the correspondent custom button as follows:

textBoxInstance.getButton("customButton1").option("visible", false);

[george-kar]

That's a big big update for me. Will be included on the 19.1 or we can expect it as update to the 18.x series ?

[briosheje]

@george-kar I think this will be included in v 19.1 since it's labeled 19.1 (check the labels above).

Also, you may check this: https://js.devexpress.com/Roadmap/

[alexander-kotov-dx]

Hi @george-kar,
@briosheje is right and we plan to release this functionality in v.19.1 and support it in all further versions. To avoid any misunderstanding, we have added the corresponding labels to the discussion pages.

[briosheje]

@alexander-kotov-dx since we're on this argument, is there any ETA for the 19.1 release? I'm planning some changes on a devexpress-based framework, but since many tasks will be easier to solve with the 19.1 components, I was wondering whether I should wait a bit more (more or less than a month?) to start complex implementations.
Thanks.

[george-kar]

@alexander-kotov-dx @briosheje same here. I have some changes and I need to find complex solutions. Should I wait for 19.1? How long it will take to go out?

[alexander-kotov-dx]

We greatly appreciate your interest in this functionality. At the moment, we concentrate our forces on its realization. However, I'm not able to provide you with any promises or estimates. We will do our best to show you the base functionality as soon as it is implemented. I'll update this issue when the testing samples are ready.

[alexander-kotov-dx]

Hello,
 
Now the feature preview version is available for testing. We prepared samples that illustrate possible usage scenarios in different approaches. I have added links to the live examples to the main article.
 
Unfortunately, the last part of this feature (predefined buttons customization) didn't achieve the desired level of quality yet and we can't release it in v.19.1.

[briosheje]

@alexander-kotov-dx thanks for the feedback.

Personally, from the above sandboxes, I think it's a very great addition to the components set even without the predefined buttons customization feature.

The usage of this feature is extremely wide to me and makes it extremely easy to enrich the current layouts.

[Bykiev]

@churkin, hello!

There is a typo in dxSelectBox demo, it should be 'dropDown' instead of 'dropdown'. Also clicking button inside dxSelectBox fires 'Opened' event.
Here is online demo: https://codepen.io/anon/pen/armqwV

[alexander-kotov-dx]

Hello @Bykiev

We created the discussion page to show our plans and receive customer feedback, but some details have been corrected during the implementation. I have updated the main article to show more actual decisions.
Thank you for the bug report. Yes, in DevExtreme beta version we have a bug with SelectBox's opening after click to the custom button, but it has been fixed and does not reproduce for the actual v19.1 release branch.

[dxbykov]

Thank you to everybody who gave us feedback on this feature. It's available in the v19.1 release. I'm closing this thread. In the case of bugs or questions, feel free to create new GitHub issues or tickets in our Support Center.