Cách thiết lập lưới giao diện người dùng Kendo với điều khiển hộp kiểm

Question

Tôi đang sử dụng lưới KSD UI MVC. Một trong các thuộc tính của mô hình là bool, vì vậy tôi cần trình bày nó trong lưới như hộp kiểm. Theo mặc định, giao diện người dùng Kendo trình bày nó dưới dạng giá trị "true" và "false" trong cột. Vì vậy, bạn cần phải lần đầu tiên bấm vào để có được hộp kiểm, sau đó lần thứ hai để bấm vào để thay đổi giá trị của combobox. Thay vì có giá trị mặc định từ lưới, tôi đặt ClientTemplate, vì vậy tôi đã nhận được hộp kiểm thay vì giá trị "true" và "false".

   c.Bound(p => p.GiveUp) 
        .Title("Giveup") 
        .ClientTemplate("<input type='checkbox' id='GiveUp' name='GiveUp' #if(GiveUp){#checked#}# value='#=GiveUp#' />") 
        .Width(50); 

lưới này sử dụng chỉnh sửa hàng loạt và trong lưới chỉnh sửa (GridEditMode.InCell)

 .Editable(x => x.Mode(GridEditMode.InCell)) 
     .DataSource(ds => ds.Ajax() 
          .ServerOperation(false) 
          .Events(events => events.Error("error")) 
          .Batch(true) 
          .Model(model => model.Id(p => p.Id)) 
          .Read(read => read.Action("Orders", "Order").Data("formattedParameters")))) 

Vì vậy, những gì tôi muốn làm là khả năng cho người dùng nhấp vào hộp kiểm và thay đổi giá trị của mô hình của tôi , nhưng tiếc là điều đó không hiệu quả. Tôi có thể thấy giá trị của hộp kiểm trực quan được thay đổi nhưng tôi không thấy hình tam giác màu đỏ đánh dấu ô là đã thay đổi và khi tôi nhấp vào nút thêm mục mới, giá trị từ hộp kiểm biến mất.

Vui lòng tư vấn về những gì tôi đang làm sai.

Xin cảm ơn trước.

Answer 1

Về cơ bản khi bạn thêm/xóa bản ghi khỏi lưới, hình tam giác màu đỏ luôn biến mất (hoặc khi bạn sắp xếp/trang/bộ lọc v.v.), hộp kiểm không phải là vấn đề với hình tam giác màu đỏ. Bây giờ cho hộp kiểm nếu bạn tạo một ClientTemplate mà lại là một hộp kiểm, bạn sẽ cần phải bấm một lần để đưa ô vào chế độ chỉnh sửa (bạn sẽ thấy không có sự khác biệt vì mẫu trình chỉnh sửa lại là hộp kiểm), do đó bạn sẽ cần nhấp vào lần thứ hai để thực sự thay đổi giá trị.

Những gì tôi đề nghị bạn thực hành tốt nhất là sử dụng cách tiếp cận được bảo vệ here - đó là cách nhanh hơn (ít hoạt động hơn cho lưới) và dễ dàng hơn việc áp dụng thêm logic để xử lý hai lần nhấp với phương pháp trên.

Answer 2

Đối với những người muốn xem mã trông như thế nào.

Home.cshtml

@(Html.Kendo().Grid<OrdersViewModel>() 
      .Name("Orders") 
      .Columns(c => 
      { 
       c.Bound(p => p.Error) 
        .Title("Error") 
        .ClientTemplate("<input type='checkbox' #= Error ? checked='checked': '' # class='chkbx' />") 
        .HtmlAttributes(new {style = "text-align: center"}) 
        .Width(50); 


<script> 
    $(function() { 
     $('#Orders').on('click', '.chkbx', function() { 
      var checked = $(this).is(':checked'); 
      var grid = $('#Orders').data().kendoGrid; 
      var dataItem = grid.dataItem($(this).closest('tr')); 
      dataItem.set('Error', checked); 
     }); 
    }); 
</script>