검도 UI 격자에서 그룹화 순서를 제어하는 방법이 있습니까? 다른 모든 그룹보다 먼저 그룹을 만들고 싶지만 Kendo UI 그리드는 그룹을 사전 순으로 정렬합니다. 그룹화 이름에 공백을 추가하는 것이 효과적이지만 매우 익숙한 것 같습니다.검도 UI 격자에서 그룹 순서 제어
columns: [
{
field: "LastName",
title: "Last Name"
},
{
field: "FirstName",
title: "First Name"
}
]
현재 그룹의 필드가 아닌 다른 그룹으로 그룹화를 정렬 할 수있는 방법이 없습니다. Telerik이 아닌 Kendo 그리드에서 그룹을 분류하는 방법을 사용하는 것은 지금 당장 가장 큰 기능 요청입니다. 그래서 우리는 지금 해킹을 사용하여 붙어 있습니다.
나에게 맞는 해킹 중 하나는 정렬 필드와 표시 필드를 숨겨진 범위 내에서 정렬 필드 부분을 숨기는 새로운 문자열 열로 결합하는 것입니다. 이 작업은 데이터 소스 측에서 수행됩니다 (SQL의 경우). 정렬 필드가 숫자 인 경우에도 새 열이 문자열로 정렬되므로 일부 경우에 적절하게 채워야합니다.
예를 들어, 내 데이터가 있다면 :
[
{
'Name': 'Alice',
'Rank': 10,
'RankName': '<span class="myHiddenClass">10</span>Alice',
... (other fields)
},
{
'Name': 'Bob',
'Rank': 9,
'RankName': '<span class="myHiddenClass">09</span>Bob',
... (other fields)
},
{
'Name': 'Eve',
'Rank': 11,
'RankName': '<span class="myHiddenClass">11</span>Eve',
... (other fields)
}
... (Multiple Alice/Bob/Eve records)
]
그럼 수있는 RankName 필드 대신의 이름 필드에 의해 그룹. 그룹 머리글에 이름 필드가 표시되지만 순위 필드로 정렬됩니다. 이 경우 Bob은 Alice가 첫 번째 알파벳 순서대로 첫 번째 그룹으로 표시됩니다. 이것은 당신이 언급 한 공간 패딩과 비슷하게 작동합니다.
사용 열은 열 순서를 지정 - 그룹은 그룹화가없는 경우 열 정렬과 동일한 방식으로 정렬됩니다 (클라이언트 정렬을 사용하는 경우). 정렬 방향은 JavaScript의 기본 정렬과 동일합니다.
그룹화 할 때 사용자 정의 방향 정렬이 그리드에서 지원 하지와 같은 당신은 당신의 데이터를 일단
감사 레오
당신이 데이터 소스를 정의한 후에는 쿼리를 추가 할 수 있으며이 관련
related.query({
sort: { field: "Sort", dir: "asc"},
group: { field: "CategoryName" },
pageSize: 50
});
이
검도의 그룹화가 주어진하여 배열의 모든 요소를 정렬 데이터 소스의 이름입니다 작동하는 것 같다 필드 (예 : fooBar)를 입력 한 다음 정렬 된 요소를 반복합니다. 의사 코드와 간단히 말해서에서 : 정렬 된 배열을 그룹화 할 필요가 있기 때문에
if (element[i].fooBar!= element[i-1].fooBar) {
StartNewGroup(element[i]);
} else {
AddToLastGroup(element[i]);
}
, 정렬을 변경하는 까다 롭습니다. 페이지로드 후 어느 시점에서
function overrideKendoGroupBy() {
var origFunc = kendo.data.Query.prototype.groupBy;
kendo.data.Query.prototype.groupBy = function (descriptor) {
var q = origFunc.call(this, descriptor);
var data = SortYourData(q.data, descriptor.dir);
return new kendo.data.Query(data);
};
}
전화 overrideKendoGroupBy()을 : 나는 나를 내가 좋아하는 그러나 그룹화 된 결과를 정렬 할 수 있습니다 내부 groupBy() 기능을 무시하는 코드를 만들었습니다. 이제 SortYourData() 함수를 구현하십시오. 여기서 q.data은 그룹화 배열이고 descriptor.dir은 "asc" 또는 "desc"입니다. q.data[n]은 n 번째 그룹에 포함 된 원래 데이터 원본의 요소를 포함하는 items 배열을 포함합니다.
참고 :이 솔루션은 페이징을 사용하지 않는 경우에만 작동합니다. 그룹화가 적용되기 전에 페이지가 분리되므로 데이터가 여러 페이지에 걸쳐있을 경우 모든 베팅이 해제됩니다.
AddDescending 및 AddAscending 사용해, 여기서는 이에 대한 간단한 해결책이다
@(Html.Kendo().Chart<T>()
[... other code ...]
.DataSource(ds => ds
.Read(read => read.Action("action", "controller"))
.Group(g => g.AddDescending(model=> model.property)) // <-- subtle difference here!
)
[... other code ...]
)
이하 실시 예를 참조.
그냥 그룹이 위의 샘플 코드에서
[{
'Value': 1,
'Description': 'Description 1',
'Grouping': 'Group 1'
},
{
'Value': 2,
'Description': 'Description 2',
'Grouping': ' Group 2'
},
{
'Value': 3,
'Description': 'Description 3',
'Grouping': 'Group 3'
}]
정렬 바람직 달성하기 위해 텍스트 앞에 공백을 추가 ... 아니 꽤 있지만 아주 간단 그룹 1 앞에 표시은 공백 때문에 발생합니다.
백 엔드에서 이름 앞에 공백을 추가하는 것에 대한 팁을 보내 주셔서 감사합니다. - UI에서 렌더링 될 때 공백이 실제로 제거됩니다. –