검도 그리드 체인지 스타일 셀 데이터

Question

매우 기본적인 검도 그리드가 있습니다. 스타일 셀 데이터에 템플릿 기능을 사용하고 있습니다. 내가하고 싶은 일은 빨간색의 "편집"스타일과 녹색의 "삭제"스타일입니다.

GRID 코드

grid = $("#grid").kendoGrid({ 
     dataSource: { 
      data: createRandomUserData(), 
      schema: { 
       model: { 
        id: 'Id', 
        fields: { 
         FirstName: { 
          type: "string" 
         }, 
         Action: { 
          type: "string" 
         } 
        } 
       } 
      } 
     }, 
     columns: [ 
      { 
       field: "FirstName", 
       title: "First Name" 
      }, 
      { 
       field: "Action", 
       title: "Action", 
       template: "<span style='color:red'>#: Action #</span>" 
      } 
     ] 
    }).data("kendoGrid"); 

은 내가 어떻게 할 수 있습니다. 셀 데이터를 분리 할 수 ​​없습니다.

JSFiddle - http://jsfiddle.net/Sbb5Z/1338/

Answer 1

대신 직접 난 당신이 스타일을 여러 CSS 클래스를 정의 할 일은 제안 어떤 색상을 적용.

예 :

.Edit { 
    color: red; 
} 

.Delete { 
    color: green; 
} 

.Edit.Delete { 
    color: blue; 
} 

및 사용에 class 템플릿에 지정합니다. 그들은 Edit, greenDelete 경우와 blue 두 경우를 때

template: "<span class='#: Action #'>#: Action #</span>" 

이

는 red 사용합니다.

그리고 여기에 수정 JSFiddle : http://jsfiddle.net/OnaBai/298nZ/

편집 : 당신은 단어 당/형식을 분할 할 경우에, 당신은 약간의 프로그래밍이 필요합니다. 기본적으로 다음과 같이 할 수 있습니다.

// Convert words separated by spaces into an array 
var words = data.Action.split(" "); 
// Iterate on array elements for emitting the HTML 
$.each(words, function(idx, word) { 
    // emit HTML using template syntax 
    <span class="#: word #">#: word #</span> 
}); 

이 모든 템플릿에 싸여해야하고 당신이 얻을 :

<script type="text/kendo-script" id="template"> 
    # console.log("data", data, data.Action); # 
    # var words = data.Action.split(" "); # 
    # $.each(words, function(idx, word) { # 
     <span class='#= word #'>#= word #</span>&nbsp; 
    # }); # 
</script> 

그리고 그리드의 정의 : JSFiddle 여기에 수정

grid = $("#grid").kendoGrid({ 
    dataSource: { 
     data: createRandomUserData(), 
     schema: { 
      model: { 
       id: 'Id', 
       fields: { 
        FirstName: { 
         type: "string" 
        }, 
        Action: { 
         type: "string" 
        } 
       } 
      } 
     } 
    }, 
    columns: [ 
     { 
      field: "FirstName", 
      title: "First Name" 
     }, 
     { 
      field: "Action", 
      title: "Action", 
      template: $("#template").html() 
     } 
    ] 
}).data("kendoGrid"); 

:에 관한 http://jsfiddle.net/298nZ/1/