asp.net mvc kendo 面板栏

Question

我的面板栏当前的展开模式是多重的我不能把它改成单身我试过这个指令扩展模式（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 个不同的面板栏，每个面板栏都有一个项目。我认为您可能想要一个包含 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>

asp.net mvc kendo 面板栏

asp.net mvc kendo panel bar

asp.net-mvc

kendo-ui

kendo-panelbar