Kendo control with TWO button (with icons)

[Mike]

At this link: 

 http://www.telerik.com/blogs/styling-forms-like-a-pro-with-kendo-ui

it describes how you can have a button next to a control (example below) 

http://plnkr.co/gfVg1WwEPcIAmBmXdM6i?p=preview

 Is there a way to have a control and then TWO buttons (with icon) next to the control? 

 

[Dimiter Topalov]

Hello Mike,

There is a way to add two or more icons next to a textbox, however this is not a part of the default functionality of the product and requires custom CSS code.

Normally, non-supported custom implementations fall outside the scope of our support service, however, I have prepared the following example as an exception. You can see the "plus" icon next to the "close" icon. Simple alerts are attached to the click events of the icon buttons.

The important part is to adjust the positioning of each icon next to the textbox, and use larger padding for the .k-space-right element. The default right padding is 1.9em, and the default right position value of the icon is 3px.

Feel free to further modify the example, according to your requirements and preferences.

Regards,
Dimiter Topalov
Telerik

[Khanh]

Dear admins,

I have designed my GUI with some rad number textboxes, but I have a question: Could we click on the alert icon to show a message ? Please refer the attached image to more details. Thanks.

[Alex Hajigeorgieva]

Hello, Khanh,

The icon which you have shared with is in the screenshot is only visible during keypress in the Kendo UI NumericTextBox.

If anyone were to click on it, it would disappear because the widget will become focused and ready for input instead of a state in which an invalid character has just been typed in.

The only way you can notify the user that they have entered an invalid character and display a message would be during the keypress. For example, you could use keypress and keyup to show/hide the custom message:

var numeric = $("#amount")
.kendoNumericTextBox()
.on("keypress", function(e){
  if($(".k-numeric-wrap").hasClass("k-state-invalid")){
    $(".msg").show();
  }
}).on("keyup", function(){
  if(!$(".k-numeric-wrap").hasClass("k-state-invalid")){
    $(".msg").hide();
  }
});

http://dojo.telerik.com/umadujip

Let me know in case you had anything else in mind.

Regards,
Alex Hajigeorgieva
Progress Telerik