เปลี่ยนค่าจาก int ให้แสดงค่าเป็น string(คำที่ต้องการ) ใน Grid โดยใช้ ClientTemplate

สำหรับ Kendo Grid แล้วถ้าเรารับค่าจากหลังบ้านมาเป็นประเภทไหน มันก็จะถูกแสดงให้เป็นค่านั้นโดยตรง โปรแกรมเมอร์อาจจะเก็บค่าหรือใช้ค่าเป็นตัวเลข เช่นกับพวก Keychain ต่างๆ ซึ่งถ้าหากว่าไม่ได้แปลงค่าพวกนี้ตอนอยู่หลังบ้าน แล้วปล่อยให้ค่านี้ไปถึงที่หน้าบ้าน อาจจะทำให้ตัวเลขนั้นขึ้นมาแสดงโดยตรง

ยกตัวอย่างเช่น ใช้ Type ที่เก็บค่าเป็นตัวเลข แต่ต้องการแสดงหน้าบ้านให้เป็น คำ ซึ่งในกรณีที่หลังบ้านไม่ได้แปลงให้เป็น string มาซะก่อน

เช่น  Type --> 1 = "Woman"
    Type --> 2 ="Man"

แต่ใน Kendo ถ้า bindค่าโดยตรงจะไม่สามารถทำได้ แต่ว่าเราสามารถใช้ Client Template มาช่วยในการแสดงนี้ได้

ซึ่งสามารถใช้ได้สองแบบ แบบแรกคือ เขียน function ใน java script ให้ return ค่าเป็น string หรืออีกแบบหนึ่งคือการเปลี่ยนค่าใน ViewModel

ตัวอย่างการ bind ค่าลงใน Grid

@(Html.Kendo().Grid<ListViewModel>()
      .Name("grid")
      .Columns(columns =>
        {
          columns.Bound(c => c.Id);
          columns.Bound(c=>c.Type).ClientTemplate("#=checkType(Type) #").Width(80);
          columns.Bound(c =>c.Status).ClientTemplate("#=StatusText #").Width(80);
       })
       .Scrollable()
       

วิธีแรกที่ใช้คือใช้ ClientTemplate แล้วเขียนฟังชั่นเช็คค่าที่ส่งมาแล้ว return ค่ากลับเป็น คำที่ต้องการจะให้เป็น ดังตัวอย่างข้างล่าง

function checkType(Type) {
   if (Type == 1) {
      return  'Woman';
   }else{
      return  'Man';
   }
}

หรือ อีกตัวอย่างนึ่ง คือ การใช้ ClientTemplate โดยเปลี่ยนค่าจากใน ViewModel ใช้ Switch case ในการเช็คค่าแล้ว return ค่ากลับไป

public int Type;
public int Status;
public string StatusText
{
   get{
        switch (this.Status)
             {
                case 1 : return "New";
                case 2 : return "Submitted";
                case 3 : return "Canceled";
                default: return string.Empty;
             }
      }
}

เพียงเท่านี้ก็สามารถแสดงค่า int เป็นคำอ่านที่คนใช้เข้ามาสามารถเข้าใจได้อย่างง่ายแล้ว