Show or hide div in edit template

[Pio Luca Valvona]

I need to show or hide a div in the template based on the type of operation performed (insert or edit). I'm trying to use this syntax <div class="row {{if isAdd}}hidden {{else}}show {{ /if}}"> but it doesn't work. 

[Farveen Sulthana Thameeztheen Basha]

Hi Luca, 

Thanks for contacting Syncfusion Support. 

Query#:-I need to show or hide a div in the template based on the type of operation performed (insert or edit).  

 

From your query we suspect that you need to render different type of  template elements while on Editing based on actions performed. You can differentiate the action using args.requestType in write event as like given below:- 

@(Html.EJ().Grid<OrdersView>("Edittemplate") 

            .Datasource((IEnumerable<object>)ViewBag.datasource) 

             

            .Columns(col => 

            { 

                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Add(); 

                col.Field("CustomerID").HeaderText("Customer ID").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).TextAlign(TextAlign.Right).Width(90).ValidationRules(v => v.AddRule("required", true)).Add(); 

            }) 

        ) 

    } 

    

     <script type="text/javascript"> 

        function create() { 

            return $("<input>"); 

        } 

 

        function write(args) { 

            obj = $('#Edittemplate').ejGrid('instance'); 

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

                                           //do your stuff here while on Editing 

                var data = ej.DataManager(obj.model.dataSource).executeLocal(new ej.Query().select("CustomerID")); 

                args.element.ejAutocomplete({ width: "100%", dataSource: data, enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" }); 

            } 

 

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

                                      //do your stuff here on adding 

            } 

 

        } 

 

        function read(args) { 

            args.ejAutocomplete('suggestionList').css('display', 'none'); 

            return args.ejAutocomplete("getValue"); 

        } 

         

    </script> 

If the above suggestion doesn’t meet your requirement, share us the following details. 

1. Complete Grid code example.
2. Do you want to change the Input element of EditTemplate or need to render different controls on Add or edit action.
3. Share detailed Explanation of your requirement.

Based on the above details we will provide you solution as early as possible. 

Regards, 

Farveen sulthana T 

[Pio Luca Valvona]

Hi,

I have this template:

<script type="text/template" id="NewsTemplate">

        <input name="IDNews" value="{{: IDNews}}" class="hidden" />

        <input id="DataNews" name="DataNews" value="{{: DataNews}}" class="hidden" />

        <div class="row">

            <div class="col-md-6">

                <div class="form-group-lg">

                    <label>@PLV.Web.Resources.News.TitoloNews</label>

                    <input type="text" name="Titolo" value="{{: Titolo}}" class="form-control" />

                </div>

                <div class="form-group-lg">

                    <label>@PLV.Web.Resources.News.DescrizioneNews</label>

                    <textarea id="rteDescrizioneNews" name="Descrizione" class="form-control">{{: Descrizione}}</textarea>

                </div>

            </div>

            <div class="col-md-6">

                <div class="form-group-lg">

                    <label>@PLV.Web.Resources.News.TitoloNewsIng</label>

                    <input type="text" name="Titolo_Ing" value="{{: Titolo_Ing}}" class="form-control" />

                </div>

                <div class="form-group-lg">

                    <label>@PLV.Web.Resources.News.DescrizioneNewsIng</label>

                    <textarea id="rteDescrizioneNewsIng" name="Descrizione_Ing" class="form-control">{{: Descrizione_Ing}}</textarea>

                </div>

            </div>

        </div>

        <div class="row">

            <label>@PLV.Web.Resources.News.ImageNews</label>

            <div class="col-lg-12">

                <a rel='nofollow' href="#" class="thumbnail">

                    <img id="imgScreen" src="{{:PathImg}}" class="form-control img-responsive" />

                </a>

            </div>

            <div id="Screens" class="pull-right"></div>

        </div>

        <div class="row">

            <div class="col-md-12">

                <div class="form-group-lg">

                    <label>@PLV.Web.Resources.News.Link</label>

                    <input type="text" name="LinkNews" value="{{: LinkNews}}" class="form-control" />

                </div>

            </div>

        </div>

        <div class="row {{if Add}}hidden{{else}}show{{/else}}{{ /if}}">

            <div class="col-md-12">

                <div class="form-group-lg">

                    <label>@PLV.Web.Resources.News.Social</label>

                    <div class="form-control">

                        <div class="col-md-2">

                            <label>Facebook</label>

                            {{if FBPostID!= null}}

                            <input type="checkbox" id="FBPost" name="FBPost" checked="checked" disabled />

                            {{else}}

                            <input type="checkbox" id="FBPost" name="FBPost" disabled />

                            {{/if}}

                        </div>

                        <div class="col-md-2">

                            <label>Twitter</label>

                            {{if TWPostID!= null}}

                            <input type="checkbox" id="TWPost" name="TWPost" checked="checked" disabled />

                            {{else}}

                            <input type="checkbox" id="TWPost" name="TWPost" disabled />

                            {{/if}}

                        </div>

                        <div class="col-md-2">

                            <label>LinkedIn</label>

                            {{if LIPostID!= null}}

                            <input type="checkbox" id="LIPost" name="LIPost" checked="checked" disabled />

                            {{else}}

                            <input type="checkbox" id="LIPost" name="LIPost" disabled />

                            {{/if}}

                        </div>

                    </div>

                </div>

            </div>

            <button id="btnGetOpInfo" class="btn btn-success pull-right" onclick="getOpInfo()" type="button">Open Graph</button>

        </div>

        <hr />

    </script>

And I need to hide the div highlighted when insert new record.

[Farveen Sulthana Thameeztheen Basha]

Hi Luca, 

Thanks for your details. 

Query#:- And I need to hide the div highlighted when insert new record. 

We have achieved this requirement using ActionComplete event of the Grid. In this event we can get the corresponding div element and based on requestType as “add” we have hide the element on Insert operation. 

Refer to the code below:- 

@(Html.EJ().Grid<OrdersView>("Editing") 

        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource)) 

        .Columns(col => 

        { 

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Width(90).Add(); 

        }) 

        .ClientSideEvents(eve => { eve.ActionComplete("complete"); }) 

        ) 

   <script> 

    function complete(args) { 

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

                $("#hiderow").hide();  //hide the div on Insert operation 

            }; 

    } 

</script> 

 

<script type="text/template" id="NewsTemplate"> 

        .   .        . 

         

        <div class="row"> 

            <div class="col-md-12"> 

                <div class="form-group-lg"> 

                    <label>@PLV.Web.Resources.News.Link</label> 

                    <input type="text" name="LinkNews" value="{{: LinkNews}}" class="form-control" /> 

                </div> 

            </div> 

        </div> 

        <div class="row" id="hideOnAdd"> 

            <div class="col-md-12"> 

                <div class="form-group-lg"> 

                    <label>@PLV.Web.Resources.News.Social</label> 

                    <div class="form-control"> 

                        <div class="col-md-2"> 

                            <label>Facebook</label> 

                            {{if FBPostID!= null}} 

                            <input type="checkbox" id="FBPost" name="FBPost" checked="checked" disabled /> 

                            {{else}} 

                            <input type="checkbox" id="FBPost" name="FBPost" disabled /> 

                            {{/if}} 

                        </div> 

                        .   .   . 

               </div> 

            </div> 

            <button id="btnGetOpInfo" class="btn btn-success pull-right" onclick="getOpInfo()" type="button">Open Graph</button> 

        </div> 

        <hr /> 

    </script> 

Refer to the API Link:- 

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

Please get back to us with Complete Grid rendering code if you are facing any difficulties with above solution. 

Regards, 

Farveen sulthana T