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