How to show/hide elements based on model values

4 posts, 0 answers
  1. Matthew
    Matthew avatar
    2 posts
    Member since:
    Aug 2014

    Posted 13 Aug 2014 Link to this post

    I want to show or hide a div in my CustomEditorTemplate based on a value in my model, but I can't figure out how to accomplish this. In my case, an event requires approval, so I want to show a button if the model's Approved property is false. 
  2.
  3. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 15 Aug 2014 Link to this post

    Hi Matthew,

    This could be done by adding a visible binding, for example: 
    @model Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel
     
    <div data-bind="visible: isAllDay">
        isAllDayEvent = true
    </div>


    Regards,
    Alexander Popov
    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.

     
  5. Matthew
    Matthew avatar
    2 posts
    Member since:
    Aug 2014

    Posted 15 Aug 2014 in reply to Alexander Popov Link to this post

    I can't seem to get this to work. I'm using the following to call actions on my controller:  
    .Events(e => e.Error("error_handler"))
    .Read("Read", "Scheduler")
    .Update("Update", "Scheduler")
    .Destroy("Destroy", "Scheduler")
    .Create("Create", "Scheduler");

    How do I access my model sent via my controller in order to use the visible binding?

  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 19 Aug 2014 Link to this post

    Hello again Matthew,

    I am not sure I understand your questions correctly. Basically, when a custom editor template is specified it uses the same model as the Scheduler. The ASP.NET MVC wrappers use the Razor template to generate an equivalent Kendo UI Template, which is used by the Scheduler on the client side. Here is an example that mimics the behavior you wish to achieve:
    @(Html.Kendo().Scheduler<MyViewModel>()
        .Name("scheduler")
        .Editable(e=>e.TemplateName("testTemplate"))
        ...
    )
    And Views\Shared\EditorTemplates\testTemplate.cshtml:   
    @model MyViewModel
     
    <div data-bind="invisible: isApproved">
        <input type="button" name="Approve" value="Approve" />
    </div>

    Regards,
    Alexander Popov
    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.

     
  8.
Back to Top