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

名前プロパティの直後に挿入することはできますが、3つの異なるパネルバーが1つのアイテムであるため、期待通りの結果が得られないのではないでしょうか。 1つしか展開されていない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")) 
) 

EDIT - 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>