آموزش 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



دیدگاه ها :