Conditionally hide/show items

[n/a]

Is there a way to conditionally hide/show items in a form?  In my form I have a dropdown list with a Change handler.  Based on the item selected in the list, I either want to display the Budget field or the HourlyMin and HourlyMax fields.  I'm not sure how to do this.

items.Add()
    .Field(p => p.Budget)
    .Label(label => label.Text("Budget"));
items.Add()
    .Field(p => p.HourlyMin)
    .Label(label => label.Text("Hourly Min"));
items.Add()
    .Field(p => p.HourlyMax)
    .Label(label => label.Text("Hourly Max"));

[Martin]

Hello Scott,

Thank you for the provided code snippets.

I would suggest putting the Budget in one form group, and the Hourly fields in another, like below:

items.AddGroup()
    .Label(" ")
    .Layout("grid")
    .Items(i =>
    {
        i.Add()
             .Field(f => f.Budget)
             .Label(l => l.Text("Budget:"));
    });
items.AddGroup()
    .Label(" ")
    .Layout("grid")
    .Items(i =>
    {
        i.Add()
             .Field(f => f.HourlyMin)
             .Label(l => l.Text("HourlyMin:"));
        i.Add()
             .Field(f => f.HourlyMax)
             .Label(l => l.Text("HourlyMax:"));
    });

You can then hide/show the groups using the following code in the change event of the DropDownList:

function onChange(e) {

    var form = $("#exampleForm").data("kendoForm");
    if (e.sender.text() === "Budget") {
        form.wrapper.find(".k-form-fieldset")
            .first()
            .toggle(true);
        form.wrapper.find(".k-form-fieldset")
            .last()
            .toggle(false);
    }
    else {
        form.wrapper.find(".k-form-fieldset")
            .first()
            .toggle(false);
        form.wrapper.find(".k-form-fieldset")
            .last()
            .toggle(true);
    }
}

Attached you will find a small project to demonstrate the approach. Let me know how that works for you.

Regards,
Martin
Progress Telerik

[n/a]

Thank you for the response and code sample. It worked well.

Scott