Panels cannot be expanded or collapse

[jaimestuardo]

I have this Panel model:

public class PanelAsignacionIncidenciaModel
{
    public enum PanelComponentsEnum
    {
        Informacion = 1,
        Asignacion = 2
    }

    [BsPanel(Id = PanelComponentsEnum.Informacion, Expandable = true, Editable = false)]
    [Display(Name = "Información")]
    public InformacionIncidenciaModel Informacion { get; set; }

    [BsPanel(Id = PanelComponentsEnum.Asignacion)]
    [Display(Name = "Asignación")]
    public AsignacionIncidenciaModel Asignacion { get; set; }
}

When the panels are rendered in view, and I try to expand or collapse them, the URL in the browser adds "#" to the end, but the panels are not actually expanded nor collapsed.

[alessandromuresan]

Hey @jaimestuardo did you instantiate the panel widget on the client-side? Such as $('.your-panel-selector').bsPanel(); ?

[jaimestuardo]

I have this in the js:

  require([
         'bforms-initUI',
         'bforms-panel'
  ], function () {
    var IncidenciaAsignar = function (options) {
        this.options = $.extend(true, {}, options);
    };

    IncidenciaAsignar.prototype.init = function () {
        this.$incidencia = $(".js-incidencia");
        //apply BForms plugins
        this.$incidencia.bsInitUI(this.options.styleInputs);

        $('.bs-asignacion').bsPanel();
    };

    $(document).ready(function () {
        var ctrl = new IncidenciaAsignar(requireConfig.pageOptions);
        ctrl.init();
    });
  });

And this is the view:

  @model Development.Models.Forms.PanelAsignacionIncidenciaModel

  @using BForms.Html
  @using BForms.Models  
  @using BForms.Renderers
  @using BForms.Panels
  @using RequireJsNet

  @{
    ViewBag.Title = "Asignar Incidencia";
  }

  <h3></h3>

  <fieldset>
    <legend>Asignar Incidencia: "@ViewData["NombreIncidencia"]"</legend>

  @(Html.BsPanelsFor(Model).ConfigurePanels(cfg =>
  {
    cfg.Renderer<BsPanelBaseRenderer>();

    cfg.For(x => x.Informacion).Content(Html.Partial("_Informacion", Model.Informacion).ToString()).HtmlAttributes(new { @class = "bs-asignacion" }).Expanded(true);

    cfg.For(x => x.Asignacion).Content(Html.Partial("_Asignacion", Model.Asignacion).ToString()).HtmlAttributes(new { @class = "bs-asignacion" }).Theme(BsPanelTheme.LightGreen).InitialEditable();
  }))  

  </fieldset>

It does not work.

[cristipufu]

Hi @jaimestuardo,

You should use your browser's console (F12) and check for javascript errors or warnings.

Just specify a name to the panel options (or id attribute via html attributes):

$('.bs-asignacion').bsPanel({
   name: 'asignaction'
});