I have just added a Telerik menu to my MVC application. I also have many views that render Telerik grids on them.
Problem: My menu has one item with sub items. When I hover over that menu item, the dropdown slides beneath the Telerik Grid, which hides most of the sub items and makes it impossible to click them. Any idea how to make the menu dropdown slide over the grid instead of under it?
alt text http://www.slickappstest.info/telerik_menu.gif
I suppose this has something to do with the z-index of the menu. Try increasing it gradually (compared to the grid) until it displays over the grid table. Hope this helps.
Dick
in telerik.common.min.css delete the overflow:hidden; rule for selector .t-grid td so that it reads :
.t-grid td
{
vertical-align:middle;
line-height:1.6em;
text-overflow:ellipsis;
border-style:solid;
border-width:0 1px 0 0;
padding:.25em .6em;
}
the result will be :
Related
I want to implement similar functionality to the jQuery UI Draggable & Sortable, but using Kendo UI.
This should allow me to drag from a list of options and place them within a sortable list.
Here is the jQuery UI functionality: http://jqueryui.com/draggable/#sortable
I want 2 panels, one with items that can be dragged and the other containing the dragged items. The closest thing I could find on Kendo UI is: http://demos.telerik.com/kendo-ui/sortable/linkedlists, but the items in the first list (on the left) are sortable and this moves the item from the first list.
I have looked at all of the Kendo UI samples on Teleriks website, but I cannot see any examples of how to do this.
Update:
I am now part way there. I have 2 sortable lists and I have added code to stop the 'draggable' items from sortable. However, when I drag an item to the 'sortable' list, it disappears from the 'draggable' list.
Here's the code I'm using to stop the items being sortable:
start: function() {
$("#draggable li").each(function() {
$(this).removeClass("sortable");
});
Here is the fiddle: http://jsfiddle.net/kgjertsen/r4xmLevq/
Anyone able to tell me how to stop the items from disappearing?
After a lot of investigation, it turns out that you cannot link draggable with sortable, as you can with jQuery. You need to drop the item into the container, then sort it from its default place, which is at the bottom.
Telerik justify this with a statement saying that they cannot implement this behaviour as the controls cannot know about each other, as this is bad practice.
Personally, I think this is terrible and the functionality would be a great addition to the Kendo UI library.
I am using kendo grid with detail template in my MVC project. By default filter menu button is right align in the header part of grid. My requirement is to show this filter button in the left side of the header. How can I achieve it ?
Use below CSS
.k-header>.k-grid-filter{
float:left!important;
}
I have an ASP.NET MVC application and I use Kendo UI grid. I want to change pager position from left below grid to right below grid.
I read many topic but they talk about change pager from bottom to top. I try to use HTMLAttribute, use style :
- text-align:right
- align-content: space-end
I try to modify Kendo grid pager css : k-pager-wrap k-grid-pager
But none of them work.
Anyone here know how to solve this problem.
Thank you
Since it's the .k-pager-wrap>.k-link select is who brings them to the left you can do
<style>
body .k-pager-wrap > .k-link {
float: right;
}
body .k-grid .k-pager-numbers {
float: right;
}
</style>
body selector is added to prevail kendo style
but it leads to a problem, that next/previous page buttons is on the wrong sides due to the nature of float
I have created tab layout as in this example http://jqueryui.com/demos/tabs/#bottom with controls bellow the panel. I have 3 default tabs, which can't be delted and than user can add some more tabs and also delete them.
The problem is that the default tabs should be on the top like there http://jqueryui.com/demos/tabs/#default so because UI doesn't support two control panels, I have created new element looking like control panel on top <p class="ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-top tabs-header-top"></p> with fixed heigth. But now I don't know how to move the default tabs to the right position. I tried adding them position: relative; top:-20em; ,but to make this working, the whole tab container must have fixed heigth and that's bad, because I need it to stretch within the window to be as big as possible.
So is there any other way how to move the default tabs to the top?
Thanks
edit: here is example of my idea, but achieved with fixd heigth http://jsfiddle.net/L6QjK/2/
To be clear: This method is technicaly working, so the questin is not about making tabs with two control panels, but about positioning the tabs
Not sure if it will work, but try creating two DIVs, one with default styling and one with the bottom styling:
<div class="tabs">...
<div class="tabs tabs-bottom">
and then use $(".tabs").tabs(...)
So finally I managed to create two control panels on my own by changing the jquery ui code.
If somebody is trying to make same thing as I here are some tips:
1) To create multiple control panels, find this.list=this.element.find("ol,ul)").eq(0)
now, the .eq(0) selector causes, that onlz the first ul or ol is made to control panel, so I simply modified the find selector to this :this.list=this.element.find("ol,ul:lt(2))") and the :lt(2) selector will make first two ULs to two control panels. Now we have two control panels and it is all about css positioning, you can get isnpired here http://jqueryui.com/demos/tabs/#bottom to move one control panle to the bottom.
2)I am using schema, that the first control panel contains static tabs, and to the second one are added dznamic tabs. So I also needed to change the target during adding tabs. For this you have to find h.appendTo(this.list) and change it to h.appendTo(this.list[1]) because ad.1) this.list now contains two elements and I want the tabs add to the second one.
So finaly to make two control panels tab layout isn't that hard
In an asp.net-mvc-3 project, I'm going to be using Telerik Extensions.
Right now, I'm looking at their Menu ( http://demos.telerik.com/aspnet-mvc/menu ), and wondering if one could align the last item to the far right of the bar, but leaving the rest stacked to the right.
The documentation of Menu explains how to reverse the alignment of the whole Menu, but neither it nor the MenuItem show any obvious way to control their layout.
Is this possible?
Many thanks!
You could add a CssClass to the last menu item and style it to to the right.
Check the .HtmlAttributes object of the menu item api.
ci.Add().Text("Categories")
.Url(Url.Action("Categories", "ProductCategories"))
.HtmlAttributes(new { #class="last"});