Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text Editors - Custom Action Buttons #7290

Open
churkin opened this issue Mar 14, 2019 · 20 comments

Comments

Projects
None yet
8 participants
@churkin
Copy link
Contributor

commented Mar 14, 2019

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

simple

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

Add a custom button before the input field

custom

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

Insert a custom button between two predefined buttons

reorder

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

Configure a predefined button

customize-predefined

$("#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.

@briosheje

This comment has been minimized.

Copy link

commented Mar 14, 2019

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

This comment has been minimized.

Copy link

commented Mar 14, 2019

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

This comment has been minimized.

Copy link

commented Mar 14, 2019

@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

This comment has been minimized.

Copy link

commented Mar 14, 2019

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

@churkin

This comment has been minimized.

Copy link
Contributor Author

commented Mar 15, 2019

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

This comment has been minimized.

Copy link
Member

commented Mar 17, 2019

FYI, @MikeVitik

@rprimora

This comment has been minimized.

Copy link

commented Mar 18, 2019

@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

This comment has been minimized.

Copy link
Contributor

commented Mar 18, 2019

@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

This comment has been minimized.

Copy link

commented Mar 19, 2019

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

@alexander-kotov-dx

This comment has been minimized.

Copy link
Contributor

commented Mar 20, 2019

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

This comment has been minimized.

Copy link

commented Mar 24, 2019

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

This comment has been minimized.

Copy link

commented Mar 25, 2019

@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

This comment has been minimized.

Copy link
Contributor

commented Mar 25, 2019

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

This comment has been minimized.

Copy link

commented Mar 25, 2019

@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

This comment has been minimized.

Copy link

commented Mar 25, 2019

@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

This comment has been minimized.

Copy link
Contributor

commented Mar 25, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Apr 25, 2019

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

This comment has been minimized.

Copy link

commented Apr 26, 2019

@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

This comment has been minimized.

Copy link

commented May 13, 2019

@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

This comment has been minimized.

Copy link
Contributor

commented May 13, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.