панель панели кендо asp.net mvc

текущий режим расширения моих полос панели несколько, я не мог изменить его на один, я пробовал с помощью этой инструкции ExpandMode (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>
}

где я должен промежуточную инструкцию? это моя ситуация:


person kokomoi    schedule 11.04.2016    source источник


Ответы (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>
person Steve Greene    schedule 11.04.2016
comment
спасибо, это работает: D большое спасибо! но у меня все еще есть проблема: когда я расширяю последний, он все еще расширяется? я хочу закрыть его, когда я нажму на него еще раз, это возможно? - person kokomoi; 12.04.2016