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

[Solved] TimePicker in a Window problem

4 Answers 140 Views

Window

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

This question is locked. New answers and comments are not allowed.

Pål asked on 09 Feb 2011, 07:59 PM

Hi,

I have a TimePicker inside a View that is rendered in a Window. My problem is that I cannot get the time dropdown to show. What am I doing wrong? The DatePicker I have on the same View works perfectly. Source code below.

<% Html.Telerik().Window()
               .Name("AddAppointment")
               .Title("Test")
               .Draggable(true)
               .Resizable(resizing => resizing.Enabled(true)
                   .MinHeight(300)
                   .MinWidth(300)
                   .MaxHeight(900)
                   .MaxWidth(500))
               .Modal(false)
               .Buttons(b => b.Maximize().Close())
               .LoadContentFrom("AddAppointment", "Loan", new { id = Model.Loan.ID })
               .Width(370)
               .Height(400)
               .Render();
%>

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<TinyCRM.Models.LoanEvent>" %>
 
<html>
<body>
    <h2>Legg til avtaletidspunkt</h2>
    <% using (Html.BeginForm())
       {%>
    <%: Html.ValidationSummary(true) %>
    <div class="editor-label">
        <%: Html.LabelFor(model=>model.Action) %>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Action)%>
        <%: Html.ValidationMessageFor(model => model.Action)%>
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model=>model.Comment) %>
    </div>
    <div class="editor-field">
        <%: Html.EditorFor(model => model.Comment)%>
        <%: Html.ValidationMessageFor(model => model.Comment)%>
    </div>
    <div class="editor-label">
        Dato
    </div>
    <div class="editor-field">
        <%= Html.Telerik().DatePicker()
            .Name("Date")
            .ShowButton(true)
            .Value("")    %>
    </div>
    
    <div class="editor-field">
        <table>
            <tr>
                <td>Start</td>
                <td>Slutt</td>
            </tr>
            <tr>
                <td>
                <%= Html.Telerik().TimePicker()
                    .Name("Start")
                %>
                </td>
                <td>
                <%= Html.Telerik().TimePicker()
                    .Name("Slutt")
                %>
                </td>
            </tr>
        </table>
        
    </div>
    
    <p style="clear: both;">
        <input type="submit" value="Opprett" />
    </p>
    <% } %>
</body>
</html>

4 Answers, 1 is accepted

Accepted

answered on 10 Feb 2011, 09:35 AM

Hi Pål,

The problem is caused by the fact that the TimePicker is loaded in a partial view with AJAX and cannot register its scripts automatically. Please refer to the following resources for more information how to proceed:

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-troubleshooting.html#LoadOnDemand

http://www.telerik.com/help/aspnet-mvc/using-with-partial-views-loaded-via-ajax.html

Greetings,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 11 Feb 2011, 11:01 AM

Thanks for your answer.

But I can't seem to get this to work. Should I include the

<%= Html.Telerik().ScriptRegistrar().DefaultGroup(group => etc

in the View page? I have tried to include it there:

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<TinyCRM.Models.LoanEvent>" %>

<html>

<body>

<h2>Legg til avtaletidspunkt</h2>

<% using (Html.BeginForm())

{%>

<%: Html.ValidationSummary(true) %>

<div class="editor-label">

<%: Html.LabelFor(model=>model.Action) %>

</div>

<div class="editor-field">

<%: Html.TextBoxFor(model => model.Action)%>

<%: Html.ValidationMessageFor(model => model.Action)%>

</div>

<div class="editor-label">

<%: Html.LabelFor(model=>model.Comment) %>

</div>

<div class="editor-field">

<%: Html.EditorFor(model => model.Comment)%>

<%: Html.ValidationMessageFor(model => model.Comment)%>

</div>

<div class="editor-label">

Dato

</div>

<div class="editor-field">

<%= Html.Telerik().DatePicker()

.Name("Date")

.ShowButton(true)

.Value("") %>

</div>

<div class="editor-field">

<table>

<tr>

<td>Start</td>

<td>Slutt</td>

</tr>

<tr>

<td>

<%= Html.Telerik().TimePicker()

.Name("Start")

%>

</td>

<td>

<%= Html.Telerik().TimePicker()

.Name("Slutt")

%>

</td>

</tr>

</table>

</div>

<p style="clear: both;">

<input type="submit" value="Opprett" />

</p>

<% } %>

<%

Html.Telerik().ScriptRegistrar()

.Globalization(true)

.DefaultGroup(group => group.Add("~/Scripts/jquery-1.4.4.min.js"))

.DefaultGroup(group => group.Add("~/Scripts/2010.3.1318/telerik.common.min.js"))

.DefaultGroup(group => group.Add("~/Scripts/2010.3.1318/telerik.timepicker.min.js"))

.Render();

%>

</body>

</html>

But this doesn't fix the problem. What am I missing?

While debugging I also get javascript errors in the jquery.js file.

Best regards
Pål Eilertsen

answered on 01 Mar 2011, 03:55 PM

Hi,

I am hoping you can help me some more on this subject.

I now have a Details view in my MVC 2 application. It contains tree windows controls. Each of which loads it's contents from other views.

<% Html.Telerik().Window()

.Name("CreateProperty")

.Title("Kunden ønsker kontakt med megler")

.Draggable(true)

.Resizable(resizing => resizing.Enabled(true)

.MinHeight(300)

.MinWidth(300)

.MaxHeight(900)

.MaxWidth(500))

.Modal(false)

.Buttons(b => b.Maximize().Close())

.LoadContentFrom("CreateProperty", "Telemarketing", new {id = Model.ID})

.Width(300)

.Height(700)

.Render();

%>

<% Html.Telerik().Window()

.Name("CreateLoan")

.Title("Kunden ønsker kontakt med banken")

.Draggable(true)

.Resizable(resizing => resizing.Enabled(true)

.MinHeight(300)

.MinWidth(300)

.MaxHeight(700)

.MaxWidth(500))

.Modal(false)

.Buttons(b => b.Maximize().Close())

.LoadContentFrom("CreateLoan", "Telemarketing", new {id = Model.ID})

.Width(300)

.Height(550)

.Render();

%>

<% Html.Telerik().Window()

.Name("ForFollowUp")

.Title("Kunden vil kontaktes senere")

.Draggable(true)

.Resizable(resizing => resizing.Enabled(true)

.MinHeight(300)

.MinWidth(300)

.MaxHeight(700)

.MaxWidth(500))

.Modal(false)

.Buttons(b => b.Maximize().Close())

.LoadContentFrom("FollowUp", "Telemarketing", new {id = Model.ID})

.Width(390)

.Height(300)

.Render();

%>

After following your steps I the CreateLoan window to work (I had a problem with the timepicker). I later added the FollowUp window. This view has a datepicker in it. And somehow I cannot get it to work all the time. Sometimes it works fine and other times it doesn't. I can open the Details view try the datepicker and find it not working, I can then refresh the page, and then it works. The datepicker and timepickers in the CreateLoan windows works fine all the time.

I have included the following code in the Details view:

<%

Html.Telerik().ScriptRegistrar().DefaultGroup(group =>

{

group.Add("~/Scripts/jquery-1.4.4.min.js");

group.Add("~/Scripts/2010.3.1318/telerik.common.min.js");

group.Add("~/Scripts/2010.3.1318/telerik.timepicker.min.js");

group.Add("~/Scripts/2010.3.1318/telerik.textbox.min.js");

})

.Globalization(true);

%>

And this got the timepickers in the CreateLoan window to work. The CreateLoan window also contains a datepicker which have worked the whole time.

As the behaviour is sporadic and works then don't work between refreshes of IE 8, I am having trouble knowing what to do to fix it.

Hope you can help me?

Best regards
Pål Eilertsen