CODEWITHSUNDEEP
javascripthtmlkendo-uitelerikkendo-grid
unicorn2
unicorn2

Reputation: 871

Sizing textarea inside kendo grid

I need an inline textarea inside a kendo grid to allow the user to edit a string value. I want to use a textarea because the value can be quite long. I am using a custom editor to achieve this like mentioned here: http://www.telerik.com/forums/how-to-change-input-to-textarea-in-popup-editor

I am setting the width and height of the textarea to be the same as the container's

$('<textarea data-text-field="Label" data-value-field="Value" data-bind="value:' + options.field + '" style="width: ' + container.width() + 'px;height:' + container.height() + 'px" />')

This doesn't seem to work. When I inspect the height of the textarea element in my developer tools before I click on the cell to edit, it shows as 35px and after as 47px. This causes the rest of the grid to move down.

http://dojo.telerik.com/@unicorn2/eCAkU

Upvotes: 1

Views: 5495

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

That happens because you can't just use the container's height as height of an element inside itself, in that case. The row has other spacing properties like padding, for instance. In a simple and quick shot I came through this:

$('<textarea data-text-field="Label" data-value-field="Value" data-bind="value:' + options.field + '" style="width: ' + (container.width() - 10) + 'px;height:' + (container.height() - 12) + 'px" />').appendTo(container);

Demo.

Just by decreasing a little the container's dimensions it fits the row height very nice. The only problem is with break lines, because when the editor callback is called, the content of the container is reset and the row's height becomes like if was a single line. Then the container.height() returns a single line height.

Upvotes: 2

Related Questions