فرمت کردن اطلاعات نمایش داده شده به کمک Kendo UI Grid
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: پنج دقیقه

پیشنیازهای بحث:
- «صفحه بندی، مرتب سازی و جستجوی پویای اطلاعات به کمک Kendo UI Grid »
- «استفاده از Kendo UI templates»

صورت مساله
می‌خواهیم به یک چنین تصویری برسیم؛ که دارای گروه بندی اطلاعات است، فرمت شرطی روی ستون قیمت آن اعمال شده و تاریخ نمایش داده شده در آن نیز شمسی است. همچنین برای مثال ستون قیمت آن دارای ته جمع صفحه بوده و به علاوه یک دکمه‌ی سفارشی به نوار ابزار آن اضافه شده‌است.


مباحث قسمت سمت سرور این مثال با مطلب «صفحه بندی، مرتب سازی و جستجوی پویای اطلاعات به کمک Kendo UI Grid» دقیقا یکی است. فقط یک خاصیت AddDate نیز در اینجا اضافه شده‌است.


تغییر نحوه‌ی نمایش pager

اگر به قسمت pager تصویر فوق دقت کنید، یک دکمه‌ی refresh، تعداد موارد هر صفحه و امکان وارد کردن دستی شماره صفحه، در آن پیش بینی شده‌است. این موارد را با تنظیمات ذیل می‌توان فعال کرد:
            $("#report-grid").kendoGrid({
                // ...
                pageable: {
                    previousNext: true, // default true
                    numeric: true, // default true
                    buttonCount: 5, // default 10
                    refresh: true, // default false
                    input: true, // default false
                    pageSizes: true // default false
                },


بومی سازی پیغام‌های گرید

پیغام‌های فارسی را که در تصویر فوق مشاهده می‌کنید، حاصل پیوست فایل kendo.fa-IR.js هستند:
 <!--https://github.com/loudenvier/kendo-global/blob/master/lang/kendo.fa-IR.js-->
<script src="js/messages/kendo.fa-IR.js" type="text/javascript"></script>


گروه بندی اطلاعات

برای گروه بندی اطلاعات در Kendo UI Grid دو قسمت باید تغییر کنند.
ابتدا باید فیلد پیش فرض گروه بندی در قسمت data source گرید تعریف شود:
            var productsDataSource = new kendo.data.DataSource({
                // ...
                group: { field: "IsAvailable" },
                // ...
            });
همین تنظیم، گروه بندی را فعال خواهد کرد. اگر علاقمند باشید که به کاربران امکان تغییر دستی گروه بندی را بدهید، خاصیت groupable را نیز true کنید.
$("#report-grid").kendoGrid({
// ...
groupable: true, // allows the user to alter what field the grid is grouped by
// ...
در این حالت با کشیدن و رها کردن یک سرستون، به نوار ابزار مرتبط با گروه بندی، گروه بندی گرید بر اساس این فیلد انتخابی به صورت خودکار انجام می‌شود.


اضافه کردن ته جمع‌های ستون‌ها

این ته جمع‌ها که aggregate نام دارند باید در دو قسمت فعال شوند:
            var productsDataSource = new kendo.data.DataSource({
                //...
                aggregate: [
                    { field: "Name", aggregate: "count" },
                    { field: "Price", aggregate: "sum" }
                ]
                //...
            });
ابتدا در قسمت data source مشخص می‌کنیم که چه تابع تجمعی قرار است به ازای یک فیلد خاص استفاده شود.
سپس این متدها را می‌توان مطابق فرمت hash syntax قالب‌های Kendo UI در قسمت footerTemplate هر ستون تعریف کرد:
            $("#report-grid").kendoGrid({
                // ...
                columns: [
                    {
                        field: "Name", title: "نام محصول",
                        footerTemplate: "تعداد: #=count#"
                    },
                    {
                        field: "Price", title: "قیمت",
                        footerTemplate: "جمع: #=kendo.toString(sum,'c0')#"
                    }
                ]
                // ...
            });


فرمت شرطی اطلاعات

در ستون قیمت، می‌خواهیم اگر قیمتی بیش از 2490 بود، با پس زمینه‌ی قهوه‌ای و رنگ زرد نمایش داده شود. برای این منظور می‌توان یک قالب Kendo UI سفارشی را طراحی کرد:
    <script type="text/x-kendo-template" id="priceTemplate">
        #if( Price > 2490 ) {#
        <span style="background:brown; color:yellow;">#=kendo.toString(Price,'c0')#</span>
        #} else {#
        #= kendo.toString(Price,'c0')#
        #}#
    </script>
سپس نحوه‌ی استفاده‌ی از آن به صورت ذیل خواهد بود:
            $("#report-grid").kendoGrid({
                //...
                columns: [
                    {
                        field: "Price", title: "قیمت",
                        template: kendo.template($("#priceTemplate").html()),
                        footerTemplate: "جمع: #=kendo.toString(sum,'c0')#"
                    }
                ]
                //...
            });
توسط متد kendo.template امکان انتساب یک قالب سفارشی به خاصیت template یک ستون وجود دارد.


فرمت تاریخ میلادی به شمسی در حین نمایش

برای تبدیل سمت کلاینت تاریخ میلادی به شمسی از کتابخانه‌ی moment-jalaali.js کمک گرفته شده‌است:
 <!--https://github.com/moment/moment/-->
<script src="js/cultures/moment.min.js" type="text/javascript"></script>
<!--https://github.com/jalaali/moment-jalaali-->
<script src="js/cultures/moment-jalaali.js" type="text/javascript"></script>
پس از آن تنها کافی است متد فرمت این کتابخانه را در قسمت template ستون تاریخ و توسط hash syntax قالب‌های Kendo UI بکار برد:
            $("#report-grid").kendoGrid({
                //...
                columns: [
                    {
                        field: "AddDate", title: "تاریخ ثبت",
                        template: "#=moment(AddDate).format('jYYYY/jMM/jDD')#"
                    }
                ]
                //...
            });


اضافه کردن یک دکمه به نوار ابزار گرید

نوار ابزار Kendo UI Grid را نیز می‌توان توسط یک قالب سفارشی آن مقدار دهی کرد:
            $("#report-grid").kendoGrid({
                // ...
                toolbar: [
                    { template: kendo.template($("#toolbarTemplate").html()) }
                ]
                // ...
            });
برای نمونه toolbarTemplate فوق را به نحو ذیل تعریف کرده‌ایم:
    <script>
        // این اطلاعات برای تهیه خروجی سمت سرور مناسب هستند
        function getCurrentGridFilters() {
            var dataSource = $("#report-grid").data("kendoGrid").dataSource;
            var gridState = {
                page: dataSource.page(),
                pageSize: dataSource.pageSize(),
                sort: dataSource.sort(),
                group: dataSource.group(),
                filter: dataSource.filter()
            };
            return kendo.stringify(gridState);
        }
    </script>

    <script id="toolbarTemplate" type="text/x-kendo-template">
        <a class="k-button" href="\#" onclick="alert('gridState: ' + getCurrentGridFilters());">نوار ابزار سفارشی</a>
    </script>
دکمه‌ی اضافه شده، وضعیت فیلتر data source متصل به گرید را بازگشت می‌دهد. برای مثال مشخص می‌کند که در چه صفحه‌ای با چه تعداد رکورد قرار داریم و همچنین وضعیت مرتب سازی، فیلتر و غیره چیست. از این اطلاعات می‌توان در سمت سرور برای تهیه‌ی خروجی‌های PDF یا اکسل استفاده کرد. وضعیت فیلتر اطلاعات مشخص است. بر همین مبنا کوئری گرفته و سپس می‌توان نتیجه‌ی آن‌را تبدیل به منبع داده تهیه خروجی مورد نظر کرد.



کدهای کامل این مثال را از اینجا می‌توانید دریافت کنید:
KendoUI05.zip
  • #
    ‫۹ سال و ۱۰ ماه قبل، سه‌شنبه ۲۰ آبان ۱۳۹۳، ساعت ۱۲:۲۱
    با سلام  هنگام  Bulid  پروژه با  خطای  زیر  مواجه می‌شم
    Error 1 Unable to locate 'C:\Users\Administrator\Desktop\KendoUI05\KendoUI05\.nuget\NuGet.exe' KendoUI05
     
    دلیلش  چیه ؟ البته Update-Package -Reinstall را انجام داده ام
     متشکرم  از  شما
    • #
      ‫۹ سال و ۱۰ ماه قبل، سه‌شنبه ۲۰ آبان ۱۳۹۳، ساعت ۱۲:۳۵
      - روی solution کلیک راست کنید و گزینه‌ی Enable NuGet Package Restore را انتخاب کنید.
      - یا فایل NuGet.targets پوشه‌ی nuget. را باز کرده و
      دریافت خودکار nuget.exe را فعال کنید:
      تغییر از
      <DownloadNuGetExe Condition=" '$(DownloadNuGetExe)' == '' ">false</DownloadNuGetExe>
      به
      <DownloadNuGetExe Condition=" '$(DownloadNuGetExe)' == '' ">true</DownloadNuGetExe>
      - و یا فایل nuget.exe را از این آدرس دریافت کنید و در پوشه‌ی nuget. کپی کنید.
      • #
        ‫۹ سال و ۱۰ ماه قبل، سه‌شنبه ۲۰ آبان ۱۳۹۳، ساعت ۱۲:۴۵
        مرسی. فقط  برای  تغییر  قالب KendoUi  میشه  کاری  کرد  برای ترکیب  رنگهاش ؟ مثل JqueryUi Custom
  • #
    ‫۹ سال و ۹ ماه قبل، سه‌شنبه ۹ دی ۱۳۹۳، ساعت ۲۱:۰۰
    با سلام و خدا قوت

    وقتی تو تنظیمات دیتاسورس serverGrouping:true تنظیم می‌کنم با خطای e.slice مواجه میشم.
    تو مثالی که شما قراردادید هم اینو وقتی تنظیم کردم باز همین مشکل بوجود اومد.

    ممنون میشم راهنماییم کنید.
  • #
    ‫۹ سال و ۹ ماه قبل، شنبه ۱۳ دی ۱۳۹۳، ساعت ۱۵:۳۳
    سلام
    من برای نمایش تاریخ شمسی کالچر رو تغییر میدم اما تاریخ‌ها در گرید تغییری نمیکنه در صورتی که اگه مثلا به صورت 
    @DateTime.Now
    در خارج از گرید تاریخ رو نمایش بدم تاریخ شمسی نمایش داده میشه! 
    شما برای نمایش تاریخ شمسی در گرید کندو از چه روشی استفاده می‌کنید؟
    • #
      ‫۹ سال و ۹ ماه قبل، شنبه ۱۳ دی ۱۳۹۳، ساعت ۱۵:۴۸
      - خروجی تاریخ JSON استاندارد، نمی‌تواند شمسی باشد و Kendo UI اطلاعات خودش را به فرمت JSON دریافت می‌کند. اطلاعاتی که به کمک Razor نمایش دادید، نهایتا یک رشته معمولی است و نه یک تاریخ استاندارد ISO 8601 که توسط JSON.NET بازگشت داده می‌شود.
      - امکان «تهیه یک JsonConverter سفارشی» در JSON.NET وجود دارد؛ مثلا تاریخ را تبدیل به یک رشته‌ی دلخواه کنید و بازگشت دهید.
      + قسمت «فرمت تاریخ میلادی به شمسی در حین نمایش» را در متن فوق مطالعه کنید. این تبدیل سمت کلاینت هست و نه سمت سرور (به کمک کتابخانه‌ی moment-jalaali.js).
  • #
    ‫۷ سال قبل، جمعه ۱۷ شهریور ۱۳۹۶، ساعت ۲۰:۰۷
    جهت اطلاع

    تمام مثال‌های این سری به ASP.NET Core منتقل شدند. کدهای نهایی آن‌ها را از مخزن کد KendoUI.Core.Samples می‌توانید دریافت کنید.
    این مثال‌ها بر اساس Kendo UI Professional R2 2017 SP1 تهیه شده‌اند (فایل‌های مورد نیاز هم پیوست شده‌اند).  
  • #
    ‫۴ سال و ۳ ماه قبل، جمعه ۲۶ اردیبهشت ۱۳۹۹، ساعت ۱۵:۱۱
    با سلام؛ من  برای تاریخ شمسی از روش گفته شد زیر استفاده کردم. ولی وقتی با موبایل وارد سایت میشم تاریخ رو یک روز قبل‌تر نشون میده. ولی در سیستم ویندوز کاملا درسته. فقط هنگام باز کردن سایت با مرورگر موبایل تاریخ رو یک روز قبل‌تر نشون میده:
    {
       field: "AddDate", title: "تاریخ ثبت",
       template: "#=moment(AddDate).format('jYYYY/jMM/jDD')#"
    }