jqgrid convert text - javascript

I'm not sure how to call this so any suggestion to change the title is welcome.
I'm trying to convert a quite large text to something like 'just show some characters...'.
Obviously the large text begins with same string but it's much longer.
My grid is read-only and I'll show the whole data into a dialog when users click each row.
The input field (in another page) is a text area so users can write down huge data to be show in the grid. I would like to keep each row with same height.
Also I know I have to sanitize the text to avoid special characters and new lines
I guess it should be a colModel option to do that but I couldn't find it.
Something like that:
colModel :[
{name:'notes', index:'notes', maxcharlength: 20},
Many thanks.

You can make a CSS class that will clip the text and show ellipses and assign it to the column using the classes attribute. The CSS class would look like this:
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Then assign it to the column like this:
colModel :[
{name:'notes', index:'notes', maxcharlength: 20, classes: 'ellipsis'},

At the end and thanks to Oleg's links I could fill the grid stripping html and showing ellipsis in this way:
First a css:
.ui-jqgrid tr.jqgrow td.textInDiv div {
max-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
Second a custom formatter on the column:
colModel :[
{name: 'notes', classes: "textInDiv",
formatter: function (v) {
return '<div>' + jQuery.jgrid.stripHtml(v) + '</div>';
}
}
]
Notes come from server as html so please note the jqgrid function to strip html tags.
In Oleg's links he uses jqgrid.htmlEncode to escape tags.
Hope this helps to others.

Related

How to highlight text which is hidden under ... due to text-overflow:ellipsis

Im implementing a highlight word functionality based on keyword in the search.
So based on the keyword im replacing the content with span tag and adding class as "highlighted-text"
value = value.replace(RegularExpression, `<span class="highlight-text">${value.match(re)[0]}</span>`);
CSS for highlighted-text
.highlighted-text{
background:yellow;
}
and im also using this css to achieve clipping of text with 3 dots. As you can see in picture below.
.message{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
So its working fine
But let me search for word which is hidden inside clipped text ie. "..." like "hockey"
So its not showing up as its hidden. I want to show the user correctly highlighted text with its before text and after text to some limit.Is there any ideal way we can achieve this is in javascript or css?

css Ellipsis, event on 3 dots hovering

I have a little question, i have too long text in my cell in table in html, so i use text-overflow property set on ellipsis in css like in this example from w3c: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
and I wonder if I can make for example that popup will show up after hover on that 3 dots on the end of text, is that possible without complicated js code? Or i have to make my own piece of code that will show 3 dots instead of rest of text and then attach on hover function to them or something ?
You can use title attribute of element to achieve your objective without writing any extra code. Just run following snippet and hover over the text to see the result.
.ellipses {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
<div class="ellipses" title="This is some long text that will not fit in the box">This is some long text that will not fit in the box</div>

Dojo filtering widget data overflow

I'm working on dojo 1.6 and I use a dijit.form.Select widget.
The problem I'm facing now is when I select a long text from the dropdown, it goes beyond the width of the widget. I want the string to be enclosed in the width allotted to the widget. I tried using the overflow: hidden attribute but it is not working. Please help. Here is the code segment which I'm working on.
this.dapNAME = new dijit.form.Select({
name : "NAME",
placeHolder : 'Enter Name',
maxHeight : -1,
style : {width: '265px'}
}, this.dapNAME);
I have taken the answer from this link
There is another link which might help too.
you need to style your css. Remember to replace the tundra style with whatever style ( claro, nihilo, etc..) you have chosen for your site.
.tundra .dijitSelect .dijitButtonText {
text-align: left;
}
.tundra .dijitSelectLabel {
width: 120px;
overflow: hidden;
}

Kendo Grid cell : How to automatically trim the text to avoid the line breaking?

I have column with width 200 px, i cell is containing text longer than appx. 30 chars is text broken into two lines which is not looking good.
I would like to ask, how i can trim cell value to the given maximal length?
I can do it in template but it should be changed in all columns.
Is there any configuration directive for this?
Many Thanks for any advice.
There is not straight-forward configuration in Kendo. You can achieve this using CSS.
You can show elipsis (...) for large text in cells :
.k-grid td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
to show the complete cell text, you can either use Tooltips or Modal popups depending upon your requirement.

Limit text to x number of lines and append '...'

I am looking for a Javascript/jQuery + CSS way to limit a text (for example a product name) to say, 2 lines. But the visitors need to know that it is truncated and therefore I will need to append '...' at the end.
The original way I thought of doing this was to put the text in 1 line, measure the width of it and cut it off just before the text reaches 2 times the width of the containing div, but it seems tricky as each character probably needs to be caculated for its width rather than that.
Limiting it to number of characters or words will not work in this case - I would like to fully fill the 2 lines of that div every time, instead of having gaps.
Is there a nice way to achieve this instead of using a monospaced font?
Since you're using jQuery try these plugins:
http://dotdotdot.frebsite.nl/
https://pvdspek.github.com/jquery.autoellipsis/
https://github.com/theproductguy/ThreeDots
https://github.com/jjenzz/jquery.ellipsis
We can use css for this:
.truncate {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block; /* for links */
}

Categories

Resources