آموزش Kendo بخش سوم

در مقاله قبل نحوه ایجاد یک Telerik MVC Application را یاد گرفتیم . در این مقاله می خواهیم کار با کنترلهای کندو را در MVC آغاز کنیم .

 

معرفی کنترلهای Kendo UI :

  • Input :

    1. AutoComplete

    2. ColorPicker

    3. DatePicker

    4. ComboBox

    5. DropDownList

    6. NumericTextBox

    7. Slider

    8. Upload

  • Unordered List :

     

    1. Menu
    2. PanelBar
    3. TreeView
  • TextArea :

     

    1. Editor
  • Table :

     

    1. Grid
  • Div :

     

    1. Calendar
    2. Grid
    3. ListView
    4. Scheduler
    5. TabStrip
    6. Tooltip
    7. Chart

 

برای شروع ، نرم افزار ویژوال استودیو را باز نموده و یک پروژه Telerik MVC Application بسازید و نام آنرا KendoWorking قرار دهید .

در این پروژه قصد داریم برای هر کنترل کندو ، یک کنترولر در MVC بسازیم .

 

کنترل DatePicker :

روی فولدر Controller راست کلیک کرده و Add Controller را انتخاب میکنیم و نام آنرا DatePickerController قرار می دهیم .

سپس یک View برای اکشن Index این کنترولر می سازیم بنام Index .

عنوان صفحه را Kendo DatePicker می نویسیم و دستور زیر را برای افزودن یک DatePicker به صفحه می نویسیم :

@(Html.Kendo().DatePicker().Name("DateOfBirth"))

مشاهده می شود که براحتی توانستیم یک DatePicker در View پروژه خود قرار دهیم که خروجی آن بصورت زیر است :


Kendo DatePicker

افزودن Attribute به DatePicker :

به این منظور با زدن نقطه (.) بعد از Name ، لیست اتریبیوت ها را می بینیم . بعنوان مثال در دستور زیر ابتدا یک فرمت برای نمایش تاریخ بصورت (روز/ماه/سال) برای آن تعیین کرده ایم و سپس یک مقدار پیش فرض (Initial Value) برای DatePicker خود انتخاب نموده ایم :

 
  @(Html.Kendo().DatePicker().Name("DateOfBirth").Format("yyyy/MM/dd").Value("2016/01/09"))
                                

حال می خواهیم مثال فوق را کمی پیچیده تر کنیم :

دستورات زیر را در Index.cshtml بنویسید :

 

@(Html.Kendo().DatePicker().Name(“start”))


@(Html.Kendo().DatePicker().Name(“end”)))

و خروجی مانند شکل زیر خواهد بود :


DatePicker in Kendo UI

حال می خواهیم اتریبیوت هایی مانند Min,Max,Value,Format را به آن اضافه کنیم :

 
@(Html.Kendo().DatePicker()
    .Name(“start”)
    .Format(“yyyy/MM/dd”)
    .Max(“۲۰۱۴/۰۵/۱۲”)
    .Value(“۲۰۱۳/۱۰/۲۷”)
)
                                

همانطور که مشاهده می کنید توسط Max تاریخ ورودی کاربر را به ماکزیمم ۱۲/۰۵/۲۰۱۴ محدود کردیم . بنابراین کاربر نمی تواند تاریخهای مابعد این تاریخ را انتخاب کند (غیرفعال هستند) .

نکته : اتریبیوت Name در کنترل های کندو ، پس از رندر شدن صفحه و تبدیل به html ، به id تبدیل می شود .

برای تمرین بیشتر در مورد کنترل DatePicker به وب سایت Telerik مراجعه شود .

این مقاله در اینجا به پایان می رسد ، در مقاله بعد میخواهیم برای DatePicker ایجاد شده در این مقاله ، یک Event Handler تعریف کنیم . همراه ما باشید …blush

 

 


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



دیدگاه ها :