Tuesday, 8 July 2014

Kendo DropDownList popup keep open alternative code using list property

Should you ever have the need to keep a kendo drop down list open using typescript, then the following example is how you should go about it with the latest kendo libraries that we're referencing

Note: The benefits of doing it this way is that you can strongly type all the typescript code, instead of relying on an undocumented extension property called popup off the drop down list control.

Typescript code:

export class AssignmentDashboard extends Base.HomePageBase {

private filterEventsDdLInitialized = false;

public filterEventsDdlInitialize: () => void = () => {

if (this.filterEventsDdLInitialized === false) {

var filterEventsDdl: kendo.ui.DropDownList = $("#viewEventListFilters").data("kendoDropDownList");

if (!this.isDefined(filterEventsDdl)) {

alert('viewEventListFilters drop down list widget not found');

return;

}

filterEventsDdl.list.on("mousedown", "*", (e: JQueryEventObject) => {

this.lastTarget = <HTMLElement>e.currentTarget;

});

filterEventsDdl.bind("close", (e: kendo.ui.DropDownListCloseEvent) => {

if ($.contains(e.sender.list[0], this.lastTarget)) {

e.preventDefault();

}

this.lastTarget = document.body;

//e.preventDefault(); // comment out for prod. use this to lock ddl during debugging/editing.

});

filterEventsDdl.list.on("click", "input", this.filterOptionChangeHandler);

this.filterEventsDdLInitialized = true;

}

}

CSHTML code:

attach the filterEventsDdlInitialize class method to the e.open event of the drop down in the cshtml… e.g.

.Events(e =>

{

e.Open("$(document).data('assignmentDashboardContext').filterEventsDdlInitialize");

})

e.g.

@(Html.Kendo().DropDownList()

.Name("viewEventListFilters")

.HtmlAttributes(new { style = "width: 240px;" })

.Height(410)

.BindTo(Model.FilterOptionsBinder)

.Text("Events")

.Value("Events")

.Events(e =>

{

e.Open("$(document).data('assignmentDashboardContext').filterEventsDdlInitialize");

})

.Template(tempHolder)

)

How to by pass the Jaguary X-Type enter security pin screen after changing battery

How to bypass security code on Jaguar X-Type touchscreen Satellite Navigational units. Just hold the skip track, AMEM and PTY buttons ...