/* ============================================================================ Kendo UI (Telerik) - Tùy biến giao diện Grid và các widget dùng chung ---------------------------------------------------------------------------- Phiên bản Kendo UI đang dùng : v2023.1.117 (wwwroot/lib/kendo/js) Theme đang dùng : classic-opal (wwwroot/lib/kendo/styles) LƯU Ý QUAN TRỌNG - File này CHỈ chứa phần tùy biến. Theme gốc của Telerik phải được nạp TRƯỚC file này (xem Views/Shared/_KendoAssets.cshtml). - Kendo 2023.1 dùng song song 2 bộ class: bộ cũ (.k-header, .k-grid-header-wrap) và bộ mới (.k-table-th, .k-table-td, .k-table-row). Mọi selector bên dưới đều khai báo cả hai để không phụ thuộc vào cách render của từng widget. - KHÔNG nạp thêm bất kỳ theme Kendo nào khác trên cùng một trang. Nạp hai theme cùng lúc chính là nguyên nhân làm vỡ giao diện grid. ========================================================================== */ /* --------------------------------------------------------------------------- 1. Nền chung của Grid ------------------------------------------------------------------------ */ .k-grid { /* Trang được bọc trong .container-fluid { font-size:12px } nên grid thừa hưởng cỡ chữ quá nhỏ. Ấn định lại để mọi grid đồng nhất. */ font-size: 13px; max-width: 100%; } .k-grid .k-table, .k-grid .k-grid-table, .k-grid .k-grid-header-table { font-size: inherit; } /* --------------------------------------------------------------------------- 2. Ô tiêu đề (header) - căn giữa, cho phép xuống dòng ------------------------------------------------------------------------ */ .k-grid .k-grid-header .k-header, .k-grid .k-grid-header .k-table-th, .k-grid .k-grid-header-wrap th.k-header { text-align: center; vertical-align: middle; white-space: normal; /* mặc định Kendo là nowrap -> tiêu đề dài bị cắt */ font-weight: 600; } /* Cấu trúc ô tiêu đề mà Kendo 2023.1 render ra là: th.k-header > span.k-cell-inner > span.k-link > span.k-column-title Theme gốc đặt .k-column-title { white-space:nowrap; text-overflow:ellipsis } nên tiêu đề dài bị cắt cụt thành "Thông tin lịch đấu...". Ba khối bên dưới mở khóa lần lượt cả ba lớp bọc để chữ xuống dòng và căn giữa. */ .k-grid .k-grid-header .k-cell-inner { justify-content: center; overflow: visible; } .k-grid .k-grid-header .k-cell-inner > .k-link { height: auto; overflow: visible; white-space: normal; justify-content: center; font-weight: inherit; } .k-grid .k-grid-header .k-column-title { white-space: normal; overflow: visible; text-overflow: clip; text-align: center; } /* Cột không cho sắp xếp được render thẳng chữ vào , không có .k-link. Trường hợp này đã được quy tắc .k-header ở trên xử lý. */ /* Icon sắp xếp nằm cạnh chữ, không đẩy chữ lệch khỏi tâm ô. */ .k-grid .k-grid-header .k-sort-icon { margin-left: 4px; flex-shrink: 0; } /* --------------------------------------------------------------------------- 3. Ô dữ liệu ------------------------------------------------------------------------ */ .k-grid td, .k-grid .k-table-td { vertical-align: middle; white-space: normal; word-break: break-word; } /* Cột thao tác (Sửa/Xóa...) không nên bị xuống dòng giữa các nút. */ .k-grid td .k-button + .k-button { margin-left: 4px; } /* --------------------------------------------------------------------------- 4. Toolbar và thanh phân trang ------------------------------------------------------------------------ */ .k-grid .k-toolbar, .k-grid .k-grid-toolbar { flex-wrap: wrap; gap: 4px; } .k-grid .k-pager, .k-grid .k-pager-wrap { flex-wrap: wrap; font-size: 13px; } /* --------------------------------------------------------------------------- 5. Vô hiệu hóa hiệu ứng transition toàn cục của site bên trong widget Kendo ---------------------------------------------------------------------------- clientFE/css/style.css khai báo "body a { transition: 0.5s all }". Quy tắc này áp lên cả link trong header grid, nút phân trang, menu filter... khiến grid nhấp nháy / trễ khi thao tác. Chỉ tắt trong phạm vi widget Kendo. ------------------------------------------------------------------------ */ .k-grid a, .k-pager a, .k-window a, .k-animation-container a { transition: none; } /* --------------------------------------------------------------------------- 6. Ô nhập liệu Kendo (DropDownList, DatePicker, NumericTextBox...) ------------------------------------------------------------------------ */ .k-input, .k-picker { width: inherit; } /* Bên trong cửa sổ/biểu mẫu popup thì cho tràn hết chiều ngang. */ .k-window .k-input, .k-window .k-picker, .k-edit-form-container .k-input, .k-edit-form-container .k-picker { width: 100%; } /* --------------------------------------------------------------------------- 7. Cửa sổ (Window) và hộp thoại ------------------------------------------------------------------------ */ .k-window-title { font-size: 10pt; font-weight: 600; } .k-window-content { font-size: 13px; } /* --------------------------------------------------------------------------- 8. Hòa giải xung đột với Bootstrap ---------------------------------------------------------------------------- Đã đối chiếu clientFE/css/bootstrap.css (Bootstrap 3.1.1) và lib/bootstrap (Bootstrap 5.3.3): mọi quy tắc của Bootstrap chạm tới bảng đều dùng selector theo TÊN THẺ (table, th, td) nên luôn thua selector theo class của Kendo (.k-table, .k-table-td...). Vì vậy KHÔNG cần ghi đè gì cho bảng. Ngoại lệ duy nhất là