kendo grid client template input hidden field become editable once click

Question

I'm trying to make a kendo grid column template like this, based on condition show text input and other way round

wrote the following code for this

        columns.Bound(p => p.MyColumn).Template(@<text></text>).ClientTemplate(
            "# if (myFirstCondion == true) { #" +
                "<input type='text' style='width:100%' class='k-textbox' value=#=MyColumn#></input>" +
            "# } else { #" +
                 "<input type='hidden'></input>" +
            "# } #"
        );

but the problem is when I click hidden column, its become input text field, how to make this non editable once click hidden field

Answer 1

You could use the column.Editable handler.

e.g.

        columns.Bound(p => p.MyColumn).Editable("conditionalEditable").Template(@<text></text>).ClientTemplate(
            "# if (myFirstCondion == true) { #" +
                "<input type='text' style='width:100%' class='k-textbox' value=#=MyColumn#></input>" +
            "# } else { #" +
                 "<input type='hidden'></input>" +
            "# } #"
        );

...

<script>
    function conditionalEditable(dataItem){
         return dataItem.myFirstCondion; // add the same per item condition as in the client template
    } 
</script>