2016-04-11 50 views
1

我的面板条当前扩张模式是多个 我不能将其更改为单 我试过这个指令 ExpandMode(Kendo.Mvc.UI.PanelBarExpandMode.Single) ; 但我不知道它的正确位置! 这是我的代码:asp.net的MVC剑道面板栏

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

我应该在哪里间的指令? 这是我的情况:

回答

0

你可以在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> 
+0

感谢它的作品:D非常感谢!但我仍然有一个问题:当我扩大最后一个它stil扩大?当我再次点击它时,我会关闭它,可能吗? – kokomoi

+0

是的,它工作得很好:D!非常感谢 – kokomoi

+0

“接受答案”我该怎么办? – kokomoi