Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
170
WDG Multline textboxprovider - setting number of rows
posted

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


<EditorProviders>
<ig:TextBoxProvider ID="Chrono_MultiLineTextBoxProvider">
<EditorControl ClientIDMode="Predictable" Height="300px" MaxLength="10000"
TextMode="MultiLine" Width="500px" Rows="10"></EditorControl>
</ig:TextBoxProvider>

Thanks!

  • 1700
    Offline posted

    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:

    Fullscreen
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    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") {
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    Please let me know if you have any questions.

    Regards,
    Ivan Kitanov

    • 170
      Offline posted 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);

      • 1700
        Offline posted 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

        • 170
          Offline posted 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

          • 170
            Offline posted 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.

            • 1700
              Offline posted 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

            • 170
              Offline posted in reply to Ivan Kitanov

              Yes, that is what i am doing, but i thought there might be a more elegant solution.

              it would be nice to programmatically set the row count