Revamping Text() into <span> Encoded HTML with Kendo UI

I need to customize the style of a panel bar from Kendo UI, specifically I want to divide the text "Blah-1 Blah-2" into two separate span blocks in HTML format, like <span>Blah-1</span> and <span>Blah -2</span>.

How can I achieve this with the code snippet below?

@(Html.Kendo().PanelBar()
  .Name("panelBar")
  .Items(panelBar =>
  {
    panelBar.Add().Text("Blah-1 Blah-2")
  })
)

I attempted to include <span> tags within the Text() function, but it did not escape the html tags as expected.

javascriptjqueryhtmlcsskendo-ui

Answer №1

Utilize the Encode method to disable HTML encoding (which is typically enabled by default):

@(Html.Kendo().PanelBar()
  .Name("panelBar")
  .Items(panelBar =>
  {
    panelBar.Add().Text("<span>Blah-1</span><span>Blah-2</span>").Encoded(false);
  })
)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger jQuery or Select2 event upon selection of specific value

I'm trying to use Select2 for a dropdown and I want to trigger an event (e.g. alert) when a specific value is selected from the dropdown. I've attempted the following methods, but none have worked: $(".js-dropdown").val(2)(function() { consol ...

jqueryselectdropdownjquery-select2

Using Vue.js and JavaScript to access a single variable across multiple class methods

I am working on organizing my custom channel logic into its own class. During the created lifecycle method, I am executing each method in the class I created. However, I am facing a challenge in retaining the instance of the socket that was created in the ...

javascriptvue.js

Utilize Browserify to Dynamically Load all Files within a Directory

As a newcomer to Browserify and JavaScript build systems in general, I find myself in a state of utter confusion. I have successfully set up Gulp for my builds, but recently I have been exploring Browserify to bundle my code, mainly to organize my code in ...

javascriptnpmgulpbrowserify

Click on a Marker to automatically zoom to its location using Leaflet mapping technology

I have successfully implemented a feature to display markers on the map from a geojson file. Currently, when I hover over a marker, I can see its properties in a popup. However, I now want to enhance this functionality so that when a user clicks on a mar ...

javascripthtmlleafletzoomingmarker

Using TypeScript to fetch properties from a class in a recursive manner

I'm having trouble utilizing the solution provided in this response to exclude functions when invoking the set method with class fields, as it results in the error message Type instantiation is excessively deep and possibly infinite.. I came across th ...

javascripttypescript

Iterate over an array of objects to showcase the property values within an HTML tag using JavaScript

I am a beginner in JavaScript and I am currently working on an exercise. My goal is to iterate through an array of objects within another object, map the index values from one object to the id values in another object, and based on that, perform a certain ...

javascript

Bring in the content to Notepad utilizing jQuery

How can I export data to Notepad? I have fields for Name, Age, and WorkingStatus that are input as text and textarea. Is there a demo or code available to help me insert this data into Notepad? ...

javascriptjqueryhtmlnotepad

The V-if condition is specifically tailored for a single line or link

I am attempting to conceal a link ("myprofile") beneath an image in VUE.JS when the if-statement is not met. However, when I insert the v-if inside the vue-router or div tag, the entire image/div-tag becomes hidden. How can I implement an if-statement that ...

javascriptvue.jsif-statementvue-componentvue-router

Setting up a new package through JPSM installation

I utilize jspm in my web application. My goal is to install the npm:angular2 package without needing to set it up in the config.js file. Instead of loading the angular2 module via jspm, I manually added the angular2 library like this: <script src="jspm ...

javascriptangularjspm

Trouble faced in deactivating form element using jquery, contrary to the faq illustration

I've been attempting to utilize jQuery to disable a form element, following the guidance in the FAQ Here's what I have tried so far. <script src="jquery-1.8.2.js"></script> <form name="myForm" action ="process.php" method ="post" ...

jqueryforms

Customize one header to display different banners on each page using PHP conditionals

I created my website for entertainment purposes and I decided to use different banners on each page. Currently, in my header section, random banners appear using the following code: <div style=' height:145px; background-image:url(images/banners/ba ...

phphtmlif-statementheaderbanner

Tips on updating state based on conditions in React?

I created a React SPA that mimics John Conway's Game of Life. Upon initialization or loading, the application must determine the height and width of the .gridContainer element to decide how many rows and columns to draw for the grid (refer to Ref 1). ...

javascriptreactjs

The footer is anchored at the bottom on one page but mysteriously relocates to the center on the next page

I've been working on creating a footer for my Angular application and here's the code for it: // HTML <footer class="footer"> // code for footer </footer> // LESS .footer { position: absolute; bottom: 0; width: 100% ...

htmlcssless

Establish a value for the attribute of an HTML tag

Can anyone assist me with setting the attribute value for the following HTML tag using Selenium WebDriver? For example, I need to change 50% to 70% either via JavaScript with WebDriver or a simple WebDriver script. I have tried several options but this pa ...

javascriptselenium-webdriver

What is the best approach for dynamically updating JSON values using user input in jQuery?

I have implemented a feature where users can enter values into 3 text boxes and upon clicking the add button, these values are added to a new JSON object and displayed in a table. Additionally, users can edit specific fields in the table which should updat ...

javascriptjqueryjson

How can I modify it so that it begins at the bottom left instead of the bottom right?

After stumbling upon this interesting codepen featuring a diagonal fill div on hover, I find myself wondering how to change the starting point of the fill from bottom right to bottom left. While it may seem like a simple task, I am at a loss on where to be ...

css

Implementing a Button Click Event Listener on a Separate Component in React

Currently, my React application incorporates MapBox in which the navbar is its parent component. Within the navbar component, there is a button that collapses the navbar when clicked by changing its CSS class. I also want to trigger the following code snip ...

javascriptreactjsmapboxaddeventlistenermapbox-gl-js

Adjust the width of the div by dragging one of its edges

My web application, which is built using Angular 2, features a two-panel layout. I am looking to implement the functionality to resize both panels by selecting either the right edge of the left panel or the left edge of the right panel. If you have any su ...

javascripthtmlcssangular

Handling JSON Errors with jQuery Iteration

Below is the JSON data that I currently have: {"4":"Necklaces","1":"Earrings"} My goal is to loop through this content in order to populate the Dropdown list. $("#ProductProductTypeId").change(function(){ var product_type_id = $(this).val(); ...

jqueryjson

How can we prevent the modal from extending beyond the boundaries of the phone screen when zoomed in

I am currently developing a web application that features a large content page, specifically a map which should display detailed information upon zooming in similar to Google Maps. The interactive elements on my map are clickable, triggering a modal popup ...

javascriptcssangularjstwitter-bootstrapbootstrap-modal