1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. grid edit

grid edit

Hello,

When the grid is in edit mode I would like to show a second text box below the existing one that will have the watermark "Comments". This will allow the user to enter comments about the edited filed.

Is this possible to get a second text box and then save it back to the database in EditEvents_ServerEditRow code behind?



David

1 Reply
TS Thavasianand Sankaranarayanan Syncfusion Team June 20, 2018 12:48 PM UTC

Hi David, 

Thanks for contacting Syncfusion support. 

We can achieve your requirement using the editTemplate property of Columns API and actionBegin event of ejGrid. 

For an example we have set the comments input box in the ShipPostalCode column in Grid. In the below code example we have append a another text box in a cell while editing. While saving the record we have save the comment box value in an external variable and set it to the corresponding field in the actionBegin event of ejGrid.  

[GridFeatures.aspx] 

<ej:Grid ID="FlatGrid" runat="server" OnServerEditRow="FlatGrid_ServerEditRow" >   
            <Columns> 
                 
                                    ---- 
 
                <ej:Column Field="ShipPostalCode"> 
                <EditTemplate Create="create" Read="read" Write="write"/></ej:Column> 
 
                <ej:Column Field="PostalCodeComments" Visible="false"/> // need to set the comments column as visible false 
 
           </Columns> 
            <ClientSideEvents ActionBegin ="GridActionBeginEvent"/> 
             
             --- 
 
       </ej:Grid>      
     
            <script> 
                var val; 
 
                                  function write(args) {  
                     
                                            ----- 
 
                    $(args.element.parents('td')[0]).append("<textarea id='PostalCodeCommentsTextArea' type='text' name='PostalCodeComments'></textarea>"); 
// append the comments text box to the shipPostalCode Column 
 
                    args.rowdata['PostalCodeComments'] != " " ? $("#PostalCodeCommentsTextArea").val(args.rowdata['PostalCodeComments']) : $("#PostalCodeCommentsTextArea").attr('placeholder', 'Comments'); // set the comments value or place the watermark text 
 
 
                } 
 
                function read(args) { 
                     
                    val = $("#PostalCodeCommentsTextArea").val();// get the comments value while saving 
                    return args.ejMaskEdit("get_StrippedValue"); 
                } 
 
                                         
                                     -----                                 
 
 
                function GridActionBeginEvent(args) { 
                    if (args.requestType == "save") 
                        args.rowData['PostalCodeComments'] = val; // set the comments column value in rowData 
                } 
 
            </script> 

------------------------------------------------------------------------------------------------------------- 
[GridFeatures.aspx.cs] 

  protected void FlatGrid_ServerEditRow(object sender, GridEventArgs e) 
        {      
            object record = e.Arguments["data"]; 
            List<Orders> data = order; 
            Dictionary<string, object> KeyVal = record as Dictionary<string, object>; 
 
            Orders value = new Orders(); 
            foreach (KeyValuePair<string, object> keyval in KeyVal) 
            { 
                if (keyval.Key == "OrderID") 
                { 
                    value = data.Where(d => d.OrderID == (int)keyval.Value).FirstOrDefault(); 
                    value.OrderID = Convert.ToInt64(keyval.Value); 
                } 
                else if (keyval.Key == "EmployeeID") 
                    value.EmployeeID = Convert.ToInt32(keyval.Value); 
                else if (keyval.Key == "ShipCountry") 
                    value.ShipCountry = Convert.ToString(keyval.Value); 
                else if (keyval.Key == "ShipPostalCode") 
                    value.ShipPostalCode = Convert.ToInt32(keyval.Value); 
                else if (keyval.Key == "PostalCodeComments") 
                    value.PostalCodeComments = Convert.ToString(keyval.Value); 
            } 
            this.FlatGrid.DataSource = data; 
            this.FlatGrid.DataBind(); 
        } 


We have prepared a sample and it can be downloadable from the below location. 


Refer the help documentation. 




Regards, 
Thavasianand S. 


Loader.
Up arrow icon