I am looking to add a title to the Kendo UI grid toolbar and align it left. Is there some way I can add an h2 or h3 to this area?
Also to style just this toolbar can I access the style property? ( I want to put a darker color/gradient to the top and bottom (where pagination is))
toolbar : [
{"name": "create", template: "<img class='k-grid-add' src='add.png'/>"},
{"name": "save", template: "<img class='k-grid-save-changes' src='save.png'/>"},
{"name": "cancel", template: "<img class='k-grid-cancel-changes' src='cancel.png'/>"}
],
The class that identifies the Kendo Grid toolbar is k-grid-toolbar. So for styling it, you might use:
#grid .k-grid-toolbar {
background: red;
}
For adding some content to the toolbar, you can use:
$(".k-grid-toolbar", "#grid").prepend("<h1>hello</h1>");
or
$(".k-grid-toolbar", "#grid").before("<h1>hello</h1>");
$(".k-grid-toolbar", "#grid").after("<h1>hello</h1>");
depending if you want to add the HTML inside the div containing the buttons before or after it.
And grid is the id of the div containing the grid.
In Kendo-MVC parlance, the solution is quite simple:
#(Html.Kendo().Grid<MyGridsViewModel>()
.Name("MyGridsName")
.ToolBar(toolbar => toolbar.Template("<h4>My Grid's Title</h4>"))
.DataSource(datasource => ...
This works fine until you start getting crazy and attempt to use the Create/Custom buttons builders with the toolbar lambda.
In that case, the buttons are never rendered. The solution there is to use one of the other approaches identified in this thread: http://www.telerik.com/forums/custom-command-button-in-toolbars
Related
I use "CKEDITOR.stylesSet.add(...)" in a custom .js for my CMS. I can add custom styles for headlines, p-tag, ul here...but how can I add a "div", so that two children div will be in it?
I start to add a "div" in this way:
CKEDITOR.stylesSet.add("ifmstyle", [
{
name: "Custom DIV",
element: "div",
attributes: {
class: "custom-div",
},
},
]
..that means, that I have a div where I can place images, p-tags, a-tags for example. But I would like to make it like this (My custom div will have two children divs):
Custom DIV
children-div1
children-div2
image example
You're basing your code on this doc page, right?
https://documentation.bloomreach.com/14/library/concepts/document-types/html-fields/customize-ckeditor-styles.html
This is about the content perspective. You can change styling there but you can't change the markup unless you fork/rewrite some underlying Wicket code.
HTH
Jeroen
BTW community.bloomreach.com is more active then SO here
I have a page with two kendo ui Windows. Using javascript/html5 flavor.
How can I programatically change the color of the window title bar after it has been rendered on the page?
and also is there an event tied to the user clicking on the window?
TIA
You can either change all Kendo Windows' CSS on the page, or get a specific instance, and change its titlebar CSS only:
kendoWindow.wrapper.find('.k-window-titlebar').css({
color: 'red',
'background-color': 'yellow'
});
... or
$('.k-widget.k-window .k-window-titlebar').css({
color: 'red',
'background-color': 'yellow'
});`
Example
In my Kendo grid, I've a column (address). Instead of displaying customer's address, it shows a button. On clicking the button, I want to open a Kendo window as a modal and display the address.
...
{ field: "address",
title: "Customer Address",
width: "130px",
filterable: false,
template: '<span class="viewButton"><input type="button" value="Address" class="k-primary"></input></span>'
},
...
I've tried various strategies, including a custom command, an onClick event handler for the grid etc. But none seems to work. The best I've achieved so far is using custom command, in which I can open the Kendo window, but unable to display the underlying data for the column.
Any ideas for any possible way to achieve this?
You can get hold of current dataItem and show it in window.
$("#grid").on("click", ".viewButton",function(e){
var dataItem = grid.dataSource.dataItem($(e.currentTarget).closest('tr'));
var yourText = dataItem.address;
});
I have an editor template for a grid using Telerik MVC grid and I have two kendo ui components in a grid cell. How can I get them to align next to each other i.e. side by side.
I have tried some css and placing them in div and align float but they render in separate spans and unsure on how to get them side by side any ideas?
Currently the search button is underneath the autocomplete textbox.
#model object
#*#Html.Kendo().AutoComplete().Name("LocationSearch").Placeholder("Type in your search item . . ").Filter("startswith").BindTo(new string[] { "UK","USA","FR","ES","TR","RU","PT"}).Separator(",")*#
#(Html.Kendo().AutoComplete()
.Name("DepartmentSearch")
.Filter("startswith")
.Placeholder("Type in your search item")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetDepartments", "Home");
})
.ServerFiltering(false);
})
)
#(Html.Kendo().Button()
.Name("Search")
.HtmlAttributes(new { type = "button", style="min-width:20px !important;"})
.Content("...")
)
The autocomplete widget is created in a span added inline width via jquery and this worked. $("#DepartmentSearch").first().css('width', '65%');
How can I change the size of buttons and text (or style) in Kendo ui grids?
I want to use them for a responsive web page (mobile and desktop).
Change the text size of rows is easy:
columns: [
{
field: "Title",
width: 100,
attributes: {
"class": "myClass",
style: "font-size:20px;"
}
}
]
But I don't know how change the size of the title of columns and buttons
In this section you can see how you can change the messages the Grid uses or the text for the buttons. use ctrl+f and search for 'message' and 'text'.
Customizing the buttons style is not a good idea (imo). However you can just use CSS classes with "stronger" selectors.