how can I conditionally hide controls on custom editor template view?

5 posts, 0 answers
  1. Terence
    Terence  avatar
    5 posts
    Member since:
    May 2012

    Posted 15 Jan 2013 Link to this post

    I have a kendo ui grid with a custom editor template. I want to be able to hide the editor for 2 fields on the popup editor based on the value of a 3rd field.

    eg on the kendo grid if property a is set to true, then when the user selects edit and the popup shows,  property b and c editors are not displayed. However if property a is false then editors(textboxes) for b and c must be shown on the popup.

    I have tried to do the following:

                        @(Html.Kendo().Grid(Model)
                        .Name("Grid")
                        .Events(e=>e.
                                Edit("Grid_Edit")
                                 )
                        .Columns(columns => 


    then 
    <script>
        function Grid_Edit(e) {
            var dataItem = e.dataItem;
            var mode = e.mode;
            var form = e.form;
    if (dataItem.UseIntegratedSecurity)
             $(form).find("#Username").hide()

        }
    </script>

    to try and debug i have done the following:
    <script>
        function Grid_Edit(e) {
            var dataItem = e.dataItem;
            var mode = e.mode;
            var form = e.form;
            if (dataItem.IntegratedSecurity==true)
                alert("integrated security")
            
        }
    </script>
     But the alert is never displayed even when this field is set to true.

    Am I on the right track or is there an easier way to achieve my goal?

  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 17 Jan 2013 Link to this post

    Hello Terence,

    The approach to use the edit event is correct. The alert will not be triggered because the event arguments are different:

    • instead of dataItem you should use model.
    • instead of mode you should use the model isNew method.
    • instead of form you should use container.

    It is also possible to use visible or invisible binding in the popup template in order to show or hide the editors automatically based on the value e.g.

    <div data-bind="invisible: UseIntegratedSecurity">
        @Html.EditorFor(m => m.Username)
    </div>

    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Navin
    Navin avatar
    12 posts
    Member since:
    Dec 2012

    Posted 04 Apr 2014 in reply to Daniel Link to this post

    I am trying to do the same thing, however I can hide the editor template but the value of the column is also hidden. I want the value / text to also show.

    Thanks 
  4. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 04 Apr 2014 in reply to Terence Link to this post

    just before your if( dataItem.IntegratedSecurity == true)

    if you put:

    alert(dataItem.IntegratedSecurity.toString() );

    what happens?  (if you're using firefox/Firebug - start that too to make sure you don't have a js error)
  5. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 08 Apr 2014 Link to this post

    Hello Navin,

    Where should the "value / text" be shown? If it should be shown in the editor then you could add it before or after the hidden element:
    $("#IntegratedSecurity").hide().after(e.model.IntegratedSecurity);


    Regards,
    Daniel
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top