This is a migrated thread and some comments may be shown as answers.

How can I make the value obscured behind the template visible?

6 Answers 9 Views
Grid
This is a migrated thread and some comments may be shown as answers.
NHJ
Top achievements
Rank 1
NHJ asked on 18 Dec 2019, 09:00 AM

Hi,

I am currently using the <A href> tag button as a template feature for column cells.

I want the button and the value I entered directly in this cell to be displayed at the same time.

[Value {button}]

Think of {} as a button.


The ideal solution is
[Value | {button}]
I want to have a value and a button area in one cell.

No matter how long the value is, it must not extend beyond the button area.

But the most important thing is to make the value visible first.

The current value is entered, but because the transparent area of the small button covers the entire cell (which is my reasoning), the value is hidden and invisible.
(Click the cell for correction and you will see the value. If it goes out of focus, it will be hidden again.)

How can we solve this?

 

 

columns: [
                {selectable: true, width: "35px"},
                {field: 'fnProdInOutSeq', hidden: true},
                {field: 'lotNo', title: '입고 Lot', width: 100},
                {field: 'prodNm', title: '품명', width: 100,
                    template:
                        "<a href='javascript:' class=\"k-icon k-i-search\" onclick='return fnObj.gridView03.gridFn.searchComp(\"#=  prodNo  #\")' style='float:right'> </a>"
 
                }
]

6 Answers, 1 is accepted

Sort by
0
Accepted
Tsvetomir
Telerik team
answered on 20 Dec 2019, 08:37 AM

Hi Nam,

Based on the provided information, I assume that the value of the field and the button next to it is a suitable approach for you, is that correct? If so, you could try alternating the template as follows:

template:
                        "#=prodNm# | <a href='javascript:' class=\"k-icon k-i-search\" onclick='return fnObj.gridView03.gridFn.searchComp(\"#=  prodNo  #\")' style='float:right'> </a>"

Alternatively, you could wrap the #=produNm# template inside an HTML element such as a div or a span.

Let me know how the suggestion above works out for you.

 

Regards,
Tsvetomir
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
NHJ
Top achievements
Rank 1
answered on 20 Dec 2019, 04:17 PM
Thank you very much.

You understood my intentions exactly.

It was a very simple and clear best answer.
0
NHJ
Top achievements
Rank 1
answered on 21 Dec 2019, 03:43 AM
Oh, I found a problem.

Can you fix the problem of line breaks when columns are too long?

The phenomenon is like a picture.

If it is not too long, it is displayed normally.
0
Tsvetomir
Telerik team
answered on 23 Dec 2019, 02:39 PM

Hi Nam,

If you would like to prevent the grid's cells from wrapping, I would recommend taking advantage of the following CSS rule:

.k-grid td{
  white-space: nowrap;
}

 

Regards,
Tsvetomir
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
NHJ
Top achievements
Rank 1
answered on 25 Dec 2019, 07:00 AM
I know that CSS is an anti-wrapping option, but it doesn't work in this situation.

If you turn off the float: right option, the line break will not work, but the k-icon will disappear due to the long string.

If you use float: right, you still get line breaks.

Is this solution the right solution?
0
Accepted
Tsvetomir
Telerik team
answered on 25 Dec 2019, 12:23 PM

Hi Nam,

Even though the prodNo is a long string and could be shortened by setting the nowrap CSS rule, the element that holds it would still have its width. What I can recommend is to manually adjust the position of the anchor tag. Here are the updated snippets:

          template: "<span>#: prodNo #</span><a href='javascript:' class=\"k-icon k-i-search\"></a>"

And the CSS needed to style the cell:

   <style>
      .k-grid td {
        position: relative;
      }
      .k-grid td span{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .k-grid td a.k-i-search {
        position: absolute;
        top: 8px;
        right: 0;
      }
    </style>

Check out the updated Dojo sample at:

https://dojo.telerik.com/otIRuxUQ

 

Regards,
Tsvetomir
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
NHJ
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
NHJ
Top achievements
Rank 1
Share this question
or