Columns only in edit mode

[emanuele]

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

[Venkatesh Ayothi Raman]

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, 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomContextmenu_(3)1019037777 

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> 

   

Help documentation: https://help.syncfusion.com/aspnet/grid/editing#edit-modes 

Online demo: http://asp.syncfusion.com/demos/web/grid/inlineformonlocaldata.aspx 

Screenshot: 

 

Regards, 

Venkatesh Ayothiraman. 

[emanuele]

Thanks very much!

It's work!

[Venkatesh Ayothi Raman]

Hi Emanuele, 

Thanks for the feedback. 

We are very happy to hear that your requirement is achieved. 

Regards, 

Venkatesh Ayothiraman.