I have a Kendo Editor, defined as below:
#(Html.Kendo().Editor()
.Name("RestrictionsEditor")
.Tag("div")
.Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough()
.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
.CreateLink().Unlink()
.InsertImage()
.TableEditing()
.FontColor().BackColor()
)
.Value(#<text> This is the Kendo Editor and it has
some anchor tags pointing to external webistes.</text>)
When I click inside the editor, The top toolbar for font formatting is not showing. I want to show the top toolbar when user clicks inside the editor and then hide the toolbar when user clicks outside the editor. Please help!
Thanks!
To show hide the toolbar you first need to set the toolbar to hidden by default, then implement the select and blur events to show and hide the toolbar.
Here is a fiddle that implements this in JavaScript.
For your MVC implementation you will need to add script tags to you page and attached the events after the editor is initialized.
Something like this.
<script>
$(document).ready(function () {
//hide toolbar by default
$("#RestrictionsEditor").closest(".k-editor").find(".k-editor-toolbar").hide();
//bind the select event
$("#RestrictionsEditor").data("kendoEditor").bind("select", function(e){
//show toolbar on selection
$("#RestrictionsEditor").closest(".k-editor").find(".k-editor-toolbar").show();
});
//bind the blur event
$("#RestrictionsEditor").on("blur", function(e){
//hide toolbar
$("#RestrictionsEditor").closest(".k-editor").find(".k-editor-toolbar").hide();
});
});
</script>
Related
I am using Kendo UI TreeList & Grid for jquery. I want to hide a command button based on row values. In grid, I attached dataBound event to evaluate the model value and show/hide command button, below codes works fine
dataBound:function(e){
var delButton = e.container.find(".k-grid-Delete");
if (...) delButton.hide();
}
For TreeList, the same code seems also fine. However, when I add inline edit featrue, the same codes works differently.
When click "Edit" or "Add", the grid stay the original visible status, but treelist show all the button.
When click "Cancel", I triggered dataBound event in cancel event so the UI can be refreshed, then the grid show correctly but treelist still show all the buttons even if the dataBound is executed with correct logic.
Does anybody know how to resolve this issue?
Thanks,
Ziff Dai
i want to integrate KENDOUI toolbar toolbar with basic CRUD toolbar operation of KENDOUI grid grid.
I want to have button 'create' in my basic toolbar (first link) that adds new line in my grid(second link).
I don't think you can combine the Kendo ToolBar widget with the built-in grid toolbar but you can completely define the grid's toolbar using a template which can be a Kendo ToolBar that you have complete control over.
http://dojo.telerik.com/#Stephen/OJAbI
In this example I have taken the 2 demos you linked to and added the ToolBar from the ToolBar demo and added it as the toolbar for the Grid using the toolbar.template configuration:
toolbar: [
{
template: '<div id="toolbar"></div>'
}],
Then, the "toolbar" element gets converted to a full ToolBar with
$("#toolbar").kendoToolBar({...});
in which I have added a "Add new record" button and the click handler of the ToolBar is
click: function(e) {
$("#grid").getKendoGrid().addRow();
}
Hide and show Add and Cancel button programmatically in JQGrid
You can make Add and Cancel button hidden of visible in the same way like any other elements on the HTML page. You can use jQuery.show, jQuery.hide or jQuery.css with "display", "none" or "display", "" parameters. Thus the only thing which you need is to get DOM elements which represent the buttons. You can get the elements by id for example.
jqGrid assigns ids to all standard buttons. The ids of buttons added by inlineNav will be build from grid id as prefix and strings "_iladd" (for Add button), "_iledit" (for Edit button), "_ilsave" (for Save button) and "_ilcancel" (for Cancel button). So if you have the grid with id="mygrid" then $("#mygrid_iladd").hide() can be used to hide the Add button and $("#mygrid_ilcancel").hide() to hide the Cancel button. To hide both buttons you can use $("#mygrid_iladd,#mygrid_ilcancel").hide().
I need to select tabs in Kendo Tabstrip (see demo here) using right click in addition to left click. Is this possible?
This script will work,
$('#tabstrip [role="tab"]').bind("contextmenu",function(e){
$('#tabstrip').getKendoTabStrip().select($(this));
return false;
});
I would like to disable selection while the user is editing an item in an editable and selectable ListView
I've tried changing the selectable property of the Listview but it does not make any change.
See example here http://dojo.telerik.com/IvIkO
Hi for this add below given lines code after the initialization of list view in same example:-
$(document).on("click", ".product-view", function(e) {
//check any row in the List view is being edit
if (listView.items().hasClass("k-edit-item")) {
listView.clearSelection();
}
});
i have created a jsfiddle using your example and mine code, click on jsfiddle to see the working example for the same:-
http://jsfiddle.net/c2S5d/28/