How to align the Kendo UI Grid toolbar buttons in righthand side.
Add the following CSS style:
.k-grid-toolbar a {
float:right;
}
See it here: http://jsfiddle.net/OnaBai/W42wK/
Related
I applied kendo editor on a div element rather using textarea as it's giving some issues in iPad. Now, I don't want the editor to have toolbar to format text.
I tried applying styles as none & set tools to an empty array but still the toolbar appears with a draggable button in it.
<div id="targetdiv" contenteditable="true" style = "resize: none;width:
100%
!important; height:150px; max-height:150px;max-width: 100% !important;">
</div>
<script>
$("#targetdiv").kendoEditor({
tools: []});
</script>
The toolbar appears though the editor it initialized with no tools, as in image below.
Approach 1: (Not working)
<style>
.k-editor-toolbar
{
display:none;
}
</style>
Approach 2: (Not working)
$('.k-editor-toolbar').hide();
Approach 3: (partially works)
Added a select event but still the toolbar appears for an instant and then disappears.
$("#targetdiv").kendoEditor({
tools: [],
//Fires when the Editor selection has changed.
select: function (e) {
let editor = $("#targetdiv").data("kendoEditor");
editor.toolbar.hide();
});
If you don't want to show the toolbar define an empty tools in the KendoUI editor initialization:
$("#editor").kendoEditor({
// Empty tools so do not display toolbar
tools: [ ]
});
If you want to disable the edition, you should use:
$(editor.body).attr('contenteditable',false);
you can try this one as well
.k-editor-toolbar
{display:none !important;}
Finally,
I have to subscribe for the open event of the editor toolbar and prevent its execution. This resolved my issue.
let editor = $("#targetdiv").getKendoEditor();
editor.toolbar.window.bind("open", function (e) {
e.preventDefault();
});
I have a kendo grid present within a tab strip with two tabs. While navigating between the tabs and performing any event, the width of the grid shrinks.
For example: When the user clicks on the update button on the grid in tab 2, and navigates back to tab 1, the grid in the first tab shrinks and the width resize to 10% of its original size. I'm not sure why this happens, I tried setting the CSS to a fixed width, but it doesn't work, is there any way I can ensure it doesn't resize
note: the Kendo grid is displayed within the Kendo tab strip, and the tab strip is present within a kendo splitter pane.
So are you wrapping the grid and the Kendo Tab Strip in a div? I would also need to see the code. I have used the kendo grid on the top half of my web page with a splitter in the middle and a Kendo Tab strip in the bottom pane. So the entire page is wrapped in a wrapper div and I write a grid resize function to resize the grid.
var resizeGrid = function () {
var gridElement = $("#grid"),
dataArea = gridElement.find(".k-grid-content"),
gridHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(".k-grid-content"),
otherElementsHeight = 0;
otherElements.each(function () {
otherElementsHeight += $(this).outerHeight();
});
dataArea.height(gridHeight - otherElementsHeight);
}
Not sure if this is what you want but hope it gives you some insight.
Is it possible to set the textcolor of kendo grid when edit mode is clicked on "inline" edit?
I know kendo theming can do this somehow, but I would like to set myself if I can.
Define a CSS style as:
#grid tbody .k-input {
color: red !important;
}
For setting the color or the text to red while editing.
I use #grid to apply the style only to the Grid with id equal to grid and I use tbody to narrow the styling only to the body of the table (preventing other inputs from being formatted).
Can i add Red Border to Kendo UI date picker if validation fails
function onChange(e) {
if (e.date == undefined) {
var item = $(this).find('.t-input').val('Incorrect date!');
}
}
I have this onChange Method and trying to add red border. Can anyone help me or suggest a better solution
Adding this CSS should work:
#datepicker[aria-invalid] {
border: 1px solid #f00;
}
Here is an example:
jsbin.
Unfortunately, you cannot do this with Kendo UI.
Kendo UI elements do not allow you to do this.
I did data binding with the style sheets on a kendo widget.
Firebug will inform you that it is not possible.
I will open a ticket with my telerik support account now and come back to you.
I would also like to do the same thing.
$('input[aria-owns=txt-orderedTime_timeview]').closest(".k-picker-wrap.k-state-default").css("border-color", '#ff0000');
OR
$("#txt-orderedTime").data("kendoTimePicker").wrapper.find(".k-picker-wrap.k-state-default").addClass("validationErrorClass");
.validationErrorClass {
border-color: #ff0000 !important;
}
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