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

Hide DatePicker control?

1 Answer 40 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
James
Top achievements
Rank 1
James asked on 05 Dec 2011, 09:34 PM
Can these controls not be hidden?  I have a form where I need to display a DatePicker, but only if a certain selection is made from another drop-down.  Now, I thought that I could simply declare a DatePicker control on the page and set Visible to false, and then change this property in Javascript when the selection is made, but the DatePicker control doesn't seem to have a Visible property (as most other MVC controls do).

I also tried setting appropriate HtmlAttributes with style = "display: none;", but that didn't work either.

What also doesn't work is wrapping the DatePicker control in a DIV with style = "display: none;" as that actually renders 2 DatePicker controls, the one inside the div as expected and a completely separate one outside of the DIV, which seems to be replacing the standard textbox I have currently in place.  However, this latter behavior seems strange to me and I'm going to continue troubleshooting it.  I think some HTML might be getting cached somewhere and not because of the DatePicker control itself.

The only other option I see is to create a new DatePicker control in Javascript on the fly, but that can get messy and I'd rather not have to go that route.  If anyone has any insight or help, that would be great.  Thanks.  I might see if I can add a Visible() method for the DatePicker control myself as it seems like it should be rather easy to implement.

1 Answer, 1 is accepted

Sort by
0
James
Top achievements
Rank 1
answered on 07 Dec 2011, 04:23 PM
Okay, I believe I've made all of the necessary changes to add a "Visible" property to a DatePicker control, however I seem to be unable to run the source project to view my results.  I will post the code here for anyone at Telerik to take a look at and then import the .dll into my current project to see if it works (UPDATE: It does, at least for my uses).  Keep in mind that all this does is set "display: none;" to the outer <div> element for this control, nothing more.  But for my purposes, that's all I needed.

In Telerik.Web.Mvc.UI.DatePicker:

// New property
public bool Visible
{
    get;
    set;
}


In Telerik.Web.Mvc.UI.Fluent.DatePickerBuilder:

// New method
public DatePickerBuilder Visible(bool visible)
{
    Component.Visible = visible;
 
    return this;
}

In Telerik.Web.Mvc.UI.Html.DatePickerHtmlBuilder:

// Existing method
public IHtmlNode Build()
{
    IHtmlNode wrapper = new HtmlElement("div")
            .Attribute("style", !Component.Visible ? "display:none;" : string.Empty) // New code
            .Attributes(Component.HtmlAttributes)
            .PrependClass(UIPrimitives.Widget, "t-datepicker")
            .ToggleClass("t-state-disabled", !Component.Enabled);
 
    IHtmlNode innerWrapper = ...
}
Tags
Date/Time Pickers
Asked by
James
Top achievements
Rank 1
Answers by
James
Top achievements
Rank 1
Share this question
or