[Solved] onSelect causes items to not expand

[iConect Developer - Mike]

I've added a ClientEvent to get the onSelect method because I'm trying to cause the selection to cause a page to load within a DIV on the current page instead of reloading the whole page, but when I add the event for onSelect the expand/collapse stuff stops working completely.

@{
  Html.Telerik().PanelBar()
    .Name("PanelBar")
    .HtmlAttributes(new { style = "width: 100%; float: left;" })
    .ExpandMode(PanelBarExpandMode.Single)
    .SelectedIndex(0)
    .BindTo(Model.clients, (item, client) =>
    {
      PanelBarItem details = new PanelBarItem() { Text = "Client Details", ControllerName = "Management", ActionName = "ClientDetails", };
      PanelBarItem projects = new PanelBarItem() { Text = "Projects", };
      PanelBarItem users = new PanelBarItem() { Text = "Users", };

      foreach (ManagementViewModel.Project p in client.projects)
        projects.Items.Add(new PanelBarItem() { Text = p.name, ControllerName = "Management", ActionName = "ProjectDetails", });
      foreach (ManagementViewModel.User u in client.users)
        users.Items.Add(new PanelBarItem() { Text = (u.lastName + ", " + u.firstName), ControllerName = "Management", ActionName = "UserDetails", });

      item.Text = client.name;
      if(client.name != "Admin")
      {
        item.Items.Add(details);
        item.Items.Add(projects);
      }
      item.Items.Add(users);
    })
    .ClientEvents(e => e.OnSelect("PanelBar_onSelect"))
    .Render();
}

Any ideas?

[Atanas Korchev]

Hi Iconect Developer,

 Is the PanelBar_onSelect JavaScript function defined somewhere? If it is not the panelbar will fail to work properly as it will try to execute a function which does not exist.

Best wishes,
Atanas Korchev
the Telerik team

[iConect Developer - Mike]

Ok so there must have been a error in my javascript code but this leads me to another question here is my new code (I'm basically trying to get it to load the links in a div already on screen instead of loading a whole new page)

// handling the OnSelect event
function PanelBar_onSelect(e)
{
  alert("test");
  //var treeView = $('#PanelBar').data('tPanelBar');

  $.get('@Url.Action("Details", "Management")',
    {
    },
    function (result)
    { //JavaScript callback executed when the ajax request finishes
      $('#details').html(result);
    }
  );
}

@{
  Html.Telerik().PanelBar()
    .Name("PanelBar")
    .HtmlAttributes(new { style = "width: 100%; float: left;" })
    .ExpandMode(PanelBarExpandMode.Single)
    .SelectedIndex(0)
    .BindTo(Model.clients, (item, client) =>
    {
      PanelBarItem details = new PanelBarItem() { Text = "Client Details", };
      PanelBarItem projects = new PanelBarItem() { Text = "Projects", };
      PanelBarItem users = new PanelBarItem() { Text = "Users", };

      foreach (ManagementViewModel.Project p in client.projects)
        projects.Items.Add(new PanelBarItem() { Text = p.name, });
      foreach (ManagementViewModel.User u in client.users)
        users.Items.Add(new PanelBarItem() { Text = (u.lastName + ", " + u.firstName), });

      item.Text = client.name;
      if(client.name != "Admin")
      {
        item.Items.Add(details);
        item.Items.Add(projects);
      }
      item.Items.Add(users);
    })
    .ClientEvents(e => e.OnSelect("PanelBar_onSelect"))
    .Render();
}

Is there a way when setting the ActionName / ControllerName to also specify that it should put that link into a div or is the javascript from client events the only way to do that? And if that's the only way how can I add a value to the item so I can determine if they clicked on a project / client / user on the panel bar? TreeView had a Value property you could assign things to, but it appears panelbar doesn't have that in it.

[Dimo]

Hi Keith,

Yes, you need a Javascript event handler in order to specify that a partial view should be loaded somewhere on the page as a result of a PanelBar item click (selection).

As for your second question about how to find out which item has been clicked, you can add a custom CSS class or a custom HTML attribute to the respective item and check it inside the OnSelect handler. For example:

C#

item.Add().Text("ASP.NET WebForms").HtmlAttributes(new { @class = "webForms" });

JS

function onSelect(e) {

      var item = $(e.item);

      // item.attr("class")

}

Note that if using a custom CSS class, it won't be the only one applied, so you will have to extract it.

Regards,
Dimo
the Telerik team

[iConect Developer - Mike]

HtmlAttributes is being reported as read-only when I modify the CSHTML file so it adds a class for each type:

@{
  Html.Telerik().PanelBar()
    .Name("PanelBar")
    .HtmlAttributes(new { style = "width: 100%; float: left;" })
    .ExpandMode(PanelBarExpandMode.Single)
    .SelectedIndex(0)
    .BindTo(Model.clients, (item, client) =>
    {
      PanelBarItem details = new PanelBarItem() { Text = "Client Details", HtmlAttributes = (new { @class = "mgmClient", }), };
      PanelBarItem projects = new PanelBarItem() { Text = "Projects", };
      PanelBarItem users = new PanelBarItem() { Text = "Users", };

      foreach (ManagementViewModel.Project p in client.projects)
        projects.Items.Add(new PanelBarItem() { Text = p.name, HtmlAttributes = (new { @class = "mgmProject", }), });
      foreach (ManagementViewModel.User u in client.users)
        users.Items.Add(new PanelBarItem() { Text = (u.lastName + ", " + u.firstName), HtmlAttributes = (new { @class = "mgmUser", }), });

      item.Text = client.name;
      if (client.name != "Admin")
      {
        item.Items.Add(details);
        item.Items.Add(projects);
      }
      item.Items.Add(users);
    })
    .ClientEvents(e => e.OnSelect("PanelBar_onSelect"))
    .Render();
}

How do you set that variable in the way I'm using it?

[Dimo]

Hi Keith,

HtmlAttributes cannot be assigned with the = operator. In your case you can use

HtmlAttributes.Add(....)
or
HtmlAttributes.Merge(...)

All the best,
Dimo
the Telerik team

[iConect Developer - Mike]

Just so anyone else who might have had the same question sees my final solution:

View:

@{
  Html.Telerik().PanelBar()
    .Name("PanelBar")
    .HtmlAttributes(new { style = "width: 100%; float: left;" })
    .ExpandMode(PanelBarExpandMode.Single)
    .SelectedIndex(0)
    .BindTo(Model.clients, (item, client) =>
    {
      PanelBarItem details = new PanelBarItem() { Text = Resources.Strings.Client_Details, };
      details.HtmlAttributes.Add("class", "mgmClient");
      PanelBarItem projects = new PanelBarItem() { Text = Resources.Strings.Projects, };
      PanelBarItem users = new PanelBarItem() { Text = Resources.Strings.Users, };

      foreach (ManagementViewModel.Project p in client.projects)
      {
        PanelBarItem temp = new PanelBarItem() { Text = p.name, };
        temp.HtmlAttributes.Add("class", "mgmProject");
        projects.Items.Add(temp);
      }
      foreach (ManagementViewModel.User u in client.users)
      {
        PanelBarItem temp = new PanelBarItem() { Text = (u.lastName + ", " + u.firstName), };
        temp.HtmlAttributes.Add("class", "mgmUser");
        users.Items.Add(temp);
      }

      item.Text = client.name;
      if (client.name != "Admin")
      {
        item.Items.Add(details);
        item.Items.Add(projects);
      }
      item.Items.Add(users);
    })
    .ClientEvents(e => e.OnSelect("PanelBar_onSelect"))
    .Render();
}

<script type="text/javascript">
  // handling the OnSelect event
  function PanelBar_onSelect(e)
  {
    var item = $(e.item);
    var type = item.attr("class");

    $.get('@Url.Action("Details", "Management")',
      {
        itemType: type,
      },
      function (result)
      { //JavaScript callback executed when the ajax request finishes
      $('#details').html(result);
      }
    );
  }
</script>

Controller:

public ActionResult Details(string itemType)
{
    string[] sa = itemType.Split(new char[] { ' ' });
    foreach (string s in sa)
    {
        switch (s)
        {
            case "mgmClient":
                return PartialView("Details/_ClientDetails");
            case "mgmProject":
                return PartialView("Details/_ProjectDetails");
            case "mgmUser":
                return PartialView("Details/_UserDetails");
        }
    }

    return PartialView("Details/_Blank");
}