1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Adding a check box to the edit template

Adding a check box to the edit template

Hello,

In the example, I have submitted when you edit you see an additional comments box. I also want to add a checkbox with a label win or lose. But I don't see how to add in this additional checkbox when the user edits there grid cell. I want the checkbox to show on all the cells like the additional comment box and only show when the user clicks edit. I also need to be able to save it to the database using the code behind EditAction . So I need to be able to get a handle on this checkbox. Is this possible?





It seems that when I upload a file it always never uploads correctly. This is my example file

http://viewo.com/Test2.aspx.zip

Attachment: Test2.aspx_d7c0b6dd.zip

5 Replies
AS Alan Sangeeth S Syncfusion Team August 29, 2018 07:22 AM UTC

Hi David, 

Thanks for contacting Syncfusion support. 

Query : I also want to add a checkbox with a label win or lose on all the cells like the additional comment box and only show when the user clicks edit. I also need to be able to save it to the database using the code behind EditAction . 
 
To achieve this requirement, we suggest you to append the checkbox element like the additional comments textbox in the editTemplate write function of the column. To get the value of the checkbox in the server side we suggest you to use the OnServerEditRow server side event of Grid which is triggered when a record is saved in Grid.  
 
Also ensure to provide name attribute of checkbox as same as corresponding field name. 
 
Please refer the below help documentation for details. 
 
 
Please refer the below code example. 
 

[aspx] 
<ej:Grid ID="Grid1" runat='server' MinWidth="400" Width="1380" Height="580" AllowSelection="true" AllowScrolling="true" AllowTextWrap="true" AllowResizing="true" IsResponsive="false" OnServerEditRow="Grid1_ServerEditRow"> 
                                            <ScrollSettings Width="180"  FrozenColumns="2" />   
                                            <Columns> 
                                                
                                                <ej:Column Field="OrderID" Width="180" AllowEditing="false"   CssClass="solution" HeaderText="ColumnName"    /> 
 
                                                <ej:Column Field="CustomerID" Width="350" HeaderText="CustomerID" CssClass="Philips" HeaderTextAlign="center" DisableHtmlEncode="false"  HeaderTemplateID="#PhilipsHeader"  >                                                 
                                                    <EditTemplate Create="create" Read="Philipsread" Write="Philipswrite" /> 
                                                </ej:Column> 
                                            
                                               ...                            
                                             
                                         </Columns> 
 
                                             
                                        </ej:Grid> 
 
 
                                        <script type="text/javascript">      
 
 
 
 
                                            function create() { 
                                                return $("<textarea class='e-field' rows=5 style='width: 100%;'></textarea>"); 
                                            } 
 
                                            function Philipswrite(args) { 
                                                args.element.val(args.rowdata["Freight"]); 
                                                $(args.element.parents('td')[0]).append("<textarea id='PhilipsComments' type='text' rows=3 style='width: 100%;' name='PhilipsComments'></textarea>"); 
                                                $(args.element.parents('td')[0]).append('<input type="checkbox" name="Philipscheckbox" id="Philipscheckbox"><label for="Philipscheckbox">Win or Lose</label>'); 
                                                args.rowdata["Comment"] != null ? $("#PhilipsComments").val(args.rowdata['Comment']) : $("#PhilipsComments").attr('placeholder', 'Additional Comments'); 
                                            } 
 
[aspx.cs] 
 
protected void Grid1_ServerEditRow(object sender, GridEventArgs e) 
 
        { 
 
            //code corresponding to any custom operation. In the variable you can get the values of the edited record. 
 
        } 

Please refer the below screenshot. 

 

We have prepared a sample for your convenience. Please refer the below link for sample. 


Regards,
Alan Sangeeth S 


DP David Price September 12, 2018 04:18 PM UTC

Hi,

I added option boxes

$(args.element.parents('td')[0]).append('<input type="radio" name="Phcheck" id="PhcheckboxBetter" value="PhcheckboxBetter"><label for="PhcheckboxBetter">Better than Ph</label><br/>');
$(args.element.parents('td')[0]).append('<input type="radio" name="Phcheck" id="PhcheckboxWorse" value="PhcheckboxWorse"><label for="PhcheckboxWorse">Worse than Ph</label><br/>');
$(args.element.parents('td')[0]).append('<input type="radio" name="Phcheck" id="Phcheckbox50" value="Phcheckbox50"><label for="Phcheckbox50">50/50 with Ph</label><br/>');

but when it posts the data in

protected void EditEvents_ServerEditRow(object sender, GridEventArgs e)

The option box value is always the first option PhcheckboxBetter no matter what I select.










SE Sathyanarayanamoorthy Eswararao Syncfusion Team September 13, 2018 10:29 AM UTC

Hi David, 

Query : when it posts the data in protected void EditEvents_ServerEditRow(object sender, GridEventArgs e).The option box value is always the first option PhcheckboxBetter no matter what I select. 

The mentioned issue occurs because you have given the same name for all the radio buttons in the edit template. By default the input elements are differentiated based on the name value. So only the first radio button element is posted in the server side. To avoid this issue we suggest you to give the different names for the input elements in the edit template. 

Please refer the below code example and the screenshot. 


function create() { 
   return $("<textarea class='e-field' rows=5 style='width: 100%;'></textarea>"); 
                 } 
 
function Philipswrite(args) { 
                                                args.element.val(args.rowdata["Freight"]); 
                                                $(args.element.parents('td')[0]).append("<textarea id='PhilipsComments' type='text' rows=3 style='width: 100%;' name='PhilipsComments'></textarea>"); 
                                                $(args.element.parents('td')[0]).append('<input type="radio" name="Phcheck" id="PhcheckboxBetter" value="PhcheckboxBetter"><label for="PhcheckboxBetter">Better than Ph</label><br/>'); 
                                                $(args.element.parents('td')[0]).append('<input type="radio" name="Phcheck1" id="PhcheckboxWorse" value="PhcheckboxWorse"><label for="PhcheckboxWorse">Worse than Ph</label><br/>'); 
                                                $(args.element.parents('td')[0]).append('<input type="radio" name="Phcheck2" id="Phcheckbox50" value="Phcheckbox50"><label for="Phcheckbox50">50/50 with Ph</label><br/>'); 
                                                args.rowdata["Comment"] != null ? $("#PhilipsComments").val(args.rowdata['Comment']) : $("#PhilipsComments").attr('placeholder', 'Additional Comments'); 
                                            } 


Screenshot: 

 
 
 
If you need any further assistance please get back to us. We will be happy to assist you. 
 
Regards, 
Sathyanarayanamoorthy 



 
 
 
 
 
 

 


DP David Price September 13, 2018 02:49 PM UTC

Hi,

I used the same name to create a group of option boxes so only 1 can be selected. 

Also from your example I don't see how you can get the value of the option box out in the code behind . It doesn't show you which one was checked ?

PK Prasanna Kumar Viswanathan Syncfusion Team September 14, 2018 05:14 PM UTC

Hi David, 

Sorry for the inconvenience caused. 

As per your requirement we have given same name to the radio button so that only one radio button can be selected. To checked radio button value on the server side we have got the checked radio button value in a variable and assigned that value to the PhCheck field in args.data of actionComplete event when the requestType is save. 

Please refer the below code example. 


<ej:Grid ID="Grid1" runat='server' MinWidth="400" Width="1380" Height="580" AllowSelection="true" AllowScrolling="true" AllowTextWrap="true" AllowResizing="true" IsResponsive="false" OnServerEditRow="Grid1_ServerEditRow"> 
             <ScrollSettings Width="180"  FrozenColumns="2" />   
             <Columns>                                  
                     <ej:Column Field="OrderID" Width="180" AllowEditing="false"   CssClass="solution" HeaderText="ColumnName"    /> 
                     <ej:Column Field="CustomerID" Width="350" HeaderText="CustomerID" CssClass="Philips" HeaderTextAlign="center" DisableHtmlEncode="false"  HeaderTemplateID="#PhilipsHeader"  >                                                 
                          <EditTemplate Create="create" Read="Philipsread" Write="Philipswrite" /> 
                     </ej:Column> 
                     <ej:Column Field="EmployeeID" Width="350" HeaderText="EmployeeID" CssClass="Tera" HeaderTextAlign="center" DisableHtmlEncode="false" HeaderTemplateID="#TeraHeader"   >                                                 
                     <EditTemplate Create="create" Read="Teraread" Write="Terawrite" /> 
                     </ej:Column> 
                    <ej:Column Field="Freight" Width="350" HeaderText="Freight" CssClass="Siemens" HeaderTextAlign="center" DisableHtmlEncode="false" HeaderTemplateID="#SiemensHeader"   >                                                 
                     <EditTemplate Create="create" Read="Siemensread" Write="Siemenswrite" /> 
                    </ej:Column>                
                    <ej:Column Field="OrderID" IsPrimaryKey="true" Width="0"  HeaderText="OrderID"      />                                                                                 
                </Columns> 
              <ClientSideEvents  DataBound="createEvent" ActionComplete="complete" />                          </ej:Grid> 

<script type="text/javascript"> 
                 var val, radioval; 
                  
                 function create() { 
                      return $("<textarea class='e-field' rows=5 style='width: 100%;'></textarea>"); 
                  } 
 
                 function Philipswrite(args) {                                                                      
                     args.element.val(args.rowdata["Freight"]);                                   
                     $(args.element.parents('td')[0]).append("<textarea id='PhilipsComments' type='text' rows=3 style='width: 100%;' name='CustomerID'></textarea>");                                               
                      $(args.element.parents('td')[0]).append('<input type="radio" name="PhCheck" id="PhcheckboxBetter" value="PhcheckboxBetter"><label for="PhcheckboxBetter">Better than Ph</label><br/>');                             
                      $(args.element.parents('td')[0]).append('<input type="radio" name="PhCheck" id="PhcheckboxWorse" value="PhcheckboxWorse"><label for="PhcheckboxWorse">Worse than Ph</label><br/>');                                                 
                      $(args.element.parents('td')[0]).append('<input type="radio" name="PhCheck" id="Phcheckbox50" value="Phcheckbox50"><label for="Phcheckbox50">50/50 with Ph</label><br/>'); 
                      args.rowdata["Comment"] != null ? $("#PhilipsComments").val(args.rowdata['Comment']) : $("#PhilipsComments").attr('placeholder', 'Additional Comments'); 
                                            } 
      function Philipsread(args) { 
            val = $("#PhilipsComments").val(); 
            radioval = $("input[type='radio'][name='PhCheck']:checked").val(); 
            return args.val() 
        } 
 
         function complete(args) { 
             if (args.requestType == "save") { 
                 args.data.PhCheck = radioval; 
                 args.rowData.PhCheck = radioval; 
                } 
             } 
</script> 

Refer the below screenshots: 

Selected the PhcheckboxWorse radio button: 
 

In the server side. 

 

We have prepared a sample for your reference. Please refer the below link for sample. 


Regards, 
Prasanna Kumar N.S.V 
 


Loader.
Up arrow icon