WDG Multline textboxprovider - setting number of rows

170

Peter Burrows posted over 2 years ago

when a user clicks in the multiline tb provider to edit existing text or add a new row, i would like to increase the number of rows to 10

Currently, the textbox has only enough rows to accommodate the text - even though i set it to 10 in the provider

I would like to increase this in the cell edit entering event, if possible

I have this so far

function grid_CellEditing_EnteringEditMode(sender, e)
{

var c = e.getCell();
var key = c.get_column().get_key();

// Add a new line to log_text
if (key == "log_text")
{
var t = c.get_value();
// Add a blank line and, ideally, set cursor to end
if (t != "")
c.set_value(t + "\r\n");

i need to do something equivalent to

c.rows.count = 10

markup

Thanks!

Parents

1700

Offline Ivan Kitanov posted over 2 years ago

Hello Peter,

This could be achieved by changing the value of the cell that contains the Multiline TextEditorProvider and adding the empty lines in the EnteredEditMode event of the grid, after the user has finished editing the cell value, the ExitedEditMode event should be used and the value of the cell should be trimmed in order to not save the empty lines at the end. In case you would like to use the enter for creating new line inside the cell, the ExitingEditMode event could be used, the enter key press should be checked and the ExitingEditMode should be cancelled to retain edit mode.

I am pasting the code for the events below:

function WebDataGrid1_CellEditing_ExitingEditMode(sender, eventArgs)
    {
	    if (eventArgs.getCell().get_column().get_key() == "Site") {
            if (eventArgs.get_browserEvent().keyCode == 13) {
                eventArgs.set_cancel(true);
            }
        }
    
    }

    function WebDataGrid1_CellEditing_EnteredEditMode(sender, eventArgs) {
        var cell = eventArgs.getCell()
        if (cell.get_column().get_key() == "Site") {
            var cellValue = cell.get_value() + "\n" + "\n" + "\n" + "\n" + "\n" + "\n" + "\n" + "\n" + "\n" + "\n";
            cell.set_value(cellValue);
        }
    }

    function WebDataGrid1_CellEditing_ExitedEditMode(sender, eventArgs) {
        var cell = eventArgs.getCell()
        if (cell.get_column().get_key() == "Site") {
            var cellValue = cell.get_value();
            cellValue = cellValue.trim();
            cell.set_value(cellValue);
        }
    }

Please let me know if you have any questions.

Regards,
Ivan Kitanov

170

Offline Peter Burrows posted over 2 years ago in reply to Ivan Kitanov

Further to that, do you know a way of setting the cursor at the end ready to type ? Currently it selects the contents and user needs to click at the end.

Also, a related question.

When i add a row (in javascript) the formatting is a little wonky. a skinny text box is added below the new line. when i click in the field, it is ok, but it looks weird and is going to confuse the users

I appreciate your help. Thanks

Here is markup

var grid = GetGrid();
var rows = grid.get_rows();
var rowsLength = rows.get_length();

// Create array of cell values for all values that cannot be null.
var est = new Date().toLocaleString('en-US', { timeZone: 'EST' });
var row = new Array(est, "", "", "\n\n\n\n\n", false, "<%=Master.UserName%>", "");

rows.add(row);

var lastRow = rows.get_row(rowsLength);
var cell = lastRow.get_cell(c_col_sci);
grid.get_behaviors().get_editingCore().get_behaviors().get_cellEditing().enterEditMode(cell);
Cancel
Reply

Cancel
1700

Offline Ivan Kitanov posted over 2 years ago in reply to Peter Burrows

Hello Peter,

Instead of setting the row count, what could be done is increasing the height of the rows of the WebDataGrid, which would achieve the same effect. Regarding your questions about placing the carret at the end of the cell, what you could do is using the SelectionOnFocus property of the TextEditorProvider and set it to “CaretToEnd”.

I have created a small sample to demonstrate what I have explained above, however I wasn’t able to reproduce the behavior you mention when the row is being added. I am using both the RowAdding UI and javascript code to add a row and there are no issue in regards to the TextEditorProvider set for the field, there is no shrinking of the provider at all.

Please test the sample on your side and let me know if you have any questions.

Regards,
Ivan Kitanov

MultiLineTextEditorCaretToEnd.zip
Cancel
Reply

Cancel

Reply

170

Offline Peter Burrows posted over 2 years ago in reply to Ivan Kitanov

I am have much of this working, but still not ideal.

I used the texteditorprovider and set caret to end, which works.

the problem is, in order to increase the editing area, i added 5 blank lines, as you suggested.

But the caret is entered after those blank rows.

What i would like to do is, when the user adds a row or edits an existing one is to make

the editing area much larger (as users type 30-40 lines in it) and have the cursor appear on line below last entry.

As you suggested, i can trim field after exiting edit mode

The Rows number doesnt seem to do anything. i have it set to 10 and would assume there will be 10 rows even if there is no text.

I appreciate your help. I had much of it working consistently with textboxprovider, but that provider doesnt have caretatend feature.
Cancel
Reply

Cancel

Children

1700

Offline Ivan Kitanov posted over 2 years ago in reply to Peter Burrows

Hello Peter,

I'm glad that you managed to resolve your issue.

Thank you for choosing Infragistics!

Regards,
Ivan Kitanov
Cancel
Reply

Cancel
170

Offline Peter Burrows posted over 2 years ago in reply to Peter Burrows

I got it working. I used textboxprovider, added 5 lines entering, in entered i set cursor to postion end-4 using editor.selectionEnd and Start

exited, trim input

Thanks
Cancel
Reply

Cancel