Click Row Highlight Kendo UI Grid: Tăng Tương Tác Và Trải Nghiệm Người Dùng

Kendo UI Grid là một thành phần mạnh mẽ trong Kendo UI framework, cho phép bạn tạo ra các bảng dữ liệu tương tác, trực quan và dễ sử dụng. Tuy nhiên, bạn đã từng muốn highlight một hàng trong grid khi người dùng click vào nó để tạo ra sự tương tác trực quan hơn và giúp người dùng dễ dàng theo dõi? Bài viết này sẽ hướng dẫn bạn cách thực hiện Click Row Highlight Kendo Ui Grid một cách đơn giản và hiệu quả.

Sử dụng Event Handler để Highlight Row

Phương pháp phổ biến nhất là sử dụng event handler của Kendo UI Grid để phản hồi hành động click của người dùng vào một hàng bất kỳ. Event handler này cho phép bạn thay đổi style của hàng được click để highlight nó.

Cách thực hiện:

1. Thêm event handler “click” vào grid:

   $("#grid").kendoGrid({
       // ... các cấu hình khác
       dataBound: function() {
           this.tbody.find("tr").click(function(e) {
               // Logic highlight row
           });
       }
   });

2. Thay đổi style của hàng được click:

   this.tbody.find("tr").click(function(e) {
       $(this).addClass("highlight");
       // ... logic xử lý khác
   });

   Trong code trên, chúng ta sử dụng $(this) để truy cập vào đối tượng HTML của hàng được click. Sau đó, chúng ta thêm class highlight vào hàng đó, điều này sẽ áp dụng style highlight được định nghĩa trong CSS.

3. Xóa highlight khi click vào hàng khác:

   this.tbody.find("tr").click(function(e) {
       $(this).addClass("highlight");
       // Xóa highlight cho các hàng khác
       $(this).siblings().removeClass("highlight");
       // ... logic xử lý khác
   });

   Thêm vào code, chúng ta sử dụng siblings() để truy cập vào các hàng khác trong grid và sau đó sử dụng removeClass() để xóa class highlight khỏi các hàng đó.

Ví dụ:

$("#grid").kendoGrid({
    dataSource: {
        // ... nguồn dữ liệu
    },
    dataBound: function() {
        this.tbody.find("tr").click(function(e) {
            $(this).addClass("highlight");
            $(this).siblings().removeClass("highlight");
            // ... logic xử lý khác
        });
    }
});

// Định nghĩa style highlight trong CSS
.highlight {
    background-color: #f0f0f0;
}

Sử dụng “selectable” Option của Kendo UI Grid

Kendo UI Grid cung cấp option selectable cho phép người dùng chọn một hoặc nhiều hàng. Option này cũng có thể được sử dụng để highlight row khi được chọn.

Cách thực hiện:

1. Thêm option selectable vào grid:

   $("#grid").kendoGrid({
       // ... các cấu hình khác
       selectable: "row"
   });

2. Sử dụng event handler “select” để highlight row:

   $("#grid").kendoGrid({
       // ... các cấu hình khác
       selectable: "row",
       select: function(e) {
           // Logic highlight row
       }
   });

3. Thay đổi style của hàng được chọn:

   this.select(function(e) {
       $(e.selected).addClass("highlight");
       // ... logic xử lý khác
   });

   Trong code trên, chúng ta sử dụng e.selected để truy cập vào đối tượng HTML của hàng được chọn và sau đó thêm class highlight vào hàng đó.

Ví dụ:

$("#grid").kendoGrid({
    dataSource: {
        // ... nguồn dữ liệu
    },
    selectable: "row",
    select: function(e) {
        $(e.selected).addClass("highlight");
        // ... logic xử lý khác
    }
});

// Định nghĩa style highlight trong CSS
.highlight {
    background-color: #f0f0f0;
}

Sử dụng Kendo UI Theme

Kendo UI cung cấp các theme sẵn có cho grid, trong đó có theme “highlight” cho phép bạn highlight row khi click hoặc chọn.

Cách thực hiện:

1. Thêm Kendo UI theme vào project:

   Bạn có thể tải theme từ https://www.telerik.com/kendo-ui/themes hoặc sử dụng CDN.

2. Áp dụng theme vào grid:

   $("#grid").kendoGrid({
       // ... các cấu hình khác
       theme: "highlight"
   });

   Bằng cách thêm option theme: "highlight" vào grid, bạn sẽ áp dụng theme highlight sẵn có của Kendo UI.

Ví dụ:

$("#grid").kendoGrid({
    dataSource: {
        // ... nguồn dữ liệu
    },
    theme: "highlight"
});

Kết luận

Click row highlight Kendo UI grid là một tính năng hữu ích giúp bạn tạo ra giao diện tương tác và trực quan hơn cho bảng dữ liệu. Bằng cách sử dụng event handler, option selectable hoặc theme highlight, bạn có thể dễ dàng implement chức năng này vào grid của mình.

FAQ

1. Làm sao để highlight nhiều row cùng lúc?

Bạn có thể sử dụng option selectable: "multiple" của Kendo UI Grid để cho phép người dùng chọn nhiều hàng cùng lúc. Sau đó, sử dụng event handler select để highlight tất cả các hàng được chọn.

2. Làm sao để customize style highlight cho row?

Bạn có thể sử dụng CSS để định nghĩa style riêng cho class highlight. Ví dụ:

.highlight {
    background-color: #f0f0f0;
    color: #000;
    font-weight: bold;
}

3. Làm sao để bỏ highlight row?

Bạn có thể sử dụng removeClass() để xóa class highlight khỏi row. Ví dụ:

// Xóa highlight cho row hiện tại
$(this).removeClass("highlight");

4. Làm sao để highlight row dựa trên giá trị cột cụ thể?

Bạn có thể sử dụng event handler dataBound của Kendo UI Grid để kiểm tra giá trị của cột và highlight row tương ứng. Ví dụ:

this.tbody.find("tr").each(function(index, element) {
    var rowData = $(this).data("kendoGridRow");
    if (rowData.columnValue === "specificValue") {
        $(this).addClass("highlight");
    }
});

Gợi ý các bài viết khác:

• Tìm hiểu về Kendo UI Grid
• Cách sử dụng Kendo UI Data Source
• Tạo các cột tùy chỉnh trong Kendo UI Grid

Kêu gọi hành động:

Nếu bạn gặp bất kỳ vấn đề gì hoặc cần thêm hỗ trợ trong việc click row highlight Kendo UI grid, hãy liên hệ với chúng tôi qua Số Điện Thoại: 0372999996, Email: [email protected] hoặc đến địa chỉ: 236 Cầu Giấy, Hà Nội. Chúng tôi có đội ngũ chăm sóc khách hàng 24/7.