Extending DatePicker issue from Razor

2 posts, 0 answers
  1. Odin
    Odin avatar
    2 posts
    Member since:
    Jun 2016

    Posted 10 Jan Link to this post

    Hi,

    I would like to normalize the behaviour of our DatePickers and also add some special date support in our application. I have managed to extend the JS version

    01./// New date control which extends the DatePicker
    02.(function ($, kendo) {
    03.    var ui = kendo.ui,
    04.        KendoDatePicker = ui.DatePicker;
    05. 
    06.    var MyDatePicker = KendoDatePicker.extend({
    07.        init: function (element, options) {
    08.            var that = this;
    09. 
    10.            // Call base init
    11.            KendoDatePicker.fn.init.call(this, element, options);
    12. 
    13.            // Keep a reference around
    14.            $(element).data("datePicker", that);
    15. 
    16....
    17....
    18. 
    19.    // Register this plugin
    20.    kendo.ui.plugin(MyDatePicker);
    21.})($, window.kendo);

     

    This works fine when I call it using data-role="myDatePicker". Now I want to also support setting this up from the MVC Razor views.

    I see some examples for setting up extension methods and I have attempted also creating a class derived from DatePicker so that I can support my custom properties as well as to get the data-role set to "myDatePicker". It sort of works, but it does not look like it is setting up properly the base properties such as HtmlAttributes  (Razor sets it up like this:  .HtmlAttributes(new { style = "width:150px" }))... the HTML will output "width: 100%").

    Is there a nice example for what I am trying to do?

     

    Code in c#

    001.namespace Project.UI.Website.Helpers
    002.{
    003.    using System;
    004.    using System.Collections.Generic;
    005.    using System.IO;
    006.    using System.Linq;
    007.    using System.Web.Mvc;
    008. 
    009.    using Kendo.Mvc;
    010.    using Kendo.Mvc.Extensions;
    011.    using Kendo.Mvc.Infrastructure;
    012.    using Kendo.Mvc.UI;
    013.    using Kendo.Mvc.UI.Fluent;
    014. 
    015.    public static class KendoHelperExtensions
    016.    {
    017.        public static MyDatePickerBuilder MyDatePickerBuilder(this HtmlHelper helper)
    018.        {
    019.            WidgetFactory factory = helper.Kendo();
    020. 
    021.            MyDatePicker picker = new MyDatePicker(
    022.                factory.HtmlHelper.ViewContext,
    023.                factory.Initializer,
    024.                factory.HtmlHelper.ViewData);
    025. 
    026.            return new MyDatePickerBuilder(picker);
    027.        }
    028.    }
    029. 
    030.    public class MyDatePickerBuilder : DatePickerBuilder
    031.    {
    032.        public MyDatePickerBuilder(DatePicker component)
    033.            : base(component)
    034.        {
    035.        }
    036. 
    037.        private MyDatePicker Picker => (MyDatePicker)this.Component;
    038. 
    039.        public MyDatePickerBuilder AllowEmpty(bool value)
    040.        {
    041.            this.Picker.AllowEmpty = value;
    042.            return this;
    043.        }
    044. 
    045.        public MyDatePickerBuilder Name(string name)
    046.        {
    047.            this.Component.Name = name;
    048.            return this;
    049.        }
    050. 
    051.        public MyDatePickerBuilder HtmlAttributes(object attributes)
    052.        {
    053.            return (MyDatePickerBuilder)base.HtmlAttributes(attributes);
    054.        }
    055.    }
    056. 
    057.    public class MyDatePicker : DatePicker
    058.    {
    059.        public MyDatePicker(ViewContext viewContext, IJavaScriptInitializer initializer, ViewDataDictionary viewData)
    060.            : base(viewContext, initializer, viewData)
    061.        {
    062.            this.AllowEmpty = false;
    063.        }
    064. 
    065.        public bool AllowEmpty { get; set; }
    066. 
    067.        public override void WriteInitializationScript(TextWriter writer)
    068.        {
    069.            Dictionary<string, object> dictionary = new Dictionary<string, object>(this.Events);
    070. 
    071.            dictionary["allowEmpty"] = (object)this.AllowEmpty;
    072. 
    073.            string str = "#";
    074.            if (this.IsInClientTemplate)
    075.                str = "\\" + str;
    076.            IDictionary<string, object> json1 = this.Animation.ToJson();
    077.            if (json1.Keys.Any<string>())
    078.                dictionary["animation"] = json1["animation"];
    079.            if (this.ARIATemplate.HasValue())
    080.                dictionary["ARIATemplate"] = (object)this.ARIATemplate;
    081.            if (this.Culture.HasValue())
    082.                dictionary["culture"] = (object)this.Culture;
    083.            dictionary["format"] = (object)this.Format;
    084.            if (this.ParseFormats.Any<string>())
    085.                dictionary["parseFormats"] = (object)this.ParseFormats;
    086.            dictionary["min"] = (object)this.Min;
    087.            dictionary["max"] = (object)this.Max;
    088.            if (this.EnableFooter)
    089.            {
    090.                if (this.FooterId.HasValue())
    091.                    dictionary["footer"] = (object)new ClientHandlerDescriptor()
    092.                                                       {
    093.                                                           HandlerName = string.Format("jQuery('{0}{1}').html()", (object)str, (object)this.FooterId)
    094.                                                       };
    095.                else if (this.Footer.HasValue())
    096.                    dictionary["footer"] = (object)this.Footer;
    097.            }
    098.            else
    099.                dictionary["footer"] = (object)this.EnableFooter;
    100.            if (this.Depth.HasValue())
    101.                dictionary["depth"] = (object)this.Depth;
    102.            if (this.Start.HasValue())
    103.                dictionary["start"] = (object)this.Start;
    104.            this.MonthTemplate.IdPrefix = str;
    105.            IDictionary<string, object> json2 = this.MonthTemplate.ToJson();
    106.            if (json2.Keys.Any<string>())
    107.                dictionary["month"] = (object)json2;
    108.            if (this.Dates.Any<DateTime>())
    109.                dictionary["dates"] = (object)this.Dates;
    110.            if (this.DisableDates != null && this.DisableDates.Count<string>() > 0)
    111.                dictionary["disableDates"] = (object)this.DisableDates;
    112.            else if (this.DisableDatesHandler != null)
    113.                dictionary["disableDates"] = (object)this.DisableDatesHandler;
    114. 
    115.            writer.Write(this.Initializer.Initialize(this.Selector, "MyDatePicker", (IDictionary<string, object>)dictionary));
    116. 
    117.            base.WriteInitializationScript(writer);
    118.        }
    119.    }
    120.}

     

     

  2. Stefan
    Admin
    Stefan avatar
    2027 posts

    Posted 12 Jan Link to this post

    Hello, Odin,

    The Kendo UI Widgets can be extended by overwriting the HTML helper.

    We have an example which demonstrates how to overwrite some of the widget built-in properties and I have attached it for reference.

    If additional assistance is needed with the custom properties I can recommend our Professional Services team which can assist with the custom widgets and implementations:

    https://www.progress.com/services/outsourcing/feature-customization

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top