본문 바로가기
웹 공부

kendo Ui 공부중...

by Senna 2022. 1. 19.

 

 $("#grid").kendoGrid({
            	toolbar:["save"],
                dataSource: {
                    type: "json",
                    transport: {
                        read: "http://localhost:8080/api"
                    },
                    pageSize: 50,
                    serverPaging: {
                    	page:1,
                    	pageSize:50
                    },
                    schema:{
                        model: {
                         id: "emp_cd",
                         fields: {
                           emp_nm: { type: "string"},
                           perno: { type: "string"},
                           jikgub: { type: "string"},
                           jikchk: { type: "string"},
                           telno: { type: "string"},
                           hpno: { type: "string"},
                         }
                        }
                       }
                },
                height: 800,
                groupable: true,
                sortable: true,
                pageable: true,
                editable: "popup", // not working. need to define how to update Data through CRUD API
                columns: [
                	 {
                         title: "#",
                         template: "#= ++record #",
                         width: 50
                       }, 
                {
                    field: "emp_cd",
                    title: "Code"
                }, {
                    field: "emp_nm",
                    title: "Name"
                }, {
                    field: "perno",
                    title: "Personal Number"
                }, {
                    field: "jikgub",
                    title: "Jikgub"
                }, {
                    field: "jikchk",
                    title: "Jikchk"
                }, {
                    field: "telno",
                    title: "tel"
                }, {
                    field: "hpno",
                    title: "H.P"
                }
                ],
                dataBinding: function() {
                    record = (this.dataSource.page() -1) * this.dataSource.pageSize();
                  }
            });

 

 

$("#datepicker").kendoDatePicker({
                // defines the start view
                start: "year",

                // defines when the calendar should return date
                depth: "month",

                // display month and year in the input
                format: "yyyy-MM-dd",

                // specifies that DateInput is used for masking the input element
                dateInput: true
            });

 

 

 

 

var jikchk = $("#jikchk").kendoDropDownList({
                optionLabel: "Select jikchk...",
                dataTextField: "text",
                dataValueField: "value",
                height: 500,
                dataSource: [
                  { text: "사업단장", value: "1" },
                  { text: "부문장", value: "2" },
                  { text: "전무", value: "3" },
                  { text: "대리", value: "4" },
                  { text: "과장", value: "5" },
                  { text: "사원", value: "6" },
                  { text: "FC", value: "7" },
                  { text: "실장", value: "8" },
                  { text: "본부장", value: "9" }
                ]
            });