1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Grid Edit

Grid Edit

When I click on Edit in the grid. My CSS is conflicting and is throwing a massive margins



Also, how can I make the edit text boxes multiplied to see more of the text in the box?



Attachment: Test.aspx_f7fac2.zip

5 Replies
KM Kuralarasan Muthusamy Syncfusion Team June 6, 2018 01:04 PM UTC

Hi David, 

Thanks for contacting Syncfusion support. 

Query #1: When I click on Edit in the grid. My CSS is conflicting and is throwing a massive margins 
 
We have analyzed your given code and we found that the following line is root cause of this issue. So we suggest you to remove the following line in your project to resolve this issue. 
 
.toshiba-content td { 
    border-right: 1px solid #ddd;    border-bottom: 1px solid #ddd;padding: 20px 40px!important;white-space: nowrap; 
} 

Query #2: Also, how can I make the edit text boxes multiplied to see more of the text in the box? 
 
We could not understood this query properly. So please share the following details for further assistance, 
 
  1. Explain your requirement details.
  2. If you give some graphical representation its very useful to us.
  3. If you have any grid code about this requirement, then share that code to us.
 
Regards, 
Kuralarasan M. 


DP David Price June 8, 2018 12:28 PM UTC

Hi,

The question on Query #2: was

When I edit in the grid there is a single edit box. How can I make the text box type "MultiLine"

so that the boxes are bigger in height and the user can see more text?





KM Kuralarasan Muthusamy Syncfusion Team June 11, 2018 04:11 PM UTC

Hi David, 

We have analyzed your query and we suggest you to use text area instead of input text box with EditTemplate of Grid to achieve your requirement. Please refer the following code snippet, 

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent"> 
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" > 
 
                     ..... 
 
            <Columns> 
                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90"> 
                    <EditTemplate Create="create" Read="read" Write="write" /> 
                </ej:Column> 
            </Columns> 
        </ej:Grid> 
 
     <script type="text/javascript">        
        function create() { 
            return $("<textarea class='e-field' rows=3 style='width: 100%;'></textarea>"); 
        } 
 
         function write(args) { 
             args.element.val(args.rowdata["CustomerID"]); 
        } 
 
        function read(args) { 
            return args.val(); 
        } 
    </script> 
</asp:Content> 

In this code we have changed the input text box to text area by using the editTemplate property of ejGrid. We have also prepared the sample with your requirement and that sample can be downloadable from the below link, 


Please refer the following link to know about editTemplate event of the Grid: 


Regards, 
Kuralarasan M. 


DP David Price June 13, 2018 11:14 AM UTC

Hi,

Can I use the richtexteditor instead of a textarea box?

David 

VN Vignesh Natarajan Syncfusion Team June 14, 2018 11:48 AM UTC

Hi David, 


Yes we can render the RichTextEditor into the Grid editform using EditTemplate feature. This feature help to render varies controls like richTextEditor, dropdown, combobox, uploadbox etc into Grid while editing a record. We suggest you to achieve your requirement using EditTemplate feature of Grid. 

Refer the below code snippet for your reference 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" IsResponsive="true" MinWidth="400" AllowScrolling="true" AllowGrouping="true"> 
             <Columns> 
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90"/> 
                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="300"> 
                    <EditTemplate Create="create" Read="read" Write="write" /> 
                </ej:Column> 
.             .                 .               .     
        </ej:Grid> 
 
                
    </div> 
    <script type="text/javascript">        
        function create() { 
            return $('<textarea></textarea>'); 
        } 
 
        function write(args) { 
            args.element.ejRTE({ 
                value: args.rowdata["CustomerID"], 
                width: 200 
            }); 
        } 
        function read(args) { 
            return args.val(); 
        } 
    </script> 

Refer the below screenshot for the output 

 

For your convenience we have prepared a sample which can be downloaded from below link 


Refer our help documentation for your reference 


Regards, 
Vignesh Natarajan  
 


Loader.
Up arrow icon