asp.net mvc kendo panel bar

Question

the current expand mode of my panel bars is multiple i couldn't change it to single i've tried with this instruction ExpandMode(Kendo.Mvc.UI.PanelBarExpandMode.Single); but i don't know its right place ! this is my 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>
}

where should i inter the instruction ? this is my situation :

Steve Greene · Accepted Answer · 2016-04-12T16:35:11.010

You can insert it right after the name property, but I'm not sure that is going to do what you expect since you have 3 different panel bars each with one item. I think you may want a single panelbar with 3 items where only one is expanded? Something like:

@(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 will not allow you to close all the items by default, but you can do it with jquery. First add .Events(e => e.Select("expandCollapse")) as shown above then add this script at the bottom:

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

thanks it works :D thanks a lot ! but i stil hav a problem : when i expand the last one it stil expanded ? i wana close it when i click on it one more time , is it possible ? — KhaoulaAtallah, Apr 12 '16 at 15:35

asp.net mvc kendo panel bar

1 Answers1