On a page (partialView), I have a kendo grid with a detailTemplate.
$('#myGrid').kendoGrid({
detailTemplate: kendo.template($("#template").html()),
My template is like
<div id="template">
<table style="background-color:#EE00EE">
<tr>
With IE, the page load correctly, but not with Chrome or FF.
If I take off style="background-color:#EE00EE" , then it is ok.
Thank you for any help.
It is recognized as kendo template and in kendo template you are accesing js variables with # tag, becouse of that kendo is trying to read variable with name EE00EE that does not exists. You need to escape # tag like this: \\#EE00EE or use standard colors or use rbg filter.
Example: escape # tag in template
Related
I'm working on a tutorial page with Angular on which I want to show some code in: 'Java', 'TypeScript', 'C#', 'Html'. I know there is a snipped called , but that seems to be not that what I want.
For example:
My uploaded image shows a code snipped in different colors which I got from material.angular.io/components. Is there a simple way to define this code as an component in the appropriated Style in which the code should look like, like the example image, also defined in different colors?
This component from the image would be great, because of the copy button at the right. Has anybody an idea if this component already exist?
enter image description here
Using <pre> and <code> it would be possible to display code blocks with the use of innerHTML.
<pre>
<code [innerHTML]="code"></code>
</pre>
Java Code
<pre>
<code [innerHTML]="java_code"></code>
</pre>
https://stackblitz.com/edit/angular-display-code-snippets-in-html-page-e61cdd?file=src%2Fapp%2Fapp.component.html
What you probably want though, is also prettified and colored code blocks. For that there are packages available for use.
E.g ngx-highlights: https://www.npmjs.com/package/ngx-highlightjs
Demo: https://ngx-highlight.netlify.app/
I have a page that allows users to customise a design before downloading it. I have a list of designs that when clicked on display a different HTML layout. These HTML layouts are stored in a database as a string of HTML. To display these, i use:
<div [innerHTML]="myDesignHTML | safeHtml"></div>
As super basic example of one of the HTML strings is the following:
<div id="wrapper">
<div id="content">
<div id="title">titleText</div>
</div>
<div id="footer">
<p>footerText</p>
</div>
</div>
As I can't perform data binding on the actual HTML template that's inserted, I find the IDs of the elements and replace the 'placeholder' text with real user data. The issue I'm having is that my page also needs the ability to change colours of elements on the page. I've partially achieved this by doing the following for example:
document.getElementById("content").style.backgroundColor = color;
However, this doesn't always correctly update the DOM and feels a bit sketchy. Is there anything within Angular that allows the same functionality as [ngStyle] but within dynamic HTML templates that are inserted through [innerHTML]? When the user wants to change the colour of the background, or the text, it would be great to have a variable in the component.ts that get's updated and for the HTML template to react like [style.border-top-color]="mainCOlor" or something of the sort?
It seems that you can use the Renderer2 (see https://angular.io/api/core/Renderer2) in Angular. You would want a template reference do your div, and then you would use the nativeElement property to pull the current template. This is a better way to interact directly with the HTML inside of a div.
I am creating a site with custom components where I need to display the Html and Razor code snippets for the components so they can be copied by others.
For example if the component in the view is the following:
<div class="k-content">
#(Html.Kendo().DatePicker()
.Name("datepicker")
.Value("05/12/2018")
)
</div>
I want to be able to display exactly how it is coded in the view, so the view would look the same. That way someone can see the code, and copy and paste it on the view.
I have tried using pre tags but that does not work. The only way I was able to do it was to use a tool to encode the < tags and > tags. See below:
<pre>
<div class="k-content">
#(Html.Kendo().DatePicker()
.Name("datepicker")
.Value("05/12/2018"))
</div>
</pre>
Is there a better way to do this? Is there an elegant solution?
In my TextArea, I'm using CKEditor as a mixins, and all changes, include the formatting goes to my DB. How to display it as formatted text, which means if HTML is <b>My Name</b> is <i>Hobas</i> will displayed as My Name is Hobas. I've tried JSoup but it looks like that lib doesn't support this job.
Use the OutputRaw component in your template (.Tml) file:
See http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/OutputRaw.html
I have a DIV HTML element that displays some HTML from a variable:
<div contenteditable="true"
ng-bind-html="renderHtml(currentOperation.description)"
ng-model='currentOperation.description'></div>
It renders just fine.
When I type text into the DIV the changes are NOT reflected in the scope variable currentOperation.description
I need a 2 way street here, as is the case with all Angular variables using ng-model
I think you need 2 different things in your case. I would have one to write the content as text, and one to display it. Then either you have the 2 of them like a preview mode, or you use a 3rd variable to know if you are in edit mode or not.
For example:
<textarea model="description" ng-show="edit"></textarea>
<div ng-bind-html="description" ng-show="!edit"></div>
But the best would be to use a WYSIWYG tool I guess. Most of them allow you to write your own HTML. I use this one https://github.com/fraywing/textAngular