I have a form using grids and when i show the data using the display mode, the size of the fields dynamically changes to the size of the data in the fields. This is Great!
but, when i hit Edit the fields go back to uniform size and you either have to expand the box manually or use the scroll bar to see all the data. any way to get the fields to show all the data in edit mode just like display mode? here are the examples...
The case here is in the Plain text height. You can adjust the height of the input to the content using this code:
fd.spRendered(function() {
//Replace FieldName with the internal name of the field
var textArea = fd.field('FieldName ').$refs.textarea;
function recalcHeight() {
textArea.style.height = (textArea.scrollHeight > textArea.clientHeight) ? (textArea.scrollHeight) + "px" : "120px";
}
recalcHeight();
$(textArea).keyup(recalcHeight);
});
Note, that this code works for Plain Text fields only.
You can use this code to adjust the height of the rich text input to the content.
fd.spRendered(function() {
//Replace RichText with the internal name of the field
fd.field('RichText').ready().then(function(field) {
var editor = $(field.$el).find('.k-editor');
function recalcHeight() {
var actualHeight = Math.round(editor.height());
var conetntHeight = field.widget.document.body.scrollHeight;
var newHeight = (conetntHeight > actualHeight) ? conetntHeight + 100 : actualHeight;
editor.height(newHeight);
}
recalcHeight();
setInterval(function(){ recalcHeight(); }, 1000);
});
});