We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Columns only in edit mode

I created a grid with object data source and i enable edit and add row. It is ok. But I must hide a columns on grid and show that only in edit mode. I use EditMode="InlineForm".

It is possible or i must create a custom form to do that

Thanks



3 Replies

VA Venkatesh Ayothi Raman Syncfusion Team March 6, 2017 09:05 AM UTC

Hi Emanuele, 
Thanks for contacting Syncfusion support. 
We can achieve your requirement using inline-form template editing mode of Grid. We have prepared a sample based on your requirement which can be download from following link, 
In this sample, we have displayed only 3 columns in Grid and we can edit the columns which are not bind to the grid while edit/add a record in grid by specifying the columns which are need to be edited in inline form template. Please refer to the code example, Help documentation and screenshot, 
Code example
@Grid 
  <ej:Grid ID="Grid1"    AllowPaging="True" runat="server"> 
             
             
            <Columns> 
                 
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true"    TextAlign="Right" Width="90" /> 
                <ej:Column Field="CustomerID" HeaderText="Customer ID"    Width="100">  </ej:Column>                            
                <ej:Column Field="ShipCountry" HeaderText="ShipCountry" Width="100" /> 
            </Columns> 
            <EditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" EditMode="InlineFormTemplate" InlineFormTemplateID="#template" /> 
             . . . 
                             
        </ej:Grid> 
 
@template form 
<script type="text/template" id="template"> 
        <b>Order Details</b> 
        <table cellspacing="10"> 
            <tr> 
                <td style="text-align: right;">Order ID 
                </td> 
               <td style="text-align: left"> 
                    <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" 
                        class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 116px; height: 28px" /> 
                </td> 
                <td style="text-align: right;">Customer ID 
                </td> 
                <td style="text-align: left"> 
                    <input id="CustomerID" name="CustomerID" value="{{:CustomerID}}" class="e-field e-ejinputtext valid" 
                        style="width: 116px; height: 28px; text-align: left!important" /> 
                </td> 
            </tr> 
 
            <tr> 
                <td style="text-align: right;">Freight 
                </td> 
                <td style="text-align: left"> 
                    <input type="text" id="Freight" name="Freight" value="{{:Freight}}" /> 
                </td> 
                <td style="text-align: right;">ShipCountry 
                </td> 
                <td style="text-align: left"> 
                    <select id="ShipCountry" name="ShipCountry"> 
                        <option value="Germany">Germany</option> 
                        <option value="Mexico">Mexico</option> 
                        <option value="UK">UK</option> 
                        <option value="Sweden">Sweden</option> 
                        <option value="Colchester">France</option> 
                        <option value="Denmark">Italy</option> 
                        <option value="Spain">Spain</option> 
                    </select> 
                </td> 
            </tr> 
            <tr> 
 
                <td style="text-align: right;">ShipCity 
                </td> 
                <td style="text-align: left"> 
                    <input id=”ShipCity" name="ShipCity" class="e-field e-ejinputtext valid" 
                        style="width: 116px; height: 28px" value="{{:ShipCity}}" /> 
                </td> 
                <td style="text-align: right;">EmployeeID 
                </td> 
                <td style="text-align: left"> 
                    <input id="EmployeeID" name="EmployeeID" class="e-field e-ejinputtext valid" 
                        style="width: 116px; height: 28px" value="{{:EmployeeID}}" /> 
                </td> 
            </tr> 
        </table> 
    </script> 
   
Screenshot

 
Regards, 
Venkatesh Ayothiraman. 



EM emanuele March 8, 2017 09:09 PM UTC

Thanks very much!

It's work!


VA Venkatesh Ayothi Raman Syncfusion Team March 9, 2017 04:22 AM UTC

Hi Emanuele, 
Thanks for the feedback. 
We are very happy to hear that your requirement is achieved. 
Regards, 
Venkatesh Ayothiraman. 


Loader.
Live Chat Icon For mobile
Up arrow icon