Extending DatePicker issue from Razor

[Odin]

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.}

 

 

[Stefan]

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