Kendo UI

برای آنهایی که نمیدانند تلریک یک ورژن اصلی از محصولات رابط کاربری Kendo UI خود منتشر نموده است.

رابط کاربری کندو اصلی یک منبع باز است به این معنی که شما میتوانید بدون پرداخت هزینه ای از محصولات آن استفاده نمایید.

این خبر فوق العاده ای برای پروژه های کوچکی که نیاز به حمل سنگین اشیا ندارند و همراه با محصولات رابط کاربری کندوی کامل می آیند است.

بنده اخیرا با اجزای رابط کاربری کندو شبکه اصلی کار میکردم و با خود گفتم که خوب است که بعضی از کار هایی که انجام دادم و منجر به انعطاف پذیری و دوستانه تر شدن شبکه ام شد را با شما در میان بگذارم.

اول از همه اجازه دهید به شما نشان دهم که کد نیاز به گرفتن قسمت زیر دارد :

a href="http://demos.telerik.com/kendo-ui/grid/index" target="_blank"Kendo UI Core grid/a</span>

تمام کاری که من در طرح صفحه ی MVC انجام دادم شامل احتیاجات جاوا سکریپت کد های رابط کاربری Kendo UI و فایل های css و JQuery و Bootstrap میباشد.

من از Bootstrap استفاده میکنم زیرا قابلیت کنترل قالب بندی بسیار زیبایی میدهد و خود رابط کاربری کندو اصلی در واقع یک تم (پس زمینه) Bootstrap دارد که باعث میشود نمای کلی سایتم هماهنگ و یکپارچه باشد.

pre class="prettyprint linenums:1"code class="language-html"@model IEnumerableViewModelUser


}


table id="list-grid" class="table table-bordered hidden"

thead

tr

th
@Html.DisplayNameFor(model = model.Id)
/th

th
@Html.DisplayNameFor(model = model.FirstName)
/th


th
@Html.DisplayNameFor(model = model.LastName)
/th


th
@Html.DisplayNameFor(model = model.Email)
/th


th
@Html.DisplayNameFor(model = model.IsVisible)
/th

th/th

/tr

/thead

tbody
@foreach (var item in Model)
{

tr

td
@Html.DisplayFor(modelItem = item.Id)
/td

td
@Html.DisplayFor(modelItem = item.UserName)
/td


td
@Html.DisplayFor(modelItem = item.FirstName)
/td
td
@Html.DisplayFor(modelItem = item.LastName)
/td
td
@Html.DisplayFor(modelItem = item.Email)
/td
td
@Html.DisplayFor(modelItem = item.IsVisible)
/td

td/td

/tr

}
/tbody

/table

/code
pre class="prettyprint linenums:1"code class="language-js"img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%24(function%20()%20%7B%0A%24(%22%23list-grid%22).find(%22th%22).eq(0).hide()%3B%20%2F%2F%20hides%20the%20Id%20column%0A%24(%22%23list-grid%22).kendoGrid(%7B%0Asortable%3A%20true%2C%0Aresizable%3A%20true%2C%0Areorderable%3A%20true%2C%0AcolumnMenu%3A%20true%2C%0Afilterable%3A%20true%2C%0Acolumns%3A%20%5B%0A%7B%20field%3A%20%22Id%22%2C%20title%3A%20%22User%20Id%22%2C%20width%3A%2050%2C%20hidden%3A%20true%20%7D%2C%0A%7B%20field%3A%20%22UserName%22%2C%20title%3A%20%22User%20Name%22%2C%20width%3A%20120%20%7D%2C%0A%7B%20field%3A%20%22FirstName%22%2C%20title%3A%20%22First%20Name%22%20%7D%2C%0A%7B%20field%3A%20%22LastName%22%2C%20title%3A%20%22Surname%22%20%7D%2C%0A%7B%20field%3A%20%22Email%22%2C%20title%3A%20%22Email%20Address%22%20%7D%2C%0A%7B%20field%3A%20%22IsVisible%22%2C%20title%3A%20%22Active%3F%22%2C%20width%3A%20100%20%7D%2C%0A%7B%0Acommand%3A%20%5B%0A%7B%20text%3A%20%22Edit%22%2C%20click%3A%20editItem%20%7D%2C%0A%7B%20text%3A%20%22Delete%22%2C%20click%3A%20deleteItem%20%7D%0A%5D%2C%0Atitle%3A%20%22%20%22%2C%0Awidth%3A%20200%0A%7D%0A%5D%0A%7D).removeClass(%22hidden%22)%3B%20%2F%2F%20displays%20the%20grid%20after%20JS%20and%20CSS%20have%20been%20applied%0A%7D)%3B%0A%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script" title="script" //code
h1Hide Columns But Don't Hide Them/h1

گاهی اوقات شما میخواهید که از چندین ستون در شبکه ی خود استفاده نمایید. اما احتیاجی ندارید که همواره نمایش داده شوند.

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

pre class="prettyprint linenums:1"code class="language-html"$("#list-grid").find("th").eq(0).hide();/code

این کد به دنبال:

codehidden/code

میگردد و پس از یافتنش آن را مخفی میکند.

شما میتوانید همین کار را با سایر ستون های دیگری که نمایش میدهید انجام دهید.

فقط فراموش نکنید که شما به سری کد :


codehidden/code

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

codekendoGrid()/code

احتیاج دارید تا سلول های مربوطه نیز پنهان شوند.

h1Stop Unformatted Table Data Showing Before CSS Is Applied/h1

شما متوجه شدید که من از کلاس :

codehidden/code

برای جدول استفاده کردم. به طور پیش فرض جدول نمایش داده نخواهد شد.

میتوانید در انتهای متد :

codekendGrid()/code

که من آن را به متد :

coderemoveClass("hidden")/code

تغییر دادم تماشا کنید.

کلاس مخفی را هنگامی که تمام جاوا سکریپت ها و فایل های css دریافت شدند حذف میکند.

دلیلش نیز به خاطر این است که اتصال اینترنت کند مقداری زمان میبرد تا فایل های css را دریافت نماید.

اگر این اتفاق افتاد یک فلش از از جدول قالب بندی نشده قبل از دریافت css های کندو رخ میدهد.

با اجازه دادن به جاوا سکریپت ” مخفی نکردن” جدول قالب بندی شده ی نهایی اطمینان حاصل خواهد کرد که کاربر میتوانذ از محتوای قالب بندی شده بدون رخ دادن فلش های متوالی استفاده کند.

امیدوارم از مطالب گفته شده استفاده ی مفیدی داشته باشید.

 

داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.