Looking for kendo-grid Answers? Try Ask4KnowledgeBase
Looking for kendo-grid Keywords? Try Ask4Keywords

kendo-grid검도 그리드 시작하기


비고

Kendo UI 그리드는 테이블 표현을 통해 데이터를 시각화하고 편집 할 수있는 강력한 위젯입니다. 페이징, 정렬, 필터링, 그룹화, 편집 등과 같은 기본 데이터를 통해 작업을 수행하고 수행하는 방법에 대한 다양한 옵션을 제공합니다. 그리드에 데이터를 제공하려면 검도를 통해 로컬 또는 원격 데이터를 제공 할 수 있습니다 mediator로 사용되는 UI DataSource 구성 요소.

데모

Dojo (온라인 데모를 만들어 다른 사람들과 공유 할 수 있음)

문서

설치 또는 설정

HTML5 / Javascript, ASP.NET MVC, JSP 및 PHP 프로젝트 / 응용 프로그램에 Kendo-UI 그리드를 추가 할 수 있습니다.


아래 단계에 따라 HTML5 페이지에 검도 UI 격자를 추가하십시오.

  1. 빈 html5 페이지를 만듭니다.

  2. kendo.common.min.csskendo.default.min.css를 포함하십시오. head 태그 내에 링크 태그를 추가하십시오.

  3. Kendo-UI 라이브러리는 Jquery에 의존합니다. 따라서 jQuery 다음에 kendo.all.min.js 와 kendo.aspnetmvc.min.js를 포함 하십시오 .

  4. Kendo UI 그리드를 인스턴스화하는 방법에는 두 가지가 있습니다.

    • 빈 div 요소에서. 이 경우 모든 그리드 설정은 초기화 스크립트 문에 제공됩니다.
    • 기존 HTML 테이블 요소에서. 이 경우 일부 표 설정은 표 구조 및 요소 HTML 속성에서 추론 할 수 있습니다.

    두 경우 모두 모눈은 jQuery 플러그인으로 등록됩니다.

    당신은 CDN 경로를 찾을 수 있습니다 여기에 위에서 언급 한 파일.


예 : HTML5 페이지의 Kendo-UI Grid - 빈 div 요소

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid">
    </div>
    <script>
        var products = [{
            ProductID: 11,
            ProductName: "Chai",
        }, {
            ProductID: 22,
            ProductName: "Chang",
        }, {
            ProductID: 33,
            ProductName: "Aniseed Syrup",
        }, {
            ProductID: 44,
            ProductName: "Chef Anton's Cajun Seasoning",
        }, {
            ProductID: 55,
            ProductName: "Chef Anton's Gumbo Mix",
        }];
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    data: products,
                    schema: {
                        model: {
                            id: "ProductID",
                            fields: {
                                ProductName: {
                                    type: "string"
                                }
                            },
                        }
                    },
                    pageSize: 10
                },
                sortable: true, 
                filterable: true,
                pageable: true,
                columns: [
                    { field: "ProductID", title: "ProductID" },
                    { field: "ProductName", title: "ProductName" },
                    { command: ["edit", "destroy"], title: "&nbsp;" }
                ],
                editable: "inline"
            });
        }); 
    </script>
</body>
</html>
 

예 : HTML5 페이지의 Kendo-UI Grid - 기존 HTML 테이블 요소

<!DOCTYPE html>
<html>
 <head>
    <title></title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>

        <div id="example">
            <table id="grid">
                <colgroup>
                    <col />
                    <col />
                    <col style="width:110px" />
                    <col style="width:120px" />
                    <col style="width:130px" />
                </colgroup>
                <thead>
                    <tr>
                        <th data-field="make">Car Make</th>
                        <th data-field="model">Car Model</th>
                        <th data-field="year">Year</th>
                        <th data-field="category">Category</th>
                        <th data-field="airconditioner">Air Conditioner</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Volvo</td>
                        <td>S60</td>
                        <td>2010</td>
                        <td>Saloon</td>
                        <td>Yes</td>
                    </tr>
                    <tr>
                        <td>Audi</td>
                        <td>A4</td>
                        <td>2002</td>
                        <td>Saloon</td>
                        <td>Yes</td>
                    </tr> 
                    <tr>
                        <td>Toyota</td>
                        <td>Avensis</td>
                        <td>2006</td>
                        <td>Saloon</td>
                        <td>No</td>
                    </tr>
                </tbody>
            </table>

            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        height: 550,
                        sortable: true
                    });
                });
            </script>
        </div>

</body>
</html>
 

다음 단계에 따라 kendo-UI 그리드를 ASP.NET MVC 응용 프로그램에 추가하십시오.


  1. ASP.NET MVC 프로젝트 만들기
  2. Javascript 및 CSS 파일을 포함하십시오. 이러한 파일의 로컬 사본을 포함하거나 검도 UI CDN 서비스를 사용하는 두 가지 옵션이 있습니다.
  • 지역 JavaScript 및 CSS 사용

    ASP.NET MVC 용 Telerik UI의 설치 위치로 이동합니다. 기본적으로 C : \ Program Files (x86) \ Telerik에 있습니다.

    js 디렉토리를 설치 위치에서 복사하여 응용 프로그램의 Scripts 폴더에 붙여 넣으십시오.

    설치 위치에서 styles 디렉토리를 복사하여 응용 프로그램의 내용 폴더에 붙여 넣으십시오.

    Scripts / js 디렉토리의 이름을 Scripts / kendo로 바꿉니다. 콘텐츠 / 스타일콘텐츠 / 검도 로 바꿉니다.

    App_Start / BundleConfig.cs 를 열어 ASP.NET MVC 용 Telerik UI에 대한 스크립트 및 스타일 번들을 아래에 추가하십시오.

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
                    "~/Scripts/kendo/kendo.all.min.js",
                    // "~/Scripts/kendo/kendo.timezones.min.js", // uncomment if using the Scheduler
                    "~/Scripts/kendo/kendo.aspnetmvc.min.js"));

bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
                "~/Content/kendo/kendo.common.min.css",
                "~/Content/kendo/kendo.default.min.css"));

bundles.IgnoreList.Clear(); //Tell the ASP.NET bundles to allow minified files in debug mode.
 

jQuery 번들을 페이지의 head 태그로 옮긴다. 기본적으로 페이지 끝 부분에 있습니다. jQuery 이후 Telerik UI를 ASP.NET MVC 스크립트 번들로 렌더링하십시오.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
 
  • CDN 서비스 사용

    kendo.common.min.csskendo.default.min.css를 포함하십시오. 레이아웃의 head 태그 내에 링크 태그를 추가하십시오.

    jQuery 다음에 kendo.all.min.jskendo.aspnetmvc.min.js를 포함하십시오.

    Telerik MVC Scheduler wrapper를 사용하는 경우 kendo.all.min.js 다음에 kendo.timezones.min.js를 포함 하십시오 .

    당신은 CDN 경로를 찾을 수 있습니다 여기에 위에서 언급 한 파일.

    프로젝트에 Kendo.Mvc.dll 참조를 추가하면 DLL은 위치 래퍼 / aspnetmvc / Binaries / MVC *에서 사용할 수 있습니다.

    다음 단계는 ASP.NET MVC가 서버 쪽 래퍼가있는 Kendo.Mvc.UI 네임 스페이스를 알리는 것입니다. 이 경우 루트 web.config 및 Web.config보기의 <add namespace="Kendo.Mvc.UI" /> 네임 스페이스 태그를 <add namespace="Kendo.Mvc.UI" /> .

  1. 설정을 확인하려면 view / aspx 페이지에서 Kendo UI DatePicker 위젯을 추가하십시오.

면도칼

@(Html.Kendo().DatePicker().Name("datepicker"))
 

ASPX

<%: Html.Kendo().DatePicker().Name("datepicker") %>