asp.net panneau mvc kendo bar

Question

mode expansion actuelle de mes barres de panneau est multiple je ne pouvais pas changer pour seul je l'ai essayé avec cette instruction ExpandMode (Kendo.Mvc.UI.PanelBarExpandMode.Single) ; mais je ne connais pas son bon endroit! voici mon code:

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

où dois-je entre l'instruction? c'est ma situation:

Answer 1

Vous pouvez l'insérer juste après la propriété de nom, mais je ne suis pas sûr que cela va faire ce que vous attendez puisque vous avez 3 barres de panneau différentes chacune avec un élément. Je pense que vous pouvez vouloir une seule barre de panneau avec 3 éléments dont un seul est développé? Quelque chose comme:

@(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 vous ne permettra pas de fermer tous les éléments par défaut, mais vous pouvez le faire avec jquery. Tout d'abord ajouter .Events(e => e.Select("expandCollapse")) comme indiqué ci-dessus puis ajouter ce script en bas: