I had a issue before, datagrid use to display code for special character like for & it used to come '& amp;' To resolved that I used dxTemplate.
<dx-data-grid ...>
<dxi-column dataField="taxTreatmentDesc" cellTemplate="cellTemplate"> </dxi-column>
<div *dxTemplate="let data of 'cellTemplate'">
<span [innerHTML]="data.value"></span>
</div>
</dx-data-grid>
Now I see same issue when the cell is on editable mode.
What could be the fix for this?
Related
When wiring together Trix editor content with Livewire, I am stumbling into problems. I believe that the issue is that when Livewire receives content from Trix, the content is swapped out and Trix becomes disabled. Is there a better way?
What I have done, that works, is as follows. At the moment, the page is the redirected to itself in order to reboot Trix (defeating the whole point of Livewire, but it's being used for other things too).
<div>
<input
id="newCommentTextTrixContent"
type="hidden"
wire:model="newCommentText"
>
<trix-editor
id="newCommentTextTrixEditor"
input="newCommentTextTrixContent"
></trix-editor>
<button wire:click="addComment(document.getElementById('newCommentTextTrixEditor').innerHTML)">Add Comment</button>
</div>
I have tried
wire:model on the hidden input -- nothing happens
x-on:trix-change="$set('comment', $event.target.innerHTML) -- this works, but Trix goes grey and ceases to work after the first keypress (reboot problem?)
I'm sure something like the latter is better, but with Trix somehow being rebooted each time. It all seems a bit messy - so the question is, what's the right way to do this?
I got it working. With up to date Livewire and Alpine installations, the code is roughly as follows.
<div wire:ignore>
<trix-editor
class="formatted-content"
x-data
x-on:trix-change="$dispatch('input', event.target.value)"
x-ref="trix"
wire:model.debounce.60s="newCommentText"
wire:key="uniqueKey"
></trix-editor>
</div>
Why does this work?
You need wire:ignore on the parent node, because Trix inserts the toolbar above the text area. wire:ignore stops Livewire from worrying about it and therefore not removing it or messing with it on the next cycle.
You need a wire:key because the DOM moves around a bit, and this helps Livewire to keep track of it.
I propose the long debounce, which is a hack as the .lazy modifier doesn't work well with text. Also, waiting for Ajax on each key press is painful.
The alpine event ensures that Trix events (like bold, italics etc) are still fired
That's it. I use this above to repetitively submit comments onto the end of a comment stream, and everything seems to work fine. Good luck!
Note, I also have CKEditor working similarly, as described here.
As an extension on #Kurucu 's answer, and the comment under it from #Rehan;
This seems to work very well. But when I apply styles like li or bold
it doesnt retain in the wire:model. Ex:
<div>foo<br>bar<br>foobar</div> I applied the Bullets here the tags
are missing. Did you face this issue? – Rehan
To fix the issue of not having an updated value when pressing buttons bold, italic, or quote for example, add the following part to the trix editor (note the x-on:trix-change="$dispatch('input', event.target.value)"):
<div wire:ignore>
<trix-editor
class="formatted-content"
x-data
x-on:trix-change="$dispatch('input', event.target.value)"
wire:model.debounce.1000ms="newCommentText"
wire:key="uniqueKey"
></trix-editor>
</div>
The above option works but wasn't getting the data back from my field, Here's what worked for me with a little tweak using AlpineJS's #entangle.
Below is my working solution:
<div class="mb-2" x-data="{ description: #entangle('description').defer }"
x-init="$watch('description', function (value) {
$refs.trix.editor.loadHTML(value)
var length = $refs.trix.editor.getDocument().toString().length
$refs.trix.editor.setSelectedRange(length - 1)
}
)" wire:ignore>
<label class="form-label">Job Description <span class="text-danger">*</span></label>
#error('description')
<span class="error d-inline-block"><i class="mdi mdi-alert-circle"> </i> {{$message}}</span>
#enderror
<input name="description" id="description" type="hidden" x-model="description">
<div x-on:trix-change.debounce.1000ms="description = $refs.trix.value">
<trix-editor x-ref="trix" input="description" class="overflow-y-scroll"
style="height: 20rem;"></trix-editor>
</div>
</div>
I got it to work by using Trix's built-in events.
<input id="about" name="about" type="hidden" value="{{ $about }}">
<trix-editor input="about" class="wysiwyg-content"></trix-editor>
<script>
var about = document.getElementById("about")
addEventListener("trix-change", function(event) {
console.log(about.getAttribute('value'));
#this.set('about', about.getAttribute('value'))
})
</script>
How to select Actions Button followed by the Div class containing known Text ( for example, card_header-title"Addresses" in this case) in Robot Test Framework?
The page contains several span table sections and each of them has its own actions and show-history buttons. To select the specific Actions button, I could use its xpath, but I am trying to access all sections in a for loop and the xpath of actions button in one section changes from the other, so hard coding is not an option for me. Would someone please help.
<div class="attribute-group-header card__header">
<h3 class="attribute-group-title card__header-title">Addresses</h3>
<div class="floatright">
<input type="button" class="action small btn" value="Actions">
<input type="button" class="showHistory action small btn" value="ShowHistory">
</div>
</div>
I know you say you don't want to use Xpaths but maybe one of these examples could help. I don't see any other way of achieving what you're asking for other than having id's supplied on the buttons.
You could use an xpath locator that first finds the text of the "attribute-group-title card__header-title" element and then selects the following sibling div, followed by the input:
//*[contains(text(),'Addresses')]/following-sibling::div[1]//input[#value='Actions']
I'm facing a small problem regarding Knockout JS databind on a span. I want to bind a number alongside a percentage symbol. My original HTML markup is this one:
<span>10</span><span>%</span>
Then, I'd try to make the number dynamic with the following expression (I'm forfeiting the JS as it works corrctly and I don't think it's necessary for my case):
<span data-bind="text: cartTotalPrice" /><span>%</span>
Misteriously, the that contains the % symbol disappears, only displaying the binded number. But then if I do the following, the number and the symbol are correctly displayed:
<span data-bind="text: cartTotalPrice() + '%'" />
Why does this happen? Is it normal?
Thanks.
I believe the problem is that you are not closing your span tag. Use an explicit closing </span>.
<span data-bind="text: cartTotalPrice"></span><span>%</span>
I'm using an editor control of ajaxcontroltoolkit.
<cc1:Editor ID="EditNews" runat="server" NoUnicode="true"/>
My problem is that when I try to get the content of Editor by:
Literal1.Text = EditNews.Content;
if in the editor there are breakLine for example "If I write"
Text Text
Text
Text
In Literal I get:
Text Text
Text
Text
Whitout breakLine.
I don't know if this problem depends by an attribute that I haven't set in Editor or I have to control this "" in Code Behind.
Thanks for help
I believe to understand the problem.
In effect is not a problem,but if you use the alignment (center,right, or left) and then directly you try to do breakline it doesn't work because in html it generate:
<p style="text-align: center; margin: 0px"></p>
If you don't use alignment and try to do breakline then it generate in html
<br/>
and so work correctly!
Now, I have another problem with my editor, in fact If I try to write very hard text, my editor cut text!
If you want WYSWYG editor then just use FCK/CK Editor, those are really best ones.
Dear all, I save formatted text (bold, changed in font, style...etc) in an nvarchar(max) field, its for some Description field, on another stage, I want to be able to edit this description, so in the Editing Page, I read the original inoformation, fill it in the fields and wait for the user to change it and save, this is working for all kinds of normal text fields, and also with normal text displayed in a text area, but when I fill the text area with the styled text, it shows the HTML code and not it result, so for instance, it shows:
<span style="font-weight: bold; text-decoration: line-through;">SM</span><span style="background-color: rgb(51, 102, 255);">ART</span><br>
Instead of a what it should look like, any suggestions on how I can make the textArea (normal asp.net textbox with the mode set to multiline) display the HTML as it should look and not the code??
You can not display HTML result in TextArea/TextBox control. But to display HTML result you have many options.
As Schnalle said, best and the easy way to use an editor. Like tinyMCE or FCKEditor.
In a project I used a div to display and edit HTML content. It allows users to edit, copy, paste, make bold, make italic, .. etc. :
<div runat="server" ID="divContent" contenteditable="true">
Editable Area, set your content here...
</div>
Maybe you can combine textarea and div to do what you want.
you need a wysiwyg-editor like tinyMCE http://tinymce.moxiecode.com/
If you just want it to display the code, use < as <, and > as >.
Eg:
<textarea>
<html>
<body>
</body>
</html>
</textarea>