تنظیمات ستون Kendo Grid به صورت خودکار در mvc

پنجشنبه 28 آبان 1394

Grid یک کامپوننت قدرتمند است به ویژه هنگامی که با Mvc ترکیب می شود. شما میتوانید ویژگی ها Kendo را کنترل کنید اما مشکل این است که شما نمی توانید برخی از ویژگی های خاص کندو مانند عرض ستون و ... را به صورت خودکار تغییر دهید.

تنظیمات ستون Kendo Grid به صورت خودکار در mvc

Telerik Kendo Grid یک  کامپوننت قدرتمند است به ویژه هنگامی که با Mvc ترکیب می شود.

.Columns(columns => columns.AutoGenerate(true))

 

کد بالا به صورت خودکار برخی از ویژگی های System.ComponentModel.DataAnnotations را می داند.

در واقع به طور خاص می داند که چگونه به صورت خودکار grid column را برای این ویژگی ها پیکر بندی  کند.

 

شما میتوانید این ویژگی ها را کنترل کنید اما مشکل این است که شما نمی توانید برخی از ویژگی های خاص کندو مانند عرض ستون و ... را به صورت خودکار تغییر دهید.

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

در زیر مثالی میزنیم تا بهتر با این مسئله اشنا شویم.

using System;
using System.Web.Mvc;

namespace Cadru.Web.KendoExtensions
{
    public class GridColumnAttribute : Attribute, IMetadataAware
    {
        public const string Key = "GridColumnMetadata";

        public bool Hidden { get; set; }

        public bool IncludeInMenu { get; set; }

        public bool Lockable { get; set; }

        public bool Locked { get; set; }

        public int MinScreenWidth { get; set; }

        public string Width { get; set; }

        public void OnMetadataCreated(ModelMetadata metadata)
        {
            metadata.AdditionalValues[GridColumnAttribute.Key] = this;
        }
    }
}

 

در حال حاضر ما میتوانیم مدل خود را با ویژگی های جدید نمایش دهیم.

public class EmployeeModel
{
    [Editable(false)]
    [GridColumn(Width = "100px", Locked = true)]
    public string EmployeeID { get; set; }

    [GridColumn(Width = "200px", Locked = true)]
    public string EmployeeName { get; set; }

    [GridColumn(Width = "100px")]
    public string EmployeeFirstName { get; set; }

    [GridColumn(Width = "100px")]
    public string EmployeeLastName { get; set; }
}

 

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

.Columns(columns => columns.AutoGenerate(c => GridColumnHelpers.ConfigureColumn(c)))

 

در زیر متد ConfigureColumns را نگاه کنید

using Kendo.Mvc.UI;
using System;
using System.Web.Mvc;

namespace Cadru.Web.KendoExtensions
{
    public static class GridColumnHelpers
    {
        public static void ConfigureColumn<T>(GridColumnBase<T> column) where T : class
        {
            CachedDataAnnotationsModelMetadata metadata = ((dynamic)column).Metadata;
            object attributeValue = null;
            if (metadata.AdditionalValues.TryGetValue(GridColumnAttribute.Key, out attributeValue))
            {
                var attribute = (GridColumnAttribute)attributeValue;
                column.Width = attribute.Width;
                column.Locked = attribute.Locked;
                column.Hidden = attribute.Hidden;
                column.IncludeInMenu = attribute.IncludeInMenu;
                column.Lockable = attribute.Lockable;
                column.MinScreenWidth = attribute.MinScreenWidth;
            }
        }
    }
}

 

این امتیاز واقعی را دارد که متد ها می توانند فراخوانی شوند در context  که به صورت خودکار ستون های kendo را بسازد. یعنی به صورت خودکار قادر خواهد بود که ستون ها را بگیرد و خصوصیات متادیتا را به انها بدهد.

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

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

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید