locked
Hello All Looking for some understand of the Telerik datatime picker for MVC, very hard to understand how to use this. RRS feed

  • Question

  • User2130491911 posted

    Hi All,

    Have been trying for figure out how to use the telerik for the mvc. And each time I run into road blocks.

    For example I want to update an existing application I built to use the telerick date picker function.

    But none of the examples seem to work.

    I am following the following example and like most examples they seem to leave out keep steps making it hard for some one to learn how to make use of it

    so for the last 3 or so years I would try and fail and have never been able to figure out the telerik.

    I am following this:  https://docs.telerik.com/aspnet-mvc/getting-started/asp-net-mvc-5#add-telerik-ui-for-aspnet-mvc

    It is very hard to understand but When I try to add the datetime picker to my existing wizard based application The page fails to render.

    Here is my code that was built by the mvc wizard.

    <div class="form-group">
    
    @Html.LabelFor(model => model.RES_START_DATE, htmlAttributes: new { @class = "control-label col-md-3" })
    
          <div class="col-md-6">
                            
    @*@(Html.Kendo().DatePicker().Name("Date").Value(Model.RES_START_DATE).HtmlAttributes(new { type = "text" }))*@ 
              @Html.EditorFor(model => model.RES_START_DATE, new { htmlAttributes = new { @class = "datepicker" } })
           
              @Html.ValidationMessageFor(model => model.RES_START_DATE, "", new { @class = "text-danger" })
    
           </div>
    
    </div>

    The  does not work:

    @(Html.Kendo().DatePicker().Name("Date").Value(Model.RES_START_DATE).HtmlAttributes(new { type = "text" }))

    nor does this code work:

        @(Html.Kendo().DatePicker().Name("datepicker"))

    Any one have any ided how I would make an existing  razor page work with the telerik add on or is it not possible as the application was build not using

    the telerik.

    I have followed the steps in the guide adding the reference and the items listed but it fails.

    Telerik is very very very hard to understand to me.

    Thank you for the help in advance. 

    Monday, August 12, 2019 9:33 PM

All replies

  • User409696431 posted

    There is really nothing we can do when you say you've followed all the steps in that link, but that it doesn't work.  If you follow all the steps, it should work, and we can't tell you what you are missing.

    Regardless, if you have purchased Telerik controls, the place to get support is on their website. https://www.telerik.com/support/aspnet-mvc  They have forums and other support channels for paying customers.

    Tuesday, August 13, 2019 4:32 AM
  • User-1038772411 posted

    Hello, AppDev01

    As per your questions and its details you did all thing but not succedd, so as per my understanding you used Bootstrap and Telerik kendo grid right?. so in that case datepicker and its js may be conficted. so you can comment all bootsrap datepicker related js and css after that your kendo datepicker js and css reflacted.

    may be its so complicated so you can use mvc datepicker in your kendo grid and popups.

    in your kenod grid view 

    columns.Bound(o => o.CreatedAt).Format("{0:MM/dd/yyyy}").Width(190).HeaderTemplate(WebResources.Date);
    

    In Model where get set values :

     [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:HH:mm}", ApplyFormatInEditMode = true)] public DateTime? CreatedAt { get; set; }

    Kindly please check it you can get mvc datepicker and also set time formate date as per need.

    Thanks.

    Tuesday, August 13, 2019 5:54 AM
  • User665608656 posted

    Hi AppDev,

    According to your description, let's simplify the course you see.

    To use Telerik datatime picker in MVC, you should download the Kendo.Mvc.dll installation package, you can use NuGet to download it, this will get all the js and css needed when you use Telerik datatime picker.

    Then you need to modify the web.config file under the Views folder in your MVC project, add the following code in your web.config file (No need to add duplicates).

        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="Kendo.Mvc.UI" />

    For this ,you can refer to this link : mvc 4 razor view do not understand @Html.Kendo()

    After finish these, on your current razor page, you need to refer to the corresponding JS and CSS files as follows:

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.default.min.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/kendo/2014.1.318/jquery.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/kendo/2014.1.318/kendo.web.min.js")" type="text/javascript"></script>
    </head>
    <body>
        <div>
            @(Html.Kendo().DatePicker().Name("Date").Value("2019/09/09").HtmlAttributes(new { type = "text" }))
            @(Html.Kendo().DatePicker().Name("datepicker")) 
        </div>
    </body>
    </html>

    Here is the result of this work demo:

    Best Regards,

    YongQing.

    Tuesday, August 13, 2019 6:30 AM
  • User2130491911 posted

    I get this Error?

    <input id="Date" name="Date" type="text" value="8/13/2019" /><script>
    jQuery(function(){jQuery("#Date").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
    </script

    'jQuery' is undefined

    What does this mean?

    Tuesday, August 13, 2019 8:15 PM
  • User2130491911 posted

    Also... my Create.cshtml page does not have a head  or html section.

    My page was created by the mvc wizard and you create a control it creates a view page

    This is how my create.cshtml page starts...

    @model XXXXsystem.ViewModels.VRS_XXX_VM
    
    
    @{
        ViewBag.Title = "Some Text";
    }
    
    <label class="Label">Some More Text</label>
    
    @*@using (Html.BeginForm(new { id = "target" }))*@
    
    
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
     
    
        @*<h5>Text</h5>*@
        <hr />
    
    
    
        <div class="row">
            <div class="col-md-6">
                <div class="form-horizontal">
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    
    ...

    It does not have a head section... 

    Tuesday, August 13, 2019 8:21 PM
  • User2130491911 posted

    Well I tied may different attempts today... I have concluded that telerik does not work in mvc. 

    Edit,

    When I use your code I get 20 input boxes using this

                            @(Html.Kendo().DatePicker().Name("Date").Value("2019/09/09").HtmlAttributes(new { type = "text" }))
                            @(Html.Kendo().DatePicker().Name("datepicker"))
    

    One has the value 2019/09/09

    and the other is blank

    I did all the steps you have and as well as the ones on the telerik site.

    I am guessing telerik is too hard for me to understand. 

    Thanks again for all the help.

    Tuesday, August 13, 2019 9:32 PM
  • User665608656 posted

    Hi AppDev,

    According to your description, the reason why my page has head or html and so on is that I don't use Layout pages.

    The 'jQuery (...). Kendo datepicker is not a function' error you received is also due to the problems caused by your current reference to Layout pages.

    If you need to use the Layout page without any change, the JS file will cause duplication. So, let's solve this issue.

    According to the wizard document you refer to, please find the Shared folder under the Views folder in your current MVC project, and find the _Layout.cshtml file below, open the file, and modify some of its contents as follow:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title - My ASP.NET Application</title>
        @Styles.Render("~/Content/kendo/2014.1.318/kendo.common.min.css")
        @Styles.Render("~/Content/kendo/2014.1.318/kendo.default.min.css")
        @Styles.Render("~/Content/css")
    
        @Scripts.Render("~/Scripts/kendo/2014.1.318/jquery.min.js")
        @Scripts.Render("~/bundles/bootstrap")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/Scripts/kendo/2014.1.318/kendo.web.min.js")
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
            </footer>
        </div>
        @RenderSection("scripts", required: false)
    </body>
    </html>
    

    After change  _Layout.cshtml file like this, in your current view page, you only need to add anything you want with the two statements like below:

    @{
        ViewBag.Title = "Some Text";
    }
    <h2>Index</h2>
    
    @*add what you want*@ @(Html.Kendo().DatePicker().Name("Date").Value("2019/09/09").HtmlAttributes(new { type = "text" })) @(Html.Kendo().DatePicker().Name("datepicker"))

    Here is the result of this work demo:

    Best Regards,

    YongQing.

    Wednesday, August 14, 2019 1:52 AM
  • User2130491911 posted

    Hi All,

    So there is the layout page below: If I remove this section which was created by the wizard

    My page fails to render correctly.. it has no styling so i can't remove this and just put 

    int the telerik information:

            @Styles.Render("~/Content/css")
            @Scripts.Render("~/bundles/modernizr")
            @Styles.Render("~/Content/style.css")
            @Scripts.Render("~/bundles/jquery")
            @Scripts.Render("~/bundles/bootstrap")
            @Styles.Render("~/Content/kendo/css") @*Telerik Stuff*@
    

    The is the _layout page

    *********************************************
    This is the Layout File
    *********************************************
    
    <!DOCTYPE html>
    <html>
    <head>
    
        <meta http-equiv="X-UA-Compatible" content="IE=11,chrome=1">
    
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <title>@ViewBag.Title - XXX</title>
    
            @Styles.Render("~/Content/css")
            @Scripts.Render("~/bundles/modernizr")
            @Styles.Render("~/Content/style.css")
            @Scripts.Render("~/bundles/jquery")
            @Scripts.Render("~/bundles/bootstrap")
            @Styles.Render("~/Content/kendo/css") @*Telerik Stuff*@
    
            <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css">
            <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css">
    
            <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
            <script src="http://kendo.cdn.telerik.com/2019.2.619/js/jszip.min.js"></script>
            <script src="http://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
            <script src="http://kendo.cdn.telerik.com/2019.2.619/js/kendo.aspnetmvc.min.js"></script>
        </head>
    
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
    
            <div class="container">
    
    
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
    
                    @Html.ActionLink("AVRIS | Agency Vehicle Request Information System", "Index", "VRS_REQUEST", new { area = "" }, new { @class = "navbar-brand" })
    
                </div>
    
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
    
                        <li>@Html.ActionLink("XX| XX", "XX", "XX")</li>
                        <li>@Html.ActionLink("XXX", "XX", "XX")</li>
                        <li>@Html.ActionLink(XX | XXX", "XXX", "XX")</li>
                      
    
                </div>
            </div>
        </div>
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <label class="Label">
                    &copy; @DateTime.Now.Year
                    @ViewContext.Controller.GetType().Assembly.GetName().Version
                    @File.GetCreationTime(ViewContext.Controller.GetType().Assembly.Location)
                </label>
                @Html.ActionLink(" |XXXX", "XXXX", "XXXX")
            </footer>
        </div>
    
    
    
    
        @RenderSection("scripts", required: false)
    </body>
    </html>
    

    This is the Bundle file (Created by the wizard with the telerik added 

    *********************************************
    This is the BundleConfig.cs File
    *********************************************
    
    
    using System.Web;
    using System.Web.Optimization;
    
    namespace XXXX
    {
        public class BundleConfig
        {
            // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
            public static void RegisterBundles(BundleCollection bundles)
            {
                bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                            "~/Scripts/jquery-{version}.js"));
    
                bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                            "~/Scripts/jquery.validate*"));
    
                // Use the development version of Modernizr to develop with and learn from. Then, when you're
                // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
                bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                            "~/Scripts/modernizr-*"));
    
                bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                          "~/Scripts/bootstrap.js",
                          "~/Scripts/respond.js"));
    
                bundles.Add(new StyleBundle("~/Content/css").Include(
                          "~/Content/bootstrap.css",
                          "~/Content/site.css"));
    
                bundles.Add(new ScriptBundle("~/bundles/kendo").Include("~/Scripts/kendo/kendo.all.min.js", "~/Scripts/kendo/kendo.aspnetmvc.min.js"));
                // uncomment below if using the Scheduler 
                // "~/Scripts/kendo/kendo.timezones.min.js", 
    
    
                bundles.Add(new StyleBundle("~/Content/kendo/css").Include("~/Content/kendo/kendo.common-bootstrap.min.css", "~/Content/kendo/kendo.bootstrap.min.css"));
    
                bundles.IgnoreList.Clear();
            }
        }
    }

    This is the web Config File

    *********************************************
    This is the Web Config
    *********************************************
    
    <?xml version="1.0"?>
    
    <configuration>
      <configSections>
        <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
          <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
          <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
        </sectionGroup>
      </configSections>
    
      <runtime>
        <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
          <dependentAssembly>
            <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
            <bindingRedirect oldVersion="1.0.0.0-5.2.7.0" newVersion="5.2.7.0" />
          </dependentAssembly>
        </assemblyBinding>
      </runtime>
    
      <system.web.webPages.razor>
        <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <pages pageBaseType="System.Web.Mvc.WebViewPage">
          <namespaces>
            <add namespace="System.Web.Mvc" />
            <add namespace="System.Web.Mvc.Ajax" />
            <add namespace="System.Web.Mvc.Html" />
            <add namespace="System.Web.Optimization"/>
            <add namespace="System.Web.Routing" />
            <add namespace="VehicleRequestSystem" />
            
            <add namespace="Kendo.Mvc.UI" />
            
          </namespaces>
        </pages>
      </system.web.webPages.razor>
    
      <appSettings>
        <add key="webpages:Enabled" value="false" />
      </appSettings>
    
      <system.webServer>
        <handlers>
          <remove name="BlockViewHandler"/>
          <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
        </handlers>
      </system.webServer>
    
      <system.web>
        <compilation>
          <assemblies>
            <add assembly="System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
          </assemblies>
        </compilation>
      </system.web>
    </configuration>

    This is the create.cshtml file where the date picker needs to display... the original date picker shows...

    but not the telerik datapicker.

    *********************************************
    This is the Create.cshtml where I want 
    the date picker to show
    *********************************************
    
    @model XXXSystem.ViewModels.XXX_VM
    
    
    @{
        ViewBag.Title = "XXXX";
    }
    
    <label class="Label">XXXX</label>
    
    @*@using (Html.BeginForm(new { id = "target" }))*@
    
    @using Kendo.Mvc.UI
    .
    .
    .
    <div class="form-group">
    
                        @Html.LabelFor(model => model.START_DATE, htmlAttributes: new { @class = "control-label col-md-3" })
    
                        <div class="col-md-6">
    
                            @(Html.Kendo().DatePicker().Name("datepicker"))
    
                            @Html.EditorFor(model => model.START_DATE, new { htmlAttributes = new { @class = "datepicker" } })
                            @Html.ValidationMessageFor(model => model.START_DATE, "", new { @class = "text-danger" })
                        </div>
    
    
    </div>
    ***************************************

    Here is the java scripting information that is in the create.schmtl file
    The Java scripting functions run XXX functions once the date is selected
    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    
        <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
        <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
        <script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
        <script src="../../Scripts/MvcFoolproofValidation.js" type="text/javascript"></script>
    
    
    
        <script type="text/javascript">
    
    
            //$(document).ready(function () {
            //    $('.date-picker').datepicker();
            //    $('.date-picker').datepicker('setDate', new Date());
            //})
    
            $(document).ready(function () {
                $('.time-picker').timepicker({ 'timeFormat': 'H:i' })
                //$('.time-picker').timepicker({ 'timeFormat': 'h:i' })
    
                $('#RES_START_TIME').on('changeTime', function () {
                    XXX();
                    XXX();
                })
    
    
                $('#RES_END_TIME').on('changeTime', function () {
                    XXX();
                    XXX();
                })
    
            });
    
    
    
            //Set End Date  Datepicker
            $(document).ready(function () {
    
    
                //$('.date-picker').datepicker();
                //$('.date-picker').datepicker('setDate', new Date());
    
    
                $("#RES_START_DATE").datepicker({
                    defaultDate: new Date(),
                    minDate: new Date(),
                    onSelect: function (dateStr) {
                        $("#RES_THRU_DATE").val(dateStr);
                        $("#RES_THRU_DATE").datepicker("option", { minDate: new Date(dateStr) })
    
                        XX();
                        XXX();
                    }
                });
    
    
                $('#RES_THRU_DATE').datepicker({
                    //defaultDate: new Date(),
                    onSelect: function (dateStr) {
                        toDate = new Date(dateStr);
    
                       XXXX();
                        XXX();
                    }
                });
            });
    
    








    So is the above Correct?

    Can any one help or see why the telerik information is not working?

    Wednesday, August 21, 2019 6:41 PM
  • User2130491911 posted

    Not fond of pushing threads back up but does anyone know why this may not be working?

    Or is telerik just a bad product?

    Wednesday, August 28, 2019 1:23 PM