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.
Related
I'm using Kendo ui for aspnet core MVC. And I can't find out how to set the placeholder text.
I'm configuring the grid search like this
.ToolBar(tools => tools.Search())
.Search(s => { s.Field(c => c.IncidentEvent); })
Is there a way to set the "Search..." text, without having to write custom Jquery code?
I mean I know it can be achieved by doing:
$(".k-grid-toolbar .k-input")[0].placeholder = "Search Incident Event...";
But is there really no better and cleaner way?
ToolBar.Search.Text is what you're looking for: https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridToolBarSearchCommandBuilder#textsystemstring
The alternative would be to set the ToolBar.Search.Template and set it manually: https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridToolBarCommandFactory#templatesystemstring
I'm trying to find a way to remove the time headers from the kendo scheduler. I've come across a few ways to do it via css, but they tend to leave the scheduler looking a bit "off".
I found some answers in the kendo docs detailing how to do it out of the box with a javascript implementation, but I'm looking for MVC which I can't seem to find any mention of. I've tried and tried to figure out how to do this, but I can't seem to find the appropriate attributes to set.
The kendo MVC wrappers are effectively ASPX/Razor helper functions that generate a javascript implementation. So assuming the javascript solution in the link you provide contains the solution you need, it should be possible to replicate it using the MVC syntax.
Looking at telerik's solution, they manipulate the DOM with javascript in the dataBinding event for Ungrouped and in dataBound for Grouped. You can specify handlers for these events when declaring the scheduler with MVC syntax:
.Events(e => {
e.DataBound("scheduler_dataBound");
e.DataBinding("scheduler_dataBinding");
})
...and then include the implementation of these functions on the page separately (code lifted from the telerik solution):
<script>
function scheduler_dataBound(e) {
var tables = $(".k-scheduler-times .k-scheduler-table");
//Required: remove only last table in dataBound when grouped
tables = tables.last();
var rows = tables.find("tr");
rows.each(function() {
$(this).children("th:last").hide();
}
function scheduler_dataBinding(e) {
var view = this.view();
view.times.hide();
view.timesHeader.hide();
}
</script>
//for hiding time header
$('#schedulerID').find('.k-scheduler-header-wrap').closest('tr').hide()
//for hiding date header
$(".k-scheduler-layout tr:first .k-scheduler-table").find("tr:eq(0)").hide()
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
I want to change style references inside head tag when partial view is loaded to page with ajax. What is the logical way to accomplish this?
For replacing the style-sheet you can remove the existing one add a new one like below.
Remove existing style-sheet
$("link#mystylesheet").remove();
Add new stylesheet
var link = $("<link>");
link.attr({
id: 'mystylesheet',
type: 'text/css',
rel: 'stylesheet',
href: '/Content/themes/super/style.css'
});
$("head").append(link);
Not sure of your setup, but how about namespaced styling rules? Then after your AJAX load, do something like $('body').addClass('someAjaxyClassName');
I am able to write in my MVC 3 view:
#Html.TextBoxFor(model => model.Something, new { style = "display: none;" })
But how can I do the same with a LabelFor?
To explain why: I am hiding the label initially but using JQuery to show this label at a later point. I guess I can use JQuery to initially hide it as well, but I would rather do it this way is possible.
Have a look at this post How to specify ID for an Html.LabelFor<> (MVC Razor)
Personally I'd suggest you wrap the TextBox and Label in a containing div, set that element to display:none and have JQuery show/hide the containing div rather than the individual elements.