Questions on Kendo UI for jQuery Forum

1 answer

127 views

When using font icons in a toolbar via the attributes configuration option, the overflow gets all messed up. The attribute (in this case, the class attribute) gets applied to all elements in the overflow container and all hell brakes loose:

<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/toolbar/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>

</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="toolbar"></div>
</div>
<script>
$(document).ready(function() {
$("#toolbar").kendoToolBar({
items: [

{
type: "button",
text: "But1",
attributes: { "class": "fa fa-2x fa-map-marker" },
},
{
type: "button",
text: "But1",
attributes: { "class": "fa fa-2x fa-map-marker" },
},
{
type: "button",
text: "But1",
attributes: { "class": "fa fa-2x fa-map-marker" },
},
{
type: "button",
text: "But1",
attributes: { "class": "fa fa-2x fa-map-marker" },
},
{
type: "button",
text: "But1",
attributes: { "class": "fa fa-2x fa-map-marker" },
},
{
type: "button",
text: "But1",
attributes: { "class": "fa fa-2x fa-map-marker" },
},
{
type: "button",
text: "But1",
attributes: { "class": "fa fa-2x fa-map-marker" },
}
]
});

$("#dropdown").kendoDropDownList({
optionLabel: "Paragraph",
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Heading 1", value: 1 },
{ text: "Heading 2", value: 2 },
{ text: "Heading 3", value: 3 },
{ text: "Title", value: 4 },
{ text: "Subtitle", value: 5 }
]
});
});
</script>

</div>

</body>
</html>

Toolbar

answered on 02 Jan 2018

1 answer

141 views

Kendo UI toolbar datasource REACT

Hi, I couldn't find a Kendo UI for React forum so I thought I might try to post this here. I am trying to create a toolbar with multiselect dropdowns that have a remote datasource. The intent is to give options for custom filtering for a grid. I tried to go off the examples available but there are no dataSource examples for React for a dropdown/multiselect template in a toolbar. I've tried doing a basic local dataSource example to get started and even that isn't working. Can someone help?

Here is an excerpt from my code of how I define and render the toolbar. The end goal is to replace the dataSource with a remote dataSource.

...

const toolbarOptions = {

items: [

{ template: "<label for='dropdown'>Materials:</label>"},
{
template: "<select id='material-dropdown' style='width: 150px;' />",
dataSource: [{ item: "Item 1", value: 1 }, { item: "Item 2", value: 2 }],
dataTextField: "item",
dataValueField: "value",
overflow: "never"
}

]

}

return(

</div>

)

...

Toolbar

answered on 15 Nov 2017

1 answer

370 views

Long popup menu scroll issue with Kendo toolbar

Hi, we have a complication with kendo toolbar control. If we have the toolbar which has "buttonGroup" element, and its height above of height rest of the screen and "flip" collision detection, not fire for this case.(it's above of height rest of screen at top)
In this case, popup menu extends page height and we have shown menu which only partly visible.

try to use the scroll to see rest of hidden elements - popup menu closing.

Question: have we any chance to use scroll without menu closing or simple workaround how to show the popup menu with a full set of items on screen?

Dojo Sample (open popup menu and try to scroll):
http://dojo.telerik.com/IRoTO/4
(FHD screen)

Toolbar

answered on 12 Sep 2017

1 answer

797 views

Button call javascript with parameters

Is it possible to call a Javascript with parameters when the user presses a button in the toolbar?

I can use the .Click() and the javascript is called but I can't figure out how to pass the parameters?

I als tried.....

.Items(items =>
{
items.Add().Type(CommandType.Button).Text(Model.ToolbarSettings.NewButton.Text).Icon("plus")
.Hidden(!Model.ToolbarSettings.NewButton.IsVisible).Enable(Model.ToolbarSettings.NewButton.IsEnabled)
.HtmlAttributes(new { type ="button", Id = "aa" })
.Click("onClick")

But how can I read the Id value in the javascript?

I want pass two parameters to the script (action/controller)......

Toolbar

answered on 04 Sep 2017

3 answers

201 views

Toolbar button click event not firing reliably on mobile browsers

Hello!

I have prepared an example: http://dojo.telerik.com/oZOYa

In my project setup I use 24x24 px images with transparent background (in the online demo 16x16 px), which I position in the center of the buttons (css vertical-align). I also need to set the button click event handlers after the toolbar has been initialized.

On desktop browsers the example works well. However, when I use Chrome for Android (version 58), the button click event is not always firing, even when the orange button background flashes up, when pressing on a button. The issue seems to appear more often, when the page is zoomed. Toggle buttons work fine. I experience the same issue, but less often, with iOS 9.3.2 Safari too.

Any ideas on how to improve the user experience?

Best regards,

Kaan

Toolbar

answered on 08 Jun 2017

1 answer

236 views

Toolbar template images overlap

Hello,

I am using templates with ahref for Kendo toolbar, but the Images dont Show. Only one Show full rest is cut or overlapped i believe

@(Html.Kendo().ToolBar()
.Name("ToolBar")
.Resizable(true)
.Items(items =>
{
            items.Add().Template("<a href='javascript: void(0)' class='abutton save' onclick='GoBack()' title='Speichern' > </a>");

items.Add().Template("<a href='javascript: void(0)' class='abutton delete' onclick='onDelete()' title='löschen'> </a>");

             items.Add().Template("<a href='javascript: void(0)' class='abutton goback' onclick='GoBack()' title='Zurück zur Liste' > </a>");

})
)

my css

.abutton.save {
background: url('@Url.Content("~/Images/Save_new.png")');
background-repeat: no-repeat;
height:40px;
width:40px;
vertical-align:middle;
}
.abutton.goback {
background: url('@Url.Content("~/Images/arrow_left.png")');
background-repeat: no-repeat;
height:40px;
width:40px;
vertical-align:middle;
}
.abutton.delete {
background: url('@Url.Content("~/Images/delete.png")');
background-repeat: no-repeat;
height:40px;
width:40px;
vertical-align:middle;
}

What am i doing wrong

Thanks

Anamika

Toolbar

answered on 25 May 2017

1 answer

207 views

kendo toolbar commandtype button tooltip

Hello,

Can we have tooltip for command Buttons with images

@(Html.Kendo().ToolBar()
.Name("ToolBar")
.Resizable(false)
.Items(items =>
{
items.Add().Type(CommandType.Button).ImageUrl(Url.Content("~/Images/Save_new.png")).Id("saveBtn").Click("SaveEntry");

})

Thanks

Anamika

Toolbar

answered on 24 May 2017

2 answers

57 views

Destroying and recreating Toolbar causes Splitbutton expansion problem

Destroying and recreating a Toolbar in the same DOM element causes problem with Splitbutton expansion via keyboard. To reproduce:

1. Create a toolbar with a splitbutton. Using the keyboard, tab to the splitbutton and use alt-down to expand it. Works great.

2. Destroy the toolbar with .destroy(), and empty the containing DOM element.

3. Create a toolbar with a splitbutton in the same (now empty) DOM.

4. Tab to the splitbutton and press alt-down. The splitbutton expands and immediately closes.

Demonstrated here: http://dojo.telerik.com/@richm/odATu

Any advice is greatly appreciated!

Toolbar

answered on 24 Apr 2017

5 answers

270 views

template not overflow

Hi,

How can a template overflow in a toolbar?

In http://demos.telerik.com/kendo-ui/toolbar/index I change

{

template: "<input id='dropdown' style='width: 150px;' />",

overflow: "never"

},

to

{

template: "<input id='dropdown' style='width: 150px;' />",

overflow: "always"

},

but the dropdownlist doesn't overflow.

Peter

Toolbar

answered on 11 Apr 2017

4 answers

381 views

kendoMenu within toolbar

We're revamping our toolbars, which you might have guessed by the volume of questions I'm posting on this forum. In the past, we have often put kendoMenu controls within a kendoToolBar. We've been able to make that work, but we've had to implement work arounds, especially when it comes to things like 508 compliance - feedback, keybinding - and we've also had issues with overflow not working properly. We've ended up not using overflow as a result and now we want responsive toolbars.

I'm just wanting to touch base and see if kendoMenu within kendoToolBar is more fully supported in the most recent version of kendo. And if not, is there a recommended way of dealing with hierarchical data within a toolbar?

Toolbar