I'm trying to add a font awesome icon into a kendo UI ASP.NET Menu. Unfortunately I can't find an example at Kendo on how to do it. The code is as follows:
#(Html.Kendo().Menu()
.Name("PreferencesMenu")
.HtmlAttributes(new { style = "width: 125px; height:900px; border:0px;" })
.Direction("down")
.Orientation(MenuOrientation.Vertical)
.Items(items =>
{
items.Add()
.Text("Account");
items.Add()
.Text("Notification")
.Items(children =>
{
children.Add().Text("Email");
});
items.Add()
.Text("Theme");
})
)
Does anyone know how I could add a font-awesome icon before the .Text("Account"); ?
This seemed to work for me with a sample project.
If you change the .Text("Account")
To this
.Text("<span class=\"fa fa-arrow-up\"></span> Account").Encoded(false)
That should then show an arrow up next to Account. (Obviously change the Font Awesome element to one that you want.
edit: I have added the following sample for you showing this working at multiple levels and adding the font's at the child level
#(Html.Kendo()
.Menu()
.Name("men")
.Items(item =>
{
item.Add()
.Text("<span class=\"glyphicons glyphicons-ok\"> </span>some item")
.Items(i =>
{
i.Add().Text("<span class=\"glyphicons glyphicons-plus\"></span> Hello").Encoded(false);
}
)
.Encoded(false);
item.Add()
.Text("<span class=\"glyphicons glyphicons-thumbs-up\"> </span>some item")
.Items(i =>
{
i.Add().Text("Hello");
})
.Encoded(false);
})
)
The reason for setting .Encoded(false) is so that the rendering engine just passes the data and assumes it is safe code to write out it is the equivalent of doing
#Html.Raw("<p> some html here</p>")
By setting it to true the system just treats the incoming text as a string and doesn't try to interpret the text and then apply any "html/javascript" recognition eg. <p>I'm a paragraph</p> if encoding is set to true would render out as <p>I'm a paragraph</p> if false would give you the I'm a paragraph as it's own paragraph and the markup would be applied to the page.
Related
I am developing a website using VueJS, and Kentico Kontent as a CMS. This CMS offers the "rich text" feature, basically allowing text content to embed links and basic formatting, which gets automatically converted into HTML when served through the API.
I have no problem displaying the HTML content using the v-html directive, but I cannot think of a way to set the attributes of the inner <a> tags to _blank, so that the embedded links open new windows when clicked.
Is there any elegant way to do this without having to parse the HTML from the Front-end?
You could create a directive:
Vue.directive('links-in-new-window', {
inserted: function(el) {
const anchors = el.querySelectorAll('a')
anchors.forEach((anchor) => anchor.target = "_blank")
}
})
And just apply that to the same element you're using the v-html on:
<div class="content" v-html="content" v-links-in-new-window></div>
In vue V3 the directive would look like this:
app.directive('links-in-new-window', {
mounted: function(el) {
const anchors = el.querySelectorAll('a')
anchors.forEach((anchor) => anchor.target = "_blank")
}
})
HTML is the same, remember to use v- => v-links-in-new-window
<div class="content" v-html="content" v-links-in-new-window></div>
I want to take a tag and replace with a #Html.textarea() razor html helper but it doesn't look as if JQuery can replace DOM elements with html helpers. How do I go about this?
using(#Html.BeginForm())
{
<a id="clickme">Edit</a>
<div>#Model.username</div>
}
How can I replace this div with #Html.Textarea ? JQuery could do it with div and input tags.
jQuery cannot replace a tag with #Html.TextArea() !
The TextArea helper method is a C# method, which gets executed when razor tries to render the view. This happens in your web server. jQuery is a client side library and anything you do with jQuery happens at client side, in your browser.
But all these helper methods ultimately generate some HTML for DOM elements. That means, you can use jQuery to manipulate visibility of that.
If you are trying to do something like an inline edit, you can use a script like this , to start with
First, render the text area along with your label div, but have it hidden initially. Also wrap the label,edit link and the hidden input inside a container div which we can use later to help with our jQuery selectors.
#using (#Html.BeginForm())
{
<div class="edit-item">
Edit
<div class="edit-label">#Model.FirstName</div>
#Html.TextAreaFor(a => a.FirstName,
new { style = "display:none;", #class = "edit-text" })
</div>
<div class="edit-item">
Edit
<div class="edit-label">#Model.UserName</div>
#Html.TextAreaFor(a => a.UserName,
new { style = "display:none;", #class = "edit-text" })
</div>
}
Now when the user clicks edit, you have to toggle the visibility of the label and hidden input and update the value of label after user done editing the value in the input element.
$(function () {
$("a[data-mode]").click(function (e) {
e.preventDefault();
var _this = $(this);
var c = _this.closest(".edit-item");
c.find(".edit-text").toggle();
c.find(".edit-label").toggle();
if (_this.attr("data-mode") === 'label') {
_this.attr("data-mode", 'edit');
_this.text("done");
} else if (_this.data("mode") === 'edit') {
c.find(".edit-label").text(c.find(".edit-text").val());
_this.text("edit");
_this.attr("data-mode", 'label');
}
});
});
This is a head start. You can optimize this code as needed.
Here is a working jsfiddle for your reference
We are on sitecore 8.1 GlassMapper 4.4.1.188.
We are rendering an image in an anchor like below:
using (BeginRenderLink(item, x => x.CarouselLink, isEditable: true))
{
#RenderImage(item, x => x.CarouselImage, isEditable: true)
}
All works well.
How can we force Renderlink to insert Html Target attribute based on sitecore input from General Link?
So, if content editor picks "External link" we need link to be generated with target="_blank"
When you select external link, use New browser option:
This is cshtml code:
#using (Html.Glass().BeginRenderLink(Model, x => x.Link))
{
<span>aaa</span>
}
and this is html output:
<span>aaa</span>
I am implementing a view where there are tabs (Kendo TabStrip) and inside these tabs are some accordion items (Kendo PanelBar).
I dinamically draw the tabs using a foreach, and in each tab, I also use a foreach to draw the accordion. The thing is that, the content of each accordion item is a HTML string (like: <p>Some <strong>text</strong></p>).
In chrome all work fine, but with IE8 everything goes out (because the page HTML mixes with the string HTML).
This is my code:
#(Html.Kendo().TabStrip()
.Name("tabAyuda")
.HtmlAttributes(new { style = "" })
.Animation(false)
.SelectedIndex(0)
.Items(tabAyuda =>
{
foreach (KeyValuePair<string, IList<ElementoAyuda>> accion in Model)
{
if (!string.IsNullOrWhiteSpace(accion.Key))
{
tabAyuda.Add().Text(accion.Key)
.Content(#<text>
#(Html.Kendo().PanelBar()
.Name("panelbar" + accion.Key)
.ExpandMode(PanelBarExpandMode.Single)
.Items(panelbar =>
{
foreach (ElementoAyuda elemento in accion.Value)
{
panelbar.Add()
.Text(elemento.Head)
.Content(elemento.Detail);
}
})
)
</text>);
}
}
})
)
I've also tried with this code inside .Content:
.Content(#<text>
#Html.Raw(elemento.Detail)
</text>)
But I get this error: Custom tool error: Inline markup blocks (#<p>Content</p>) cannot be nested. Only one level of inline markup is allowed.
Any advice??
Thanks in advance!
Solved, it was my fault. Some of the HTML strings had invalid syntax, but somehow in Chrome works XD
I hope this is an easy question. I have some #Html.ActionLink in my navbar that when I hover over them the browser displays a little tooltip that gives the page name. I do NOT want this to happen. Its probably bad practice to take this default functionality out but I need to. I don't know where or how to do this though.
I can't test this right now, but the tooltip is coming from the title attribute, you should be able to empty that out like:
#Html.ActionLink("Home", "Index", "Home", null, new { title="" })
If that doesn't work, perhaps a jQuery solution:
$('a').attr('title', '');
#Html.ActionLink("Button Text", "ActionName", "ControllerName", new { para_name = param_value} , new { #class = "btn btn-info btn-sm", #title="text you want to see when hovering" });