asp.net的MVC劍道面板欄

Question

我的面板條當前擴張模式是多個 我不能將其更改爲單 我試過這個指令 ExpandMode（Kendo.Mvc.UI.PanelBarExpandMode.Single） ; 但我不知道它的正確位置！ 這是我的代碼：

@model mvc_depences.Models.Profil 
 
@{ 
 
    Layout = "~/Views/Shared/admin.cshtml"; 
 
} 
 
@using (Html.BeginForm("ExtractDroitwithBase", "Home")) 
 
     { 
 
    <div class="form-horizontal"> 
 
     <h4 style="margin-right:100px"> Cr&#233;er un Nouveau Profil</h4> 
 
     <hr /> 
 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
 
     <div class="form-group"> 
 
      @Html.LabelFor(model => model.libelleP, htmlAttributes: new { @class = "control-label col-md-2" }) 
 
      <div class="col-md-10"> 
 
       <input type="text" id="Profil" name="Profil" class="text"/> 
 
       @Html.ValidationMessageFor(model => model.libelleP, "", new { @class = "text-danger" }) 
 
      </div> 
 
     </div> 
 
     <section> 
 
      <div> 
 
       <h4> Droits :</h4> 
 
      </div> 
 
      <br /> 
 
      <div> 
 
       <div style="width:250px"> 
 
        @(Html.Kendo().PanelBar() 
 
     .Name("IntroPanelBar") 
 
     .Items(items => 
 
     { 
 
      items.Add() 
 
       .Text("Gestion des projets") 
 
       .Selected(true) 
 
       .Expanded(false) 
 
       .Content(@<text> 
 
        <p style="padding:0 1em"> 
 
         <input class="k-checkbox k-checkbox" id="CkbQuestion1" name="CkbQuestion1" type="checkbox" /> 
 
         <label class="k-checkbox-label" for="CkbQuestion1">Cr&#233;er Projet</label> 
 
         <br /> 
 
         <input class="k-checkbox k-checkbox" id="CkbQuestion2" name="CkbQuestion2" type="checkbox" /> 
 
         <label class="k-checkbox-label" for="CkbQuestion2">Consulter Projet</label> 
 
         <br /> 
 
         <input class="k-checkbox k-checkbox" id="CkbQuestion3" name="CkbQuestion3" type="checkbox" /> 
 
         <label class="k-checkbox-label" for="CkbQuestion3">Modifier Projet</label> 
 
        </p> 
 
       </text>); 
 
     }) 
 
        ) 
 
       </div> 
 
      <div style="width:250px ; "> 
 
       @(Html.Kendo().PanelBar() 
 
     .Name("IntroPanelBar1") 
 
     .Items(items => 
 
     { 
 
      items.Add() 
 
       .Text("Gestion des depences") 
 
       .Selected(true) 
 
       .Expanded(false) 
 
       .Content(@<text> 
 
       <p style="padding:0 1em"> 
 
        <input class="k-checkbox k-checkbox" id="CkbQuestion1" name="CkbQuestion1" type="checkbox" /> 
 
        <label class="k-checkbox-label" for="CkbQuestion1">Cr&#233;er depence</label> 
 
        <br /> 
 
        <input class="k-checkbox k-checkbox" id="CkbQuestion2" name="CkbQuestion2" type="checkbox" /> 
 
        <label class="k-checkbox-label" for="CkbQuestion2">Consulter depence</label> 
 
        <br /> 
 
        <input class="k-checkbox k-checkbox" id="CkbQuestion3" name="CkbQuestion3" type="checkbox" /> 
 
        <label class="k-checkbox-label" for="CkbQuestion3">Modifier depence</label> 
 
       </p> 
 
      </text>); 
 
     }) 
 
       ) 
 
      </div> 
 
       <div style="width:250px ;"> 
 
        @(Html.Kendo().PanelBar() 
 
     .Name("IntroPanelBar2") 
 
     .Items(items => 
 
     { 
 
     items.Add() 
 
      .Text("Gestion des Recettes") 
 
      .Selected(true) 
 
      .Expanded(false) 
 
      .Content(@<text> 
 
       <p style="padding:0 1em"> 
 
        <input class="k-checkbox k-checkbox" id="CkbQuestion1" name="CkbQuestion1" type="checkbox" /> 
 
        <label class="k-checkbox-label" for="CkbQuestion1">Cr&#233;er recette</label> 
 
        <br /> 
 
        <input class="k-checkbox k-checkbox" id="CkbQuestion2" name="CkbQuestion2" type="checkbox" /> 
 
        <label class="k-checkbox-label" for="CkbQuestion2">Consulter recette</label> 
 
        <br /> 
 
        <input class="k-checkbox k-checkbox" id="CkbQuestion3" name="CkbQuestion3" type="checkbox" /> 
 
        <label class="k-checkbox-label" for="CkbQuestion3">Modifier recette</label> 
 
       </p> 
 
      </text>); 
 
     }) 
 
        ) 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <div class="col-md-offset-3 col-md-10"> 
 
        <input type="submit" value="Ajouter" class="btn btn-primary" style="width:200px" /> 
 
       </div> 
 
      </div> 
 
     </section> 
 
    </div> 
 
}

我應該在哪裏間的指令？ 這是我的情況：

Answer 1

你可以在name屬性後面插入它，但我不確定這是否會做你期望的，因爲你有3個不同的面板欄，每個面板欄有一個項目。我想你可能想要一個單獨的面板條，其中只有一個擴展了3個項目？喜歡的東西：

@(Html.Kendo().PanelBar() 
     .Name("IntroPanelBar") 
     .ExpandMode(PanelBarExpandMode.Single) 
     .Items(items => 
     { 
     items.Add() 
      .Text("Gestion des projets") 
      .Selected(true) 
      .Expanded(false) 
      .Content(@<text> 
       <p style="padding:0 1em"> 
        <input class="k-checkbox k-checkbox" id="CkbQuestion1" name="CkbQuestion1" type="checkbox" /> 
        <label class="k-checkbox-label" for="CkbQuestion1">Cr&#233;er Projet</label> 
        <br /> 
        <input class="k-checkbox k-checkbox" id="CkbQuestion2" name="CkbQuestion2" type="checkbox" /> 
        <label class="k-checkbox-label" for="CkbQuestion2">Consulter Projet</label> 
        <br /> 
        <input class="k-checkbox k-checkbox" id="CkbQuestion3" name="CkbQuestion3" type="checkbox" /> 
        <label class="k-checkbox-label" for="CkbQuestion3">Modifier Projet</label> 
       </p> 
      </text>); 

     items.Add() 
      .Text("Gestion des depences") 
      .Selected(true) 
      .Expanded(false) 
      .Content(@<text> 
      <p style="padding:0 1em"> 
       <input class="k-checkbox k-checkbox" id="CkbQuestion1" name="CkbQuestion1" type="checkbox" /> 
       <label class="k-checkbox-label" for="CkbQuestion1">Cr&#233;er depence</label> 
       <br /> 
       <input class="k-checkbox k-checkbox" id="CkbQuestion2" name="CkbQuestion2" type="checkbox" /> 
       <label class="k-checkbox-label" for="CkbQuestion2">Consulter depence</label> 
       <br /> 
       <input class="k-checkbox k-checkbox" id="CkbQuestion3" name="CkbQuestion3" type="checkbox" /> 
       <label class="k-checkbox-label" for="CkbQuestion3">Modifier depence</label> 
      </p> 
     </text>); 

     items.Add() 
      .Text("Gestion des Recettes") 
      .Selected(true) 
      .Expanded(false) 
      .Content(@<text> 
      <p style="padding:0 1em"> 
       <input class="k-checkbox k-checkbox" id="CkbQuestion1" name="CkbQuestion1" type="checkbox" /> 
       <label class="k-checkbox-label" for="CkbQuestion1">Cr&#233;er recette</label> 
       <br /> 
       <input class="k-checkbox k-checkbox" id="CkbQuestion2" name="CkbQuestion2" type="checkbox" /> 
       <label class="k-checkbox-label" for="CkbQuestion2">Consulter recette</label> 
       <br /> 
       <input class="k-checkbox k-checkbox" id="CkbQuestion3" name="CkbQuestion3" type="checkbox" /> 
       <label class="k-checkbox-label" for="CkbQuestion3">Modifier recette</label> 
      </p> 
      </text>); 

     }) 
     .Events(e => e.Select("expandCollapse")) 
) 

編輯 - PanelBarExpandMode.Single不會允許你關閉默認情況下，所有的項目，但你可以用jQuery做到這一點。首先加上.Events(e => e.Select("expandCollapse"))，如上圖所示，然後在底部加上這個腳本：

<script type="text/javascript"> 

    function expandCollapse(e) { 
     if ($(e.item).is(".k-state-active")) { 
      var that = this; 
      window.setTimeout(function(){that.collapse(e.item);}, 1); 
     } 
    } 

</script>