آموزش Kendo بخش پنجم


در مقاله قبل یک سناریوی جالب را روی کنترل DatePicker پیاده سازی کردیم . در این مقاله با کنترلهای Slider , Editor , Menu آشنا می شویم .

کنترل Slider :

یک کنترولر بنام SliderController بسازید و یک view برای اکشن Index این کنترولر ایجاد کنید (با تنظیمات پیش فرض) .

در Index.cshtml دستورات زیر را تایپ می کنیم :

 

@(Html.Kendo().Slider()
    .Name("slider")
    .Min(0)
    .Max(255)
    .SmallStep(8)
    .LargeStep(16)
    .Orientation(SliderOrientation.Vertical)
    .ShowButtons(false)
    .TickPlacement(SliderTickPlacement.Both)
    .Events(s => s.Slide("onSlide"))
)
                                

توضیح : ابتدا یک label تعریف کردیم برای نمایش موقعیت اسلایدر . سپس کنترل اسلایدر را فراخوانی کرده ایم . اتریبیوت های موردنظر را نوشته و در نهایت Event را تعریف میکنیم . تابع onSlide بصورت RunTime با هر بار تغییر مقدار اسلایدر صدا زده می شود . تابع onSlide بصورت زیر است :

 

function onSlide(e) {
    $("#status").text(e.value);
}
                                

پارامتر e را میگیرد و متن داخل label را برابر مقدار اسلایدر قرار میدهد . خروجی بصورت زیر است :


اسلایدر کندو

کنترل Editor :

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

کد زیر را در ویو می نویسیم :

 
@(Html.Kendo().Editor()
    .Name("editor")
)
                                

در اینصورت خروجی بصورت زیر است :


ویرایشگر متن Kendo

مشاهده می شود که امکانات زیادی برای نوشتن متون دارد . ما در این مثال می خواهیم ابزارهای موردنظر را به آن اضافه و یا حذف کنیم .

به ویو دستورات زیر را اضافه کنید :

 
   @(Html.Kendo().Editor()
    .Name("editor")
    .Tools(t => t
        .Clear()
        .FontName(fn => fn
            .Add("Verdana", "Verdana , Geneva")
            .Add("Garamond", "Garamond , serif")
            )
        .FontSize(fs => fs
            .Add("14px", "14px")
            .Add("16px", "16px")
        )
    )
    .Value(@
    

www.Mohtava.info is About Web Developing …

Contact us : EhsanSafari@hotmail.com

) )

توضیح : ابتدا نام فونت های دلخواه خود را تعریف نمودیم و سپس اندازه های موردنظر را نوشتیم و در نهایت مقدار اولیه (پیش فرض) به ادیتور اعمال کردیم . خروجی بصورت زیر است :


افزودن ابزار دلخواه به ویرایشگر

کنترل Menu :

مانند قبل یک کنترلر بنام کنترل کندو می سازیم . پس در این مثال MenuController را ایجاد کرده و یک View برای آن تعریف می کنیم . برای داشتن یک منوی ساده بصورت زیر عمل می کنیم :

 
 @(Html.Kendo().Menu()
      .Name("Menu")
      .Items(items =>
      {
          items.Add().Text("Home");
          items.Add().Text("Blog");
          items.Add().Text("Service");
          items.Add().Text("Gallery");
          items.Add().Text("News").Enabled(false);
      })
 )
                                

این دستورات ، منویی تولید می کنند با ۵ لینک که هیچ زیرمنویی ندارند و نیز منوی آخر غیرفعال می باشد . (تصویر زیر) :


کنترل منوی کندو

تعریف زیر منو :

برای داشتن زیر منو بصورت زیر عمل می کنیم :

 
@(Html.Kendo().Menu()
      .Name("Menu")
      .Items(items =>
      {
          items.Add()
              .Text("Products")
              .Items(children =>
               {
                   children.Add().Text("Furniture")
                           .Items(innerChildren =>
                           {
                               innerChildren.Add().Text("Tables & Chairs");
                               innerChildren.Add().Text("Sofas");
                           });
               });
          items.Add().Text("Blog");
          items.Add().Text("News").Enabled(false);
      })
)
                                

خروجی بصورت زیر خواهد بود :


زیرمنو دار کردن منوی کندو

منوی Products دارای زیرمنو است . منوی Blog فاقد submenu است . منوی News غیرفعال است .

امیدوارم از این آموزش نیز استفاده لازم را برده باشید .

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

لطفا سوالات و پیشنهادهای خود را از طریق فرم تماس با ما ، برای بنده ارسال فرمایید .



دیدگاه ها :


  1. saeed , چهارشنبه ۳ شهریور ۱۳۹۵ در ساعت ۰۴:۰۳

    سلام آیا آموزشی در مورد kendo ui asp mvc وجود داره به صورت کامل و پروژه محور؟
    ضمنا نحوه نصب telerik چجوریه؟ تو ویژوال استودیو من نیست چجوری باید اضافش کنم؟
    با تشکر