1

I was trying to display Kendo UI text editor when check box is checked.
However it's not working, can you help me out..

@if (Model.IsAlert!=true)
{
  <td>                   
     @(Html.Kendo().Editor().Name("Explanation").HtmlAttributes(new { style = "display:show" }))             
  </td>
}
K Scandrett
  • 16,390
  • 4
  • 40
  • 65
Radha
  • 13
  • 5

1 Answers1

0

Your current approach will only render that/evaluate Model.IsAlert on the initial load of screen.

I would suggest removing the if statement, and defaulting this td to hidden, then change that depending on the properties in the model via a onChange event handler mapped to your checkbox control.

<td id="thingToHide" hidden="hidden">
 @(Html.Kendo().Editor().Name("Explanation").HtmlAttributes(new { style = "display:show" }))             
</td>

and some jquery code:

<script type="text/javascript">
 $(document).ready(function () { // On page load method, check model and show textbox if needed
      var model = @Html.Raw(Json.Encode(Model)); // get model example is taken from http://stackoverflow.com/questions/16361364/accessing-mvcs-model-property-from-javascript
      if (model.IsAlert) { // If model IsAlert is true, show Explanation field
           $("#thingToHide").show();
      }
 });

 $("#YourCheckBoxId").on("change", function() {
     $("#thingToHide").toggle();
 });
</script>

Good luck Radha!

  • Thankyou so much for the reply, Can I write the like this, As I am new to Kendo and razor, I have a doubt whether we can write a condition in .HtmlAttributes(new {condition}) ......................... @(Html.Kendo().EditorFor(model => model.Explantion).HtmlAttributes(new { @style= Model.IsAlert ? "display:show white-space: pre" :"display:none"})) Does it work? – Radha Feb 15 '17 at 14:57
  • I believe that should work, although the @style will need to have a ; between each style listed within, so "display:show; white-space: pre;" would be how you'd want to format that part of it. Try it out!! :) – Dinglemeyer NeverGonnaGiveUUp Feb 15 '17 at 15:13