Hide column in edit mode

[Prasad Gurla]

I have a column with a template ID and a button in the template column. Works good.

However, the column is also shown in edit mode (as an input). How can I hide the button the edit mode and show it only in the grid display?

<ej:Column Width="120px" TemplateID="#terrainsTemplate" HeaderText="Manage Terrains" />

The template code is below:

<script id="terrainsTemplate" type="text/x-template"> 

    <input id="manageterrain" type='button' value='Manage Terrains' onClick="onClick(event);"> 

</script>

[Prasanna Kumar Viswanathan]

Hi Prasad, 

Thanks for contacting Syncfusion support. 

Based on your query you need to prevent the template column from being edited. To achieve this, we suggest you to disable the template column from editing / adding. We have inbuilt support to disable column from editing which can be achieved by defining false to AllowEditing property of columns API  

To disable the template column from adding, we suggest you to achieve it by disabling the input element in the ActionComplete event of ejGrid.  

Refer the below code example 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True"> 

            <Columns> 

                <ej:Column Width="120px" TemplateID="#terrainsTemplate" AllowEditing="false" HeaderText="Manage Terrains" />                

                .                      .                              .                         .                       .                   .  

            </Columns> 

            <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> 

            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>      

<ClientSideEvents ActionComplete="onComplete" />     

        </ej:Grid>    

<script type="text/javascript"> 

        var index; 

        function onComplete(args) { 

            if (args.requestType == "add") { 

                for (var i = 0; i < this.model.columns.length; i++) { 

                    if(!ej.isNullOrUndefined(this.model.columns[i].templateID)) 

                        index = i // to take the index of column which has template value 

                } 

                this.element.find(".gridform").find("input").eq(index).prop("disabled", true); 

                this.element.find(".gridform").find("input").eq(index).addClass("e-disable"); 

            } 

        } 

    </script> 

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

Sample: http://www.syncfusion.com/downloads/support/forum/139965/7z/SyncfusionASPNETApplication18-130977313 

Refer the below help documents 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete 

   

If you still face the issue or if you are using different editMode please get back to us with more details. 

Regards, 

Prasanna Kumar N.S.V. 

 

[Prasad Gurla]

Thanks for the reply. It works!

Just to help others, as stated in my question, I wanted to hide and not make it invisible.

So, I adapated the corresponding part of your code to:

this.element.find(".gridform").find("input").eq(index).css("display", "none");

[Prasanna Kumar Viswanathan]

Hi Prasad, 

Thanks for the update. 

To hide the input element you can use mentioned code in your application. In actionComplete event we disabled the input element only for add operation, while editing we disabled the input element by defining false to AllowEditing property of columns API.  

If you want to hide the input element while editing, we suggest you to add the requestType as “beginedit” in actionComplete event of ejGrid.  

Find the code example:  

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True"> 

            <Columns> 

                ------------------- 

                <ej:Column Width="120px" TemplateID="#terrainsTemplate" HeaderText="Manage Terrains" />                            

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="80" EditType="Dropdown" />                

            </Columns> 

            -------------------- 

      <ClientSideEvents ActionComplete="onComplete" />      

        </ej:Grid>       

    <script id="terrainsTemplate" type="text/x-template">  

    <input id="manageterrain" type='button' value='Manage Terrains' onClick="onClick(event);">  

</script>    

    <script type="text/javascript"> 

        var index; 

        function onComplete(args) { 

            if (args.requestType == "add" || args.requestType == "beginedit") { 

                for (var i = 0; i < this.model.columns.length; i++) { 

                    if(!ej.isNullOrUndefined(this.model.columns[i].templateID)) 

                        index = i // to take the index of column which has template value 

                } 

                this.element.find(".gridform").find("input").eq(index).css("display", "none"); 

            } 

        } 

    </script> 

Regards, 

Prasanna Kumar N.S.V 

[Prasad Gurla]

Thanks. I figured that out. All works Good.

[Prasanna Kumar Viswanathan]

Hi Prasad, 

We are happy to hear that your issue has been solved. 

Please get back to us if you need any further assistance. 

Regards, 

Prasanna Kumar N.S.V