static void OnReady()
{
win = new jQuery("#window");
undo = new jQuery("#undo")
.bind("click", e =>
{
win.data("kendoWindow").As<Window>().open();
undo.hide();
});
if (win.data("kendoWindow") == null)
{
win.kendoWindow(new WindowConfiguration
{
width = "630px",
height = "315px",
title = "Rams's Ten Principles of Good Design",
actions = new[] { "Refresh", "Close" },
contentString = "../../content/web/window/ajax/ajaxContent1.html",
open = onOpen,
activate = onActivate,
close = onClose,
deactivate = onDeactivate,
refresh = onRefresh,
resize = onResize,
dragstart = onDragStart,
dragend = onDragEnd
});
}
}
static void OnReady()
{
var win = new jQuery("#window");
var undo = new jQuery("#undo");
undo.bind("click", e =>
{
win.data("kendoWindow").As<Window>().open();
undo.hide();
});
if (win.data("kendoWindow") == null)
{
win.kendoWindow(new WindowConfiguration
{
width = "500px",
actions = new JsArray { "Custom", "Minimize", "Maximize", "Close" },
title = "About Josef Hoffmann",
close = () => undo.show().As<Window>()
});
}
win.data("kendoWindow").As<Window>().wrapper.find(".k-i-custom").click(e =>
{
HtmlContext.alert("Custom action button clicked");
e.preventDefault();
});
}
static void OnReady()
{
var grid = new jQuery("#grid").kendoGrid(new GridConfiguration
{
dataSourceObject = new DataSourceConfiguration
{
pageSize = 10,
data = People.createRandomData(50)
},
pageableBoolean = true,
height = 260,
columns = new JsArray<GridColumnConfiguration> {
new GridColumnConfiguration { field = "FirstName", title = "First Name" },
new GridColumnConfiguration { field = "LastName", title = "Last Name" },
new GridColumnConfiguration { field = "Title" },
new GridColumnConfiguration { command = new {text="Details", click= new JsAction<Event>(showDetails)}.As<GridColumnsCommandOptions>(), title = " ", widthString = "110px"}
}
}).data("kendoGrid");
wnd = new jQuery("#details").kendoWindow(new WindowConfiguration
{
title = "Customer Details",
modal = true,
visible = false,
resizable = false,
width = "300"
}).data("kendoWindow").As<Window>();
detailsTemplate = Kendo.template(new jQuery("#template").html());
}
static void RunTests()
{
var fixtures = new object[] {
new ExprTests(),
new DiffTests(),
new ParserTests(),
new NumberTests(),
new FunctionsTests()
};
jQuery jQuery = new jQuery(HtmlContext.document.body);
jQuery.append("<br/>");
int ok = 0, failed = 0;
foreach(var fixture in fixtures) {
MethodInfo[] methods = fixture.GetType().GetMethods();
foreach(var method in methods) {
if(method.Name.EndsWith("Test")) {
if(RunTest(jQuery, fixture, method))
ok++;
else
failed++;
}
}
}
jQuery.append(string.Format("<br/>TOTAL {0}<br/>PASSED: {1}<br/>FAILED: {2}<br/>", (ok + failed), ok, failed));
}
static void OnReady()
{
// create ComboBox from input HTML element
new jQuery("#input").kendoComboBox(new ComboBoxConfiguration
{
dataTextField = " text",
dataValueField = "value",
dataSourceObject = new JsArray<ComboBoxConfiguration> {
new ComboBoxConfiguration { text = "Cotton", value = "1"},
new ComboBoxConfiguration { text = "Polyester", value = "2" },
new ComboBoxConfiguration{ text = "Cotton/Polyester", value = "3" },
new ComboBoxConfiguration{ text = "Rib Knit", value = "4" }
},
filter = "contains",
suggest = true,
index = 3
});
// create ComboBox from select HTML element
new jQuery("#select").kendoComboBox();
var input = new jQuery("#input").data("kendoComboBox").As<ComboBox>();
var select = new jQuery("#select").data("kendoComboBox").As<ComboBox>();
new jQuery("#get").click(() => HtmlContext.window.alert("Thank you! Your Choice is:\n\nFabric ID: " + input.value() + " and Size: " + select.value()));
}
static void OnReady()
{
var start_counter = new jQuery("#event-start");
var drag_counter = new jQuery("#event-drag");
var stop_counter = new jQuery("#event-stop");
var counts = new JsNumber[3] { 0, 0, 0 };
new jQuery("#draggable").draggable(new DraggableOptions
{
start = (e, ui) =>
{
counts[0]++;
updateCounterStatus(drag_counter, counts[0]);
},
drag = (e, ui) =>
{
counts[1]++;
updateCounterStatus(drag_counter, counts[1]);
},
stop = (e, ui) =>
{
counts[2]++;
updateCounterStatus(drag_counter, counts[2]);
}
});
}
protected override void onPreRegister()
{
base.onPreRegister();
this.rootNode = jQueryContext.J(decoratedElement);
templateBuilder.captureAndEmptyTemplateContents(rootNode);
}
static void OnReady()
{
var spin = new jQuery( "#spinner" ).spinner();
new jQuery( "#disable" ).click(() =>
{
if ( spin.spinner( "option", "disabled" ).As<bool>() ) {
spin.spinner( "enable" );
} else {
spin.spinner( "disable" );
}
});
new jQuery( "#destroy" ).click(() => {
if ( spin.data( "ui-spinner" ).As<bool>() ) {
spin.spinner( "destroy" );
} else {
spin.spinner();
}
});
new jQuery( "#getvalue" ).click(() => {
HtmlContext.window.alert( spin.spinner( "value" ) );
});
new jQuery( "#setvalue" ).click(() => {
spin.spinner( "value", 5 );
});
new jQuery( "button" ).button();
}
static void OnReady()
{
var data = new JsArray<DropDownListConfiguration> {
new DropDownListConfiguration {text = "The Shawshank Redemption", value ="1"},
new DropDownListConfiguration {text = "The Godfather", value ="2"},
new DropDownListConfiguration {text = "The Godfather = Part II", value ="3"},
new DropDownListConfiguration {text = "Il buono, il brutto, il cattivo.", value ="4"},
new DropDownListConfiguration {text = "Pulp Fiction", value ="5"},
new DropDownListConfiguration {text = "12 Angry Men", value ="6"},
new DropDownListConfiguration {text = "Schindler's List", value ="7"},
new DropDownListConfiguration {text = "One Flew Over the Cuckoo's Nest", value ="8"},
new DropDownListConfiguration {text = "Inception", value ="9"},
new DropDownListConfiguration {text = "The Dark Knight", value ="10"}
};
new jQuery("#products").kendoDropDownList(new DropDownListConfiguration
{
dataTextField = "text",
dataValueField = "value",
dataSourceObject = data
})
.closest(".k-widget")
.attr("id", "products_wrapper");
var dropdownlist = new jQuery("#products").data("kendoDropDownList").As<DropDownList>();
JsAction<Event> setValue = e =>
{
if (e.type != "keypress" || Kendo.keys.ENTER == e.keyCode)
dropdownlist.value(new jQuery("#value").val().As<JsString>());
},
setIndex = e =>
{
if (e.type != "keypress" || Kendo.keys.ENTER == e.keyCode)
{
var index = int.Parse(new jQuery("#index").val().As<JsString>());
dropdownlist.select(index);
}
},
setSearch = e =>
{
if (e.type != "keypress" || Kendo.keys.ENTER == e.keyCode)
dropdownlist.search(new jQuery("#word").val().As<JsString>());
};
new jQuery("#enable").click(() => dropdownlist.enable());
new jQuery("#disable").click(() =>dropdownlist.enable(false));
new jQuery("#open").click(() => dropdownlist.open());
new jQuery("#close").click(() => dropdownlist.close());
new jQuery("#getValue").click(() => HtmlContext.window.alert(dropdownlist.value()));
new jQuery("#getText").click(() => HtmlContext.window.alert(dropdownlist.text()));
new jQuery("#setValue").click(setValue);
new jQuery("#value").keypress(setValue);
new jQuery("#select").click(setIndex);
new jQuery("#index").keypress(setIndex);
new jQuery("#find").click(setSearch);
new jQuery("#word").keypress(setSearch);
}
static void OnReady()
{
var tooltips = new jQuery("[title]").tooltip();
new jQuery("<button>")
.text("Show help")
.button()
.click(() => tooltips.tooltip("open"))
.insertAfter("form");
}
static void updateCounterStatus(jQuery event_counter, JsNumber new_count)
{
if (!event_counter.hasClass("ui-state-hover"))
{
event_counter.addClass("ui-state-hover")
.siblings().removeClass("ui-state-hover");
}
// ...then update the numbersKD
new jQuery("span.count", event_counter).text(new_count.As<JsString>());
}
static void draggableOnDragEnd(Event e)
{
kendoConsole.log("dragend");
var draggable = new jQuery("#draggable");
// if (!draggable.data("kendoDraggable").As<Draggable>().dropped)
//{
// new jQuery("#droptarget").text("Try again!");
//}
draggable.removeClass("hollow");
}
static JsString getEffects()
{
var expand = new jQuery("#expand")[0].As<HtmlInputRadio>().@checked;
var opacity = new jQuery("#opacity")[0].As<HtmlInputCheckBox>().@checked;
var s = "";
if (expand)
s += "expand:vertical ";
if (opacity)
s += "fadeIn";
if (s == "")
return false.As<JsString>();
return s;
}
static void OnReady()
{
new jQuery("#editor").kendoEditor();
var editor = new jQuery("#editor").data("kendoEditor").As<Editor>();
JsAction setValue = () =>
editor.value(new jQuery("#value").val().As<JsString>());
new jQuery("#get").click(() => HtmlContext.window.alert(editor.value()));
new jQuery("#set").click(setValue);
}
static bool RunTest(jQuery jQuery, object fixture, MethodInfo method)
{
string status = "OK";
bool success = true;
try {
method.Invoke(fixture, null);
} catch(Exception e) {
status = "Failure: " + e;
success = false;
}
jQuery.append(fixture.GetType().Name + "." + method.Name + ": " + status + "<br/>");
return success;
}
static void OnReady()
{
var select = new jQuery("#minbeds");
var slider = new jQuery("<div id='slider'></div>").insertAfter(select).slider(new SliderOptions
{
min = 1,
max = 6,
range = "min",
value = select[0].As<HtmlSelect>().selectedIndex + 1,
slide = (e, ui) => select[0].As<HtmlSelect>().selectedIndex = ui.value - 1
});
new jQuery("#minbeds").change(e => slider.slider("value", e.currentTarget.As<HtmlSelect>().selectedIndex + 1));
}
static void OnReady()
{
new jQuery("#spinner").spinner(new SpinnerOptions
{
step = 0.01,
numberFormat = "n"
});
new jQuery("#culture").change(() =>
{
var current = new jQuery("#spinner").spinner("value");
//TODO: Globalize.culture( new jQuery(JsContext.@this).val() );
new jQuery("#spinner").spinner("value", current);
});
}
static void OnReady()
{
new jQuery("#selectable").selectable(new SelectableOptions
{
stop = (e, ui) =>
{
var result = new jQuery("#select-result").empty();
new jQuery(".ui-selected", e.currentTarget).each((number, elemnt) =>
{
var index = new jQuery("#selectable li").index(elemnt);
result.append(" #" + (index + 1));
});
}
});
}
static void OnReady()
{
var wnd = new jQuery("#window");
new jQuery("#open").click(e => wnd.data("kendoWindow").As<Window>().open());
new jQuery("#close").click(e => wnd.data("kendoWindow").As<Window>().close());
//new jQuery("#refresh").click(e => wnd.data("kendoWindow").As<Window>().refresh());
wnd.kendoWindow(new WindowConfiguration
{
width = "505px",
height = "315px",
title = "Rams's Ten Principles of Good Design",
actions = new[] { "Refresh", "Maximize", "Close" },
contentString = "../../content/web/window/ajax/ajaxContent1.html"
});
}
static void OnReady()
{
var original = new jQuery("#panelbar").clone(true);
original.find(".k-state-active").removeClass("k-state-active");
new jQuery(".configuration input").change(e =>
{
var panelBar = new jQuery("#panelbar").As<PanelBar>();
jQuery clone = original.clone(true);
panelBar.data("kendoPanelBar").collapse(new jQuery("#panelbar .k-link"));
panelBar.replaceWith(clone);
initPanelBar();
});
initPanelBar();
}
static void OnReady()
{
new jQuery("#numerictextbox").kendoNumericTextBox();
var numerictextbox = new jQuery("#numerictextbox").data("kendoNumericTextBox").As<NumericTextBox>();
JsAction setValue = () => numerictextbox.value(new jQuery("#value").val().As<JsString>());
new jQuery("#enable").click(() => numerictextbox.enable());
new jQuery("#disable").click(() => numerictextbox.enable(false));
new jQuery("#value").kendoNumericTextBox(new NumericTextBoxConfiguration
{
change = e=>setValue()
});
new jQuery("#set").click(setValue);
new jQuery("#get").click(() => HtmlContext.window.alert(numerictextbox.value()));
}
// run the currently selected effect
static void runEffect()
{
// get effect type from
var selectedEffect = new jQuery("#effectTypes").val().As<EffectType>();
// most effect types need no options passed by default
var options = new JsObject { };
if (selectedEffect.ExactEquals("scale"))
{
options = new { percent = 0 }.As<JsObject>();
}
else if (selectedEffect.ExactEquals("size"))
{
options = new { to = new { width = 200, height = 60 } }.As<JsObject>();
}
// run the effect
new jQuery("#effect").hide(selectedEffect, options, 1000, callback);
}
// run the currently selected effect
static void runEffect()
{
// get effect type from
var selectedEffect = new jQuery("#effectTypes").val().As<EffectType>();
var options = new JsObject { };
if (selectedEffect.ExactEquals("scale"))
{
options = new { percent = 0 }.As<JsObject>();
}
else if (selectedEffect.ExactEquals("transfer"))
{
options = new { to = "#button", className = "ui-effects-transfer" }.As<JsObject>();
}
else if (selectedEffect.ExactEquals("size"))
{
options = new { to = new Size { width = 200, height = 60 } }.As<JsObject>();
}
// run the effect
new jQuery("#effect").effect(selectedEffect, options, 500, callback);
}
static void OnReady()
{
new jQuery("#datepicker").kendoDatePicker()
.closest(".k-widget")
.attr("id", "datepicker_wrapper");
var datepicker = new jQuery("#datepicker").data("kendoDatePicker").As<DatePicker>();
JsAction setValue = () => datepicker.value(new jQuery("#value").val().As<JsString>());
new jQuery("#enable").click(() => datepicker.enable());
new jQuery("#disable").click(() => datepicker.enable(false));
new jQuery("#open").click(() => datepicker.open());
new jQuery("#close").click(() => datepicker.close());
new jQuery("#value").kendoDatePicker(new DatePickerConfiguration
{
change = setValue
});
new jQuery("#set").click(setValue);
new jQuery("#get").click(() =>
HtmlContext.window.alert(datepicker.value()));
}
static void OnReady()
{
var slider = new jQuery("#slider").kendoSlider(new SliderConfiguration {
increaseButtonTitle = "Right",
decreaseButtonTitle = "Left",
min = -10,
max = 10,
smallStep = 2,
largeStep = 1
}).data("kendoSlider");
new jQuery(".eqSlider").kendoSlider(new SliderConfiguration {
orientation = OrientationOptions.vertical,
min = -20,
max = 20,
smallStep = 1,
largeStep = 20,
showButtons = false
});
}
static void OnReady()
{
var original = new jQuery("#menu").clone(true);
original.find(".k-state-active").removeClass("k-state-active");
new jQuery(".configuration input").change(e =>
{
jQuery menu = new jQuery("#menu");
jQuery clone = original.clone(true);
menu.data("kendoMenu").As<Menu>().close(new jQuery("#menu .k-link"));
menu.replaceWith(clone);
initMenu();
});
initMenu();
}
static void OnReady()
{
new jQuery("#calendar").kendoCalendar();
var calendar = new jQuery("#calendar").data("kendoCalendar").As<Calendar>();
calendar.value(new JsDate());
JsAction navigate = () =>
{
var value = new jQuery("#direction").val().As<JsString>();
switch (value)
{
case "up":
calendar.navigateUp();
break;
case "down":
calendar.navigateDown(calendar.value());
break;
case "past":
calendar.navigateToPast();
break;
default:
calendar.navigateToFuture();
break;
};
};
JsAction setValue = () => calendar.value(new jQuery("#value").val().As<JsString>());
new jQuery("#get").click(() =>
HtmlContext.window.alert(calendar.value()));
new jQuery("#value").kendoDatePicker(new DatePickerConfiguration
{
change = setValue
});
new jQuery("#set").click(setValue);
new jQuery("#direction").kendoDropDownList(new DropDownListConfiguration
{
change = navigate
});
new jQuery("#navigate").click(navigate);
}
static void OnReady()
{
new jQuery("#sortable1, #sortable2").sortable().disableSelection();
var tabs = new jQuery("#tabs").tabs();
var tab_items = new jQuery("ul:first li", tabs);
tab_items = tab_items.droppable(new DroppableOptions
{
accept = ".connectedSortable li",
hoverClass = "ui-state-hover",
drop = (e, ui) =>
{
var item = new jQuery(e.currentTarget);
var list = new jQuery(item.find("a").attr("href"))
.find(".connectedSortable");
ui.draggable.hide("slow", () =>
{
tabs.tabs("select", tab_items.index(item));
new jQuery(e.currentTarget).appendTo(list).show("slow");
});
}
});
}
static void OnReady()
{
var original = new jQuery("#tabstrip").clone(true);
original.find(".k-state-active").removeClass("k-state-active");
new jQuery(".configuration input").change(e =>
{
jQuery tabStrip = new jQuery("#tabstrip"),
clone = original.clone(true);
JsNumber selectedIndex = tabStrip.data("kendoTabStrip").As<TabStrip>().select().As<JsNumber>();
clone.children("ul")
.children("li")
.eq(selectedIndex)
.addClass("k-state-active")
.end();
tabStrip.replaceWith(clone);
initTabStrip();
});
initTabStrip();
}
static void OnReady()
{
var data = new[] {
"12 Angry Men",
"Il buono, il brutto, il cattivo.",
"Inception",
"One Flew Over the Cuckoo's Nest",
"Pulp Fiction",
"Schindler's List",
"The Dark Knight",
"The Godfather",
"The Godfather: Part II",
"The Shawshank Redemption"
};
new jQuery("#search").kendoAutoComplete(new AutoCompleteConfiguration
{
dataSourceObject = data,
separator = ", "
});
var validator = new jQuery("#tickets").kendoValidator().data("kendoValidator").As<Validator>();
var status = new jQuery(".status");
new jQuery("button").click(() =>
{
if (validator.validate())
{
status.text("Hooray! Your tickets has been booked!").addClass("valid");
}
else
{
status.text("Oops! There is invalid data in the form.").addClass("invalid");
}
});
}