asp.net mvc kendo 面板栏

asp.net mvc kendo panel bar

我的面板栏当前的展开模式是多重的 我不能把它改成单身 我试过这个指令 扩展模式(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>
}

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

您可以在名称 属性 之后立即插入它,但我不确定这样做是否符合您的预期,因为您有 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>