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

[NHJ]

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>"

                }
]

[Tsvetomir]

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

[NHJ]

Thank you very much.

You understood my intentions exactly.

It was a very simple and clear best answer.

[NHJ]

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.

[Tsvetomir]

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

[NHJ]

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?

[Tsvetomir]

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