asp.net mvc kendo paneli çubuğu

Question

benim paneli çubuklarının güncel genişletmek modu i tek ben bu talimat ExpandMode ile denedim olarak değiştirin olamazdı katıdır (Kendo.Mvc.UI.PanelBarExpandMode.Single) ; ama doğru yerini bilmiyorum! should i arası talimat

@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> 
 
}

: bu benim kodudur? bu benim durumum:

Answer 1

Ad mülkünden hemen sonra ekleyebilirsiniz, ancak her biri bir öğeyle 3 farklı panel çubuğunuz olduğundan beklediğinizi yapacağından emin değilim. Sadece bir tanesi genişletilmiş 3 öğe ile tek bir panelbar isteyebilirsiniz düşünüyorum? gibi bir şey:

@(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'e - PanelBarExpandMode.Single varsayılan olarak tüm öğeleri kapatmak için izin vermez, ancak jquery ile yapabilirsiniz. İlk olarak yukarıda gösterildiği gibi .Events(e => e.Select("expandCollapse"))'u ekleyin ve bu betiği aşağıya ekleyin:

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