검도 사용자 인터페이스 - 격자 빠른 안내서

검도 UI를 들어보지 못했을 수도 있어요. 괜찮아요.그것들은 Telerik's 제품 중의 다른 것으로 Sitefinity와 병렬되어 있다.당신이 알아야 할 주요 점은 검도 사용자 인터페이스가 잘 작동하고 있다는 것입니다. 당신이 Telerik가 건의한 용례를 엄격히 준수하기만 하면 됩니다.일단 네가 그 밖의 일을 하려고 한다면, 그것은 악몽이 될 것이다.내가 직접 말한 것은 ASP다.NET 코어 HtmlHelpersjQuery, Vue 및 다른 버전의 작업 방식은 다를 수 있습니다.
아마도 가장 유용한 검도의 특징 중 하나는 격자일 것이다.격자는 정렬, 페이지 나누기, 필터가 내장된 표입니다.또한 MVC 노드에 연결하여 데이터를 읽기, 업데이트 및 삭제할 수 있습니다.검도가 있다.NET Core는 jQuery Ajax 방법을 사용하여 이러한 노드와 대화합니다.(Telerik은 jQuery 의존 항목을 좋아합니다.)
메쉬도 모델의 강한 유형의 메쉬입니다.그들은 모델 속성에 따라 열을 쉽게 만들 수도 있고 다른 열을 쉽게 만들 수도 있다.사실 당신이 엄격한 창설 방법을 견지하기만 한다면 격자는 매우 좋다.
다음은 예시 격자를 시작하고 실행하는 데 사용되는 코드입니다. (이것은 cshtml 페이지의 div 요소에 들어갈 것입니다.)

@(Html.Kendo().Grid<MyModel>()
.Name("MyGrid")
.Columns(columns =>
{
    columns.Command(c => c.Destroy()).Width(50).Title("Command");
    columns.Bound(i => i.Id).Width(50).MinResizableWidth(50).Title("Id");
    columns.Bound(i => i.Name).Width(100).MinResizableWidth(100).Title("Name");
    columns.Bound(i => i.Status).Width(100).MinResizableWidth(100).Title("Status");                
})
.Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation(false))
.HtmlAttributes(new { style = "height: 550px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable()
.Filterable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
    .Custom()
    .Schema(s => s
        .Parse(@<text> 
        function(data) {                        
            if (!data || typeof(data) === 'string' ) 
                data = [{ Id: "N/A", Name: "NA", Status: "N/A" }]
            return data;
        }
        </text>)
        .Model(m =>
        {
            m.Id(p => p.Id);
        }))                    
    .Transport(t =>
    {
        t.Read(r => r.Action("GetMyModels", "ControllerName"));
        t.Destroy(d => d.Action("DeleteAModel", "ControllerName"));
    })
    .PageSize(20))
)

우리 이 모든 것을 이야기합시다.우선 격자에 모형을 제공해야 한다는 것을 주의하십시오.이것은 선택할 수 있는 것이 아니다.동적 옵션이 없습니다.클래스를 정의하여 Grid 메서드에 제공해야 합니다.메쉬 이름도 지정해야 합니다.이것은 잠시 후 격자가 되는 html id입니다.이것은 jQuery를 사용하여 격자를 선택하고 실행할 수 있도록 합니다...물건
다음은 칼럼입니다.위에서 설명한 바와 같이 모델 속성을 사용하여 열을 빠르게 정의할 수 있지만 너비를 정의하고 속성 크기를 조정할 수도 있습니다.너도 그들에게 직함을 줄 수 있다.속성 대신 템플릿 column.Template("<div>My Cool Custom Thing</div>") 을 정의할 수도 있습니다. 또한 속성 액세스를 위해 검도 표현식 구문을 사용할 수도 있습니다. #=MyModelProperty# 때로는 #=과 # 사이에서 JavaScript 표현식을 사용할 수도 있지만 항상 그렇지는 않습니다.이것은 실험이 필요하다.
명령 열을 정의할 수도 있습니다.Destroy, Edit, Create 및 기타 명령을 사용할 수 있습니다.사용자 정의 명령을 정의할 수도 있습니다. 이 명령은 자신의 JavaScript를 사용합니다.아름답다
delete 명령이라면 항상 .Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation(false)) 이 필요합니다. 그렇지 않으면 기본 브라우저 경보 문구를 꺼내서 확인을 요청합니다.
다음은 격자에 사용할 수 있는 일련의 기능이 있습니다. Groupable, Sortable, Filterable, Pageable, DataSource 등입니다. 이 모든 기능은 격자에 사용할 수 있습니다. 사용자가 표시된 데이터를 처리하여 그들의 취향에 맞게 할 수 있도록 합니다.
마지막으로 Custom().이것은 가장 큰 고통이지만 절대적으로 필요하다.Telerik 문서에서 이러한 코드 참조를 볼 수 있습니다

DataSource(datasource => datasource
    .Ajax()
    .Read(r => ...))

너는 그런 쓸데없는 말 때문에 걱정할 필요가 없다.검도는 특정한 방식으로 단점을 설정하고 데이터 주위에 특정한 포장을 사용해야 한다.나는 이것이 매우 좋을 것이라고 생각하지만, 나는 내가 필요로 하는 데이터를 포함하는 간단한 낡은 JSON을 단점에서 되돌아오는 것을 더욱 좋아한다.하지만 다른 방식으로 추가 검도 마법을 해제할 수 있다.그러나 그것이 없으면 모든 페이지와 정렬 등이 정상적으로 작동할 수 있다.
반대로 더 좋은 방법은 사용Ajax()이다. 첫 번째 코드 예시와 같다.이렇게 하면 모드 함수를 사용할 수 있고 Name 사용할 수 없습니다. 여기서 원한다면 해석 방법을 실행하고 단점에서 데이터를 변환할 수 있습니다.예상한 결과를 받지 못하면 기본 줄을 정의할 수도 있습니다(위와 같습니다).모델 메서드를 사용하면 사용자 정의 필드를 정의하고 모델에서 대체 Id를 사용할 수 있습니다.기본 Id와 다른 값을 적용하는 MVC 방법이 필요한 경우 중요합니다. 예를 들어 Model(m => m.Id(p => p.Name)) 속성을 사용하는 삭제 단점이 있는 경우 Custom() MVC destroy 방법에 기본적으로 전달되는 값이라고 할 수 있습니다.
Transport는 다양한 서버의 API 노드와 자체 MVC 노드를 사용하여 모든 MVC 작업을 패키지화합니다.그것은 데이터를 검색하고 조작하는 데 가장 큰 유연성을 제공했다.그것은 Ajax() 방법에서만 사용할 수 있으며, 이것은 사용하지 않아도 되는 또 다른 원인일 수 있다.
마지막으로 페이지에 표시된 항목을 정의할 수 있습니다 PageSize.
현재 하위 격자에 세부 데이터를 표시하려면 어떻게 해야 합니까?그래, 검도는 그들을 엄격히 준수하기만 하면 쉬워.

@(Html.Kendo().Grid<MyModel>()
.Name("MyGrid")
.Columns(columns =>
{
    columns.Command(c => c.Destroy()).Width(50).Title("Command");
    columns.Bound(i => i.Id).Width(50).MinResizableWidth(50).Title("Id");
    columns.Bound(i => i.Name).Width(100).MinResizableWidth(100).Title("Name");
    columns.Bound(i => i.Status).Width(100).MinResizableWidth(100).Title("Status");                
})
.ClientDetailTemplateId("template")
.Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation(false))
.HtmlAttributes(new { style = "height: 550px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable()
.Filterable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
    .Custom()
    .Schema(s => s
        .Parse(@<text> 
        function(data) {                        
            if (!data || typeof(data) === 'string' ) 
                data = [{ Id: "N/A", Name: "NA", Status: "N/A" }]
            return data;
        }
        </text>)
        .Model(m =>
        {
            m.Id(p => p.Id);
        }))                    
    .Transport(t =>
    {
        t.Read(r => r.Action("GetMyModels", "ControllerName"));
        t.Destroy(d => d.Action("DeleteAModel", "ControllerName"));
    })
    .PageSize(20))
)


<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<DetailModel>()
        .Name("template_#=Id#")
        .Columns(columns =>
        {
            columns.Bound(c => c.Address).Width(100).MinResizableWidth(50).Title("Address");
            columns.Bound(c => c.State).Width(100).MinResizableWidth(50).Title("State");
            columns.Bound(c => c.Country).Width(100).MinResizableWidth(50).Title("Country");
        })
        .Scrollable()
        .Groupable()
        .Sortable()
        .Pageable()
        .Filterable()
        .DataSource(dataSource => dataSource
        .Custom()
        .Schema(s => s
            .Parse(@<text>
            function(data) {
                if (!data || typeof(data) === 'string' )
                    data = [{ EmailType: "N/A", NoticeType: "N/A" }]
                return data;
            }
            </text>))
        .Transport(t =>
        {
            t.Read(r => r.Action("GetBounceTrackingDetails", "EDisclosures", new { Id = "#=Id#" }).Data("getParams"));
        })
        .PageSize(20))
        .ToClientTemplate()
    )
</script>

현재, 우리는 또 다른 템플릿이 스크립트 표시에 포장되어 있다.스크립트 표시에 id가 있습니다. 이 id는 부모 격자에 있는 이 방법의 텍스트와 일치해야 합니다. ClientDetailTemplateId("template")디테일 격자는 기본적으로 같지만 Columns 영역에서 임의의 # #=kendo-expression# 을 사용해야 한다는 것을 기억하십시오.아마도 다른 곳에서는 여전히 정상적으로 일할 수 있을 것이다.하위 집합이 있는 JSON이 있을 수 있습니다. 하위 집합을 Kendo 클라이언트 템플릿에 전달하기를 원할 수도 있습니다.
미안하지만, 이것은 불가능하다.집합을 부모 집합에서 하위 집합으로 전달할 수 없으며, 격자열에서 사용하기를 기대합니다.반대로, 사용자가 디테일한 정보를 선택할 때마다, Kendo는 디테일한 정보를 검색하기 위해 aax 호출을 실행합니다.이것은 차선적이다. 그러나 이것이 바로 Telerik가 원하는 것이다. 우리가 누구를 반대할 수 있겠는가?
마지막으로, 아마도 가장 중요한 것은 하위 격자 정의의 끝에 호출해야 한다는 것입니다 ToClientTemplate().
읊다, 읊조리다이것은 소리 없이 실패할 뿐만 아니라, 격자 아래의 csthml 파일에 정의된 모든 HTML을 페이지에 추가할 수 없습니다.잘못된 소식이 부족하면 몇 시간 동안 웃게 할 것이다. 이 문제의 즐거움을 훔쳐서 미안하다.무파라미터 구조 함수를 정의하면 잘 사용할 수 있습니다.
그래서 검도 사용자 인터페이스가 좋아요. 검도가 작동할 때 정의된 가장자리에 머물러 있습니다.만약 네가 감히 없는 상황에서 발을 내디딘다면 그것은 악몽이 될 것이니 이렇게 하지 마라.
행운을 빌어요. 재수 없는 개발자.나는 너를 위해 기도한다.