Làm thế nào để chèn một thanh phân chia giữa nhiều nhóm trên menu Kendo UI

Question

Tôi đang sử dụng định nghĩa phong cách Razor tinh khiết cho một Menu Kendo:

@using Kendo.Mvc.UI 
@(Html.Kendo().Menu() 
    .Name("main-menu") 
    .Items(items1 => 
     { 
      items1.Add().Text("Home").Url(@Url.Action("Index", "Home")); 
      items1.Add().Text("Movements").Items(subs => 
       { 
        subs.Add().Text("Import Data").Action("Import", "VehicleMovementBatch"); 
        subs.Add().Text("View Movements"); 
       }); 
      items1.Add().Text("Presences"); 
      items1.Add().Text("Billing");    
      items1.Add().Text("Config").Items(items2 => 
        { 
         items2.Add().Text("Pricing").Action("Index", "PriceRule"); 
         items2.Add().Text("Users"); 
        });       
      items1.Add().Text("Control"); 
     }) 
) 

Tôi có thể tìm thấy hoàn toàn đẫm máu không có gì bất cứ nơi nào trên tất cả các internets, mà thậm chí gợi ý làm thế nào để làm điều này đúng cách. Gần nhất tôi có là xác định DataSource trong ký hiệu đối tượng JavaScript, với các dấu tách và gán nó vào lưới oj phía máy khách trong thời gian chạy. Đây chắc chắn là một ví dụ điển hình về một trường hợp mà chỉ có thể cầu nguyện cho tất cả các vị thần rằng API không phải là quá thiếu chính xác như tài liệu.

Answer 1

Đây là tất cả những gì bạn cần làm. Tự tìm ra nó vì tôi không thể tìm thấy câu trả lời ở bất cứ đâu trên web.

items1.Add().Text("<hr/>").Encoded(false).Enabled(false); 

Answer 2

Các < hr /> điều không làm việc cho tôi trong kendo 2014.1.528

này:

children.Add().Text("<div class='k-separator'></div>").Encoded(false).Enabled(false); 

Vì vậy, một ví dụ sẽ là:

items.Add().Text("Menu X").ImageUrl(Url.Content("~/Content/img/menux_16E.png")) 
    .Items(children => 
    { 
     children.Add().Text("Item 1").ImageUrl(Url.Content("~/Content/img/item1_16E.png")); 
     children.Add().Text("<div class='k-separator'></div>").Encoded(false).Enabled(false); 
     children.Add().Text("Item 3").ImageUrl(Url.Content("~/Content/img/item3_16E.png")); 
    }); 

Answer 3

Để giúp bất kỳ ai gặp vấn đề này trong tương lai, bạn có thể thêm dấu phân cách trực tiếp với:

items.Add().Separator(true); 

Điều này hoạt động từ ít nhất là v2013.2.918, vì đó là những gì tôi đang sử dụng.

Justin

Answer 4

Tôi có v2016.3.914 và items.Add().Separator(true); tạo ra một thanh cuộn ngang không mong muốn trên một trang RTL.

tôi giải quyết nó bằng cách sử này:

inner.Add().Separator(true).HtmlAttributes(new { style = "width: 99%;" });