Telerik UI for AspnetMVC Grid如何使用Number DateTime等編輯元件

在專案中碰到一個CASE，使用Telerik UI for AspnetMVC 當要編輯grid的內容時，如何使用Number 、 DateTime的元件呢?

其實使用的方法相當的簡單

當你安裝好telerik.ui.for.aspnetmvc

會有一個資料夾在你的VIEW資料夾中

然後只要針對你要使用的Model進行Attribute的設定即可

 
public class ProductViewModel
{
        [Editable(false)]
        [Key]
        [ScaffoldColumn(false)]
        [UIHint("String")]
        public int ProductID { get; set; }
        // The ProductName property is required
        [Required]
        public string ProductName { get; set; }
        // Use the Integer editor template for the UnitsInStock property
        [UIHint("Integer")]
        public short? UnitsInStock { get; set; }

        [UIHint("Decimal")]
        public decimal UnitPrice { get; set; }

        [DataType(DataType.Date)]
        public DateTime ProductDate { get; set; }
        [DataType(DataType.DateTime)]
        public DateTime ProductDateTime { get; set; }
}

應該會有人發如我們總共有使用二種方法。
1、[DataType(DataType.XXX)]
2、[UIHint("Integer")]

狀況區分如下：
[DataType(DataType.XXX)]
  這是微軟所提供的資料定義內容。
 

 
    // 摘要: 
    //     代表與資料欄位和參數相關聯之資料型別的列舉型別 (Enumeration)。
    public enum DataType
    {
        // 摘要: 
        //     表示自訂資料型別。
        Custom = 0,
        //
        // 摘要: 
        //     表示時間的瞬間，以一天的日期和時間表示。
        DateTime = 1,
        //
        // 摘要: 
        //     表示日期值。
        Date = 2,
        //
        // 摘要: 
        //     表示時間值。
        Time = 3,
        //
        // 摘要: 
        //     表示物件存在的持續時間。
        Duration = 4,
        //
        // 摘要: 
        //     表示電話號碼值。
        PhoneNumber = 5,
        //
        // 摘要: 
        //     表示貨幣值。
        Currency = 6,
        //
        // 摘要: 
        //     表示顯示的文字。
        Text = 7,
        //
        // 摘要: 
        //     表示 HTML 檔。
        Html = 8,
        //
        // 摘要: 
        //     表示多行文字。
        MultilineText = 9,
        //
        // 摘要: 
        //     表示電子郵件地址。
        EmailAddress = 10,
        //
        // 摘要: 
        //     表示密碼值。
        Password = 11,
        //
        // 摘要: 
        //     表示 URL 值。
        Url = 12,
        //
        // 摘要: 
        //     表示影像的 URL。
        ImageUrl = 13,
        //
        // 摘要: 
        //     表示信用卡卡號。
        CreditCard = 14,
        //
        // 摘要: 
        //     表示郵遞區號。
        PostalCode = 15,
        //
        // 摘要: 
        //     表示檔案上傳資料型別。
        Upload = 16,
    }

    那如果我們要使用的內容該定義沒有該怎麼處理呢?就透過下面的方法囉!

 [UIHint("Integer")]
    自行定義方法。


這樣畫面自然而然就會產生對應的UI編輯畫面了!