How can I remove a specific tool/button from Kendo Editor control?
Actually, I just want to remove Insert image button from Kendo Editor(all tools) control.
#(Html.Kendo().Editor()
.Name("editor")
.Tools(tools => tools.SubScript().SuperScript().ViewHtml())
)
Any ideas?
Got it. Need to remove all the tools first of all, and then add each tool one by one. There is a method Clear() for it. Here is the code.
#(Html.Kendo().Editor()
.Name(name)
.Tools(tools => tools.Clear() //remove all tools
.Bold().Italic().Underline().Strikethrough()
.FontName().FontSize().FontColor().BackColor()
.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
.InsertUnorderedList().InsertOrderedList().Indent().Outdent()
.FormatBlock().CreateLink().Unlink()
.SubScript().SuperScript().ViewHtml()
)
Please let me know if there is any other way of doing this.
The other way to remove the specific or all tools is by using jquery, something like this -
<script>
$(document).ready(function() {
$("#editor").kendoEditor({
value: "<p>hello there...</p>",
tools: []
});
});
</script>
and here is the Demo JS Fiddle
Related
I'm using free jqgrid and implemented column chooser to show hide columns, the functionality is working as expected but the popup that shows up doesn't have a proper rendering of UI.
I tried searching a lot and went through the documentation of free jqgrid but I don't know what am I doing wrong.
I was able to reproduce the error in demo in below url.
If any one has faced similar issue please help. Note I am using bootstrap theme.
$("#sampleGrid").navButtonAdd('#sampleGridPager',{
caption: "",
title: "Choose Columns",
buttonicon: "fa fa-table",
onClickButton: function () {
$("#sampleGrid").jqGrid('columnChooser');
}
});
https://jsfiddle.net/1vk5ku2y/2/
One needs to add jQuery UI CSS to the demo because it's required for columnChooser. You should add some jQuery UI theme, which corresponds Bootsrap CSS theme. For example
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css
After that one get already much better results https://jsfiddle.net/OlegKi/1vk5ku2y/4/. You need to add minor CSS fixes to have the final solution.
I have been using selec2 version 4 with ajax option.
And I want to set a selected value, as recommended in the guideline, by adding new Option element.
A problem I have is that I do not know when to add the new option because the event select2-loaded does not seem to exist in the latest version of select 2.
Can you please let me know in what way I can know the moment when data has finished loading from the server and has finished setting up, so I can add a new option to it?
Thank you.
The Option element you mention is created by calling the Option() constructor which then constructs a HTMLOptionElement. So basically you are just adding to your DOM and don't need to do it in any select2 event. Instead just do it on document load.
Here's a very basic example of what it could look like:
$(function () {
$('#element-to-select').select2();
var option = new Option('text', 'value', true, true);
$('#element-to-select').append(option).trigger('change');
}
Note that we are calling .trigger('change') to report the change to select2 as documented here.
can anybody tell me how to configure my kendo grid that it uses a
x-kendo-template?
The documentation only shows the set up for using client side technology:
http://demos.telerik.com/kendo-ui/grid/toolbar-template
I expect something like this:
.ToolBar(tb=>tb.Template(..some stuff here...))
thx
I don't think you can use the x-kendo-template blocks server-side as they are actually "compiled" into a kendo template via kendo.template() in javascript before using them.
But what you can do is include more razor in the Grid's ToolBar template:
.ToolBar(t => t.Template(#<text>
#(Html.Kendo().ToolBar()
.Name("toolbar")
.Items(items =>
{
items.Add().Type(CommandType.Button).Text("X").Id("X");
items.Add().Type(CommandType.Button).Text("Y").Id("Y");
})
)
</text>))
Or
.ToolBar(t => t.Template(Html.Partial("_ToolBar").ToHtmlString()))
or whatever razor code you want to use.
I need to add click event in my xtype : 'panel' in extjs 4.1.3
But I can do this by two ways.
panel.mon(panel.getEl(), 'click', function(){
panel.fireEvent('click');
});
panel.getEl().on('click',function(){
panel.fireEvent('click');
});
So after doing above code, in controller I can get click event of panel and can do my stuff there. But I can't get difference between these ways.
And also other question in my mind is which is best way?
Please can anybody help me to understand this diff??
Thanks in advance.
mon is used when a component is binding an event to something that we want to remove when the component is destroyed. For example:
// Some shared menu
var menu = new Ext.menu.Menu();
var p = new Ext.panel.Panel();
p.mon(menu, 'show', function(){
p.update('Menu was shown');
});
// This automatically causes the show event on the menu
// to be removed, even though the menu wasn't touched
p.destroy();
In your case, a component will always clean up it's element, so it doesn't really matter either way.
I'm using jqgrid to create a grid. I have looked but can't seem to find a solution. I'm trying to add links to the column headers.
Any help appreciated.
Thanks
Use jQuery to bind your click event:
jQuery(document).ready(function() {
$("#jqgh_colName").click(function() {
alert('jqgh_colName clicked');
});
});
jqGrid creates the column header names using names in the colName list. So you can try putting the markup directly in this list during grid initialization:
colNames:['Test', 'Column 2', ... ],
I have not tested this, so YMMV. Also keep in mind there may be usability issues - a user is probably going to expect that clicking on a header would sort the column.
Here you can find the exact options.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter