Wednesday 27 November 2013

How to clear dropdown list and Date picker selected data in Kendo ui


In this article I will explain how to clear dropdown list and Date picker selected data in Kendoui.
Dropdown list selected data clear

When I changed Date picker data on that time dropdown list selected data will be clear.

@(Html.Kendo().DatePicker().Name("StartDate").Format("{0:MM/dd/yyyy}")
                    .Events(e =>
                        {
                            e.Change("ChangeInDate");
                        }
                        )
                )

Below function is useful for clear dropdown list selected data  

function ChangeInDate(e) {
                        $("#ddlMonths").data("kendoDropDownList").select(0)
                        $("#ddlWeeks").data("kendoDropDownList").select(0)
                        var grid = $("#grid").data("kendoGrid");
                        grid.dataSource.read();
                    }

Date picker selected data clear



When I changed dropdown list data on that time Date picker selected data will be clear.

@(Html.Kendo().DropDownList()
                    .HtmlAttributes(new { style = "width:150px" })
                    .Name("ddlWeeks")
                    .OptionLabel("Select Week")
                    .DataSource(datasource =>
                    {
                        datasource.Read(read =>
                        {
                            read.Action("GetWeekNames", "HierarchicalGrid");
                        })
                        .ServerFiltering(true);
                    })
                    .Events(e =>
                    {
                        e.Change("ChangeInWeek");
                    })
                )

Below function is useful for clear Date picker selected data

function ChangeInWeek(e) {
                        $("#StartDate").data("kendoDatePicker").value(null);
}

No comments:

Post a Comment