Kendo Panelbar MVC - 試圖通過點擊菜單項打開彈出

在我的程序中，我們有Kendo面板欄顯示菜單，當用戶點擊任何菜單子項時，我想打開一個對話框/彈出窗口。Kendo Panelbar MVC - 試圖通過點擊菜單項打開彈出

<div> 
     @(Html.Kendo().PanelBar() 
    .Name("panelbar") 
    .ExpandMode(PanelBarExpandMode.Single) 
    .Events(events => events 
     .Select(@<text> ReportController.onSelect </text>)) 
    .Items(panelbar => 
    { 
     panelbar.Add().Text("Test1") 
      .Expanded(true) 
      .Items(Test1=> 
      { 
       workers.Add().Text("Sample1"); 
       workers.Add().Text("Sample2"); 
       workers.Add().Text("Sample3"); 
      }); 

     panelbar.Add().Text("Test2") 
      .Items(Test2 => 
      { 
       clients.Add().Text("Book1") 
        .Items(costings => 
        { 
         costings.Add().Text("Page1"); 
         costings.Add().Text("Page2"); 
         costings.Add().Text("Page3");  
        }); 

       clients.Add().Text("Book2"); 
      }); 
     panelbar.Add().Text("New Page").Enabled(false); 
    }) 
     ) 
    </div> 
<script type="text/javascript"> 
    $(document) 
     .ready(function() { 
      ReportController.init("#panelBar"); 
     }); 
</script>

如果用戶在這裏點擊Sample1，它應該打開一個彈出窗口。我是新的劍道控制，我怎麼能做到這一點？

來源

2016-07-28 Savan Parmar

<!DOCTYPE html> 
<html> 
<head> 
    <base href="http://demos.telerik.com/kendo-ui/panelbar/events"> 
    <style> 
     html { 
      font-size: 14px; 
      font-family: Arial, Helvetica, sans-serif; 
     } 
    </style> 
    <title></title> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" /> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" /> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" /> 

    <script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> 
    <script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script> 
    <link rel="stylesheet" href="../content/shared/styles/examples-offline.css"> 
    <script src="../content/shared/js/console.js"></script> 
</head> 
<body> 

    <div id="example"> 
     <div class="demo-section k-content"> 
      <ul id="panelbar"> 
       <li class="k-state-active"> 
        Metallica - Master of Puppets 1986 
        <ul> 
         <li>Battery</li> 
         <li>Master of Puppets</li> 
         <li>The Thing That Should Not Be</li> 
         <li>Welcome Home (Sanitarium)</li> 
         <li>Disposable Heroes</li> 
         <li>Leper Messiah</li> 
         <li>Orion (Instrumental)</li> 
         <li>Damage, Inc.</li> 
        </ul> 
       </li> 
       <li> 
        Iron Maiden - Brave New World 2000 
        <ul> 
         <li>The Wicker Man</li> 
         <li>Ghost Of The Navigator</li> 
         <li>Brave New World</li> 
         <li>Blood Brothers</li> 
         <li>The Mercenary</li> 
         <li>Dream Of Mirrors</li> 
         <li>The Fallen Angel</li> 
         <li>The Nomad</li> 
         <li>Out Of The Silent Planet</li> 
         <li>The Thin Line Between Love And Hate</li> 
        </ul> 
       </li> 
       <li> 
        Empty Item 
       </li> 
       <li> 
        Ajax Item 
        <div></div> 
       </li> 
       <li> 
        Error Item 
        <div></div> 
       </li> 
      </ul> 
     </div> 
     <div id="console" class="box" style="display:none"> 
      <h4>Console log</h4> 
      <div class="console"></div> 
     </div> 
    </div> 
    <script> 
     $(function() { 
      $("#console").dialog({ 
       autoOpen: false, 
       show: { 
        effect: "blind", 
        duration: 1000 
       }, 
       hide: { 
        effect: "explode", 
        duration: 1000 
       } 
      }); 
     }); 

     function onSelect(e) { 
      var theDialog = $("#console").dialog("open"); 
      theDialog.dialog("open"); 

      kendoConsole.log("Select: " + $(e.item).find("> .k-link").text()); 
     } 

     function onExpand(e) { 
      kendoConsole.log("Expand: " + $(e.item).find("> .k-link").text()); 
     } 

     function onCollapse(e) { 
      kendoConsole.log("Collapse: " + $(e.item).find("> .k-link").text()); 
     } 

     function onActivate(e) { 
      kendoConsole.log("Activate: " + $(e.item).find("> .k-link").text()); 
     } 

     function onContentLoad(e) { 
      kendoConsole.log("Content loaded in <b>" + $(e.item).find("> .k-link").text() + 
          "</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>"); 
     } 

     function onError(e) { 
      kendoConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status); 
     } 

     $("#panelbar").kendoPanelBar({ 
      expandMode: "single", 
      select: onSelect, 
      expand: onExpand, 
      collapse: onCollapse, 
      activate: onActivate, 
      contentLoad: onContentLoad, 
      error: onError, 
      contentUrls: [, , , "../content/web/panelbar/ajax/ajaxContent1.html", "error.html"] 
     }); 
    </script> 

</body> 
</html>

在上述例子中，你可以觀察到，在onSelect事件，我已經打開一個DIV作爲對話框（模型），爲此，我已經intialised，在其上面的函數。

希望它有助於..！

來源

2016-07-29 06:44:05

Kendo Panelbar MVC - 試圖通過點擊菜單項打開彈出

回答

相關問題