This is a migrated thread and some comments may be shown as answers.

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

4 Answers 574 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Terence
Top achievements
Rank 1
Terence asked on 15 Jan 2013, 09:53 AM
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?

4 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 17 Jan 2013, 08:15 AM
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!
0
Navin
Top achievements
Rank 1
answered on 04 Apr 2014, 08:15 PM
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 
0
Rene
Top achievements
Rank 1
answered on 05 Apr 2014, 12:40 AM
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)
0
Daniel
Telerik team
answered on 08 Apr 2014, 01:43 PM
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.

 
Tags
Grid
Asked by
Terence
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Navin
Top achievements
Rank 1
Rene
Top achievements
Rank 1
Share this question
or