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

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

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

کنترل Slider :

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

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

<label id="status"></label>

@(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 بصورت زیر است :

<script>

    function onSlide(e) {

        $("#status").text(e.value);

    }

</script>

پارامتر 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(@<text>

                <p>

                    <b>www.Mohtava.info</b> is About Web Developing …

                    <br /><br />

                    Contact us : EhsanSafari@hotmail.com

                </p>

           </text>)

)

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


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

کنترل 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 چجوریه؟ تو ویژوال استودیو من نیست چجوری باید اضافش کنم؟
    با تشکر