Simple: Edit Mode control too small

[DoomerDGR8]

I have this simple case where I'm using a simple automatic editing functionality of the RadGrid but the only filed that is allowed in edit mode is more like a memo and I need it's height and width expanded. I'm not using any templates here. Kindly see attached screen.

<asp:Panel runat="server" ID="PanelGrid" Width="630px">
  <fieldset id="fieldGrid" style="width: 608px;">
    <legend>Notes History</legend>
    <telerik:RadGrid ID="RadGridJobs2" runat="server" AutoGenerateColumns="False" AllowPaging="True" GridLines="None"
      Width="608px" Skin="Office2007" SkinID="RadGrid_Paging_Page20_NoExport_Add" AllowAutomaticDeletes="false"
      AllowAutomaticInserts="True" DataSourceID="LinqDataSourceNotes" OnUpdateCommand="RadGridJobs2_UpdateCommand">
      <MasterTableView DataKeyNames="OID" DataSourceID="LinqDataSourceNotes" GridLines="None" CommandItemDisplay="Top">
        <Columns>
          <telerik:GridBoundColumn DataField="NoteDetails" HeaderText="Note" SortExpression="NoteDetails" UniqueName="columnNoteDetails"
            Visible="false" />
          <telerik:GridTemplateColumn UniqueName="columnNewNote" HeaderText="Note History">
            <ItemTemplate>
              <table cellspacing="0" cellpadding="0" width="100%" border="0" class="TableNoBorders">
                <tr>
                  <td>
                    <%# "<div><span style='font-weight: bold; '>By </span><span style='font-style: italic; '>" + Eval("User.FirstName") + " " + Eval("User.LastName") + "</span><span style='font-weight: bold; '> on </span><span style='font-style: italic; '>" + Eval("NoteDate", "{0:dd-MMM-yyyy hh:mm tt}") + "</span></div>"%>
                  </td>
                </tr>
                <tr>
                  <td>
                    <%# "<div style='font-weight: bold; '>Note: </div>" + Eval("NoteDetails")%>
                  </td>
                </tr>
              </table>
            </ItemTemplate>
          </telerik:GridTemplateColumn>
          <telerik:GridEditCommandColumn ButtonType="ImageButton" HeaderStyle-Width="10px" ItemStyle-Width="10px" />
          <telerik:GridClientDeleteColumn ButtonType="ImageButton" HeaderStyle-Width="10px" ItemStyle-Width="10px"
            Visible="false" />
        </Columns>
        <CommandItemSettings AddNewRecordText="New Note" />
        <EditFormSettings>
          <EditColumn ButtonType="ImageButton" />
        </EditFormSettings>
      </MasterTableView>
    </telerik:RadGrid>
  </fieldset>
</asp:Panel>

protected void RadGridJobs2_UpdateCommand(object source, GridCommandEventArgs e) {
  var editableItem = ((GridEditableItem)e.Item);
  var editNoteID = (long)editableItem.GetDataKeyValue("OID");

  //retrieve entity form the Db
  var editNote = DbContext.Notes.Where(nut => nut.OID == editNoteID).FirstOrDefault();
  if (editNote != null) {
    try {
      //update entity's state
      editableItem.UpdateValues(editNote);

      //submit changes to Db
      DbContext.SubmitChanges();

    } catch (Exception ex) {

    }
  }
}

[Princy]

Hello Hassan,

You can set the Multiline property to the TextBox as shown below.

C#:

protected void RadGridJobs2_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
   {
       if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
       {
           GridEditFormItem editItem = (GridEditFormItem)e.Item;
           TextBox textBox = (TextBox)editItem["columnNoteDetails"].Controls[0];
           textBox.TextMode = TextBoxMode.MultiLine;
       }
   }

Thanks,
Princy.

[DoomerDGR8]

Excellent. One more thing: If I wanted a RTF or a WYSIWYG editor instead? What will be the required changes then? Do I need to update the SQL Server Datatype for the mapped column too + the HTML and Code behind changes?

[Iana Tsolova]

Hi Hassan,

You can try using GridHTMLEditorColumn instead of GridBoundColumn.
However if you want to use another editor, try placing it in the EditItemTemplate of a GridTemplateColumn.

All the best,
Iana
the Telerik team