آموزش Kendo بخش چهارم

آموزش Kendo بخش چهارم :

در مقاله قبل ، نحوه افزودن کنترل DatePicker به View را یاد گرفتیم  و با اتریبیوت های آن آشنا شدیم . در این مقاله قصد داریم برای DatePicker یک Event Handler بنویسیم و یک سناریوی جالب را پیاده سازی کنیم .

تعریف Event Handler :

میخواهیم برای DatePicker در مثال فوق ، یک Event Handler تعریف کنیم .

سناریو : میخواهیم بصورت Run Time ، انتخاب های کاربر را محدود کنیم . بعنوان مثال وقتی کاربر تاریخ شروع را ۰۳/۱۱/۲۰۱۳ انتخاب می کند ، پس باید این تاریخ را از لیست تاریخ پایان حذف کنیم تا کاربر نتواند آنرا انتخاب کند . به این منظور در تابع جاوا اسکریپت ، تاریخ شروع را که کاربر وارد میکند را گرفته و یک واحد به آن اضافه میکنیم (در این مثال تاریخ ۰۴/۱۱/۲۰۱۳ می شود) و این مقدار را تاریخ مینیمم برای پایان در نظر میگیریم تا کاربر تاریخهای ما بعد آنرا مشاهده کند . به همین روش تاریخ شروع را محدود میکنیم . یعنی اگر کاربر ابتدا تاریخ پایان را انتخاب کند ، یکواحد از تاریخ ورودی کاربر کم می کنیم و بعنوان ماکزیمم تاریخ شروع در نظر میگیریم .

افزودن Event به کنترل DatePicker بصورت زیر می باشد :

@(Html.Kendo().DatePicker()

    .Name(“start”)

    .Format(“yyyy/MM/dd”)

    .Max(“2014/05/12”)

    .Value(“2013/10/27”)

    .Events(s => s.Change(“startChange”))

)

@(Html.Kendo().DatePicker()

        .Name(“end”)

        .Format(“yyyy/MM/dd”)

        .Min(“2015/05/12”)

        .Value(“2016/01/09”)

        .Events(e => e.Change(“endChange”))

)

توسط Lambda ، نام رویداد را تعریف میکنیم و توابع مربوطه را در جاوااسکریپت بصورت زیر تعریف خواهیم کرد :

function startChange() {

        var endPicker = $(“#end”).data(“kendoDatePicker”),

            startDate = this.value();

        if (startDate) {

            startDate = new Date(startDate);

            startDate.setDate(startDate.getDate() + 1)

            endPicker.min(startDate);

        }

    }

 

    function endChange() {

        var startPicker = $(“#start”).data(“kendoDatePicker”),

            endDate = this.value();

        if (endDate) {

            endDate = new Date(endDate);

            endDate.setDate(endDate.getDate() + 1)

            startPicker.max(endDate);

        }

    }

اگر این View را اجرا کنیم و تاریخ شروع را ۱/۱۲/۲۰۱۳ انتخاب کنیم ، می بینیم که این تاریخ از تقویم تاریخ پایان حذف شده است و باید از ۲/۱۲/۲۰۱۳ به بعد را انتخاب کنیم (مطابق تصویر زیر) :


DatePicker Event Handler

برای اطلاعات بیشتر در مورد رویدادهای DatePicker به وب سایت Telerik مراجعه کنید . در مقاله بعد با کنترل های کاربردی دیگری آشنا می شویم . با ما بمانید …laugh


تاریخ انتشار : ۲۰ دی ۱۳۹۴



دیدگاه ها :