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

[Solved] @Html.Telerik().DatePickerFor display issue

1 Answer 88 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.

Vince asked on 02 Apr 2013, 10:37 PM

issue.png

Hi, I'm using the @Html.Telerik().DatePickerFor in a MVC4 project from the 2013.1.219.340 Telerik.Web.Mvc.dll library. I was able to integrate the Telerik.Web.Mvc.dll into my existing MC 4 project and some of the controls seem to display correctly e.g. Html.Telerik().Grid but I'm having a display issue using DatePickerFor please see attachment.

Has anyone seen this before? I tried searching the forum but didn't come across this issue. I had to disable jQuery registration when registering the scripts as existing pages using the jquery datepicker stopped working. This is what I have in my source.

Under

Views\Shared\_Layout.cshtml

---------------------------------------

@using Telerik.Web.Mvc

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>@ViewBag.Title - Portal</title>

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<meta name="viewport" content="width=device-width" />

@Styles.Render("~/Content/themes/base/css", "~/Content/css")

@Scripts.Render("~/bundles/modernizr")

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/jqueryui")

@Scripts.Render("~/bundles/jqueryval")

@(Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(group => group

.Add("telerik.common.css")

.Add("telerik." + Html.GetCurrentTheme() + ".css")

.Add("telerik.rtl.css")

.Combined(false)

.Compress(false))

)

@RenderSection("HeadContent", required:false)

</head>

....

@RenderSection("scripts", required: false)

@(Html.Telerik().ScriptRegistrar().jQuery(false)

.DefaultGroup(group => group

.Compress(false))

.OnDocumentReady(

@<text>

prettyPrint();

</text>)

)

</body>

</html>

I also have a Date.cshtml in the Shared folder under the view for ALL views

e.g.

Under

Views\Shared\EditorTemplates\Date.cshtml

----------------------------------------------

@model Nullable<DateTime>

@{

DateTime dt = DateTime.Now;

if (Model != null)

{

dt = (System.DateTime) Model;

if (dt.Year == 0001)

{

dt = DateTime.Now;

}

@Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()),

new { @class = "datefield", @id = "datefield", type = "date" })

}

and I also have a Date.cshtml in one of the views that I am using the DatePicker

e.g.

Under

Views\Shared\MyView\EditorTemplates\Date.cshtml

----------------------------------------------

@model DateTime?

@(Html.Telerik().DatePickerFor(m => m)

.HtmlAttributes(new { id = ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty) + "_wrapper" })

)

and finally I have the following where I am using the DatePicker

@using (Html.BeginForm())

{

@Html.ValidationSummary(true)

<fieldset>

<legend>Expense</legend>

<div class="editor-label">

@Html.LabelFor(model => model.ExpenseDate)

</div>

<div class="editor-field">

@* @Html.EditorFor(model => model.ExpenseDate)*@

@Html.Telerik().DatePickerFor(model => model.ExpenseDate)

@Html.ValidationMessageFor(model => model.ExpenseDate)

</div>

...

1 Answer, 1 is accepted

answered on 03 Apr 2013, 04:31 PM

I found out what the problem was, the site.css that was included with the solution that MS creates had the <th> element modified

it had the following before



th {

    font-size: 1.2em;

    text-align: left;

    border: none 0px;

    padding-left: 0;

}



which was changed to

th {

font-size: 1.2em;

text-align: left;

border: none 0px;

padding-left: 0;

overflow: hidden;

width: 100px;

}

that was causing the issue so reverted it back. The project also had jQuery 1.6.2 which I don't believe is compatible with the library so updated it to jQuery 1.7.1 which corrected the problems with the two changes.