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