Telerik MVC Panel Bar getting reloaded for each Panel Bar Item action

Question

I am using Telerik MVC Panel Bar as a side menu bar for my application. I am referring this link Demo

I did bind(Local Data Binding) my Model to the Panel Bar, which is working fine. My question is How do I make the Panel Bar Item.Action("Action","Controller") to be an AJAX call. Because every time I click on a menu my Page gets reloaded.

I am unable to find any solution for this in Telerik MVC section.

Any Help would be appreciated.

Answer 1

you can define the URL for the data source.

This example comes from Telerik documentation.

View

@(Html.Kendo().PanelBar()
    .Name("panelbar")
    .DataTextField("Name")
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("GetEmployeesJson", "Controller")
        )
    )
)

Action in Controller

 public JsonResult GetEmployeesJson(int? id)
    {
        var dataContext = new SampleEntities();

        var employees = from e in dataContext.Employees
                        where (id.HasValue ? e.ReportsTo == id : e.ReportsTo == null)
                        select new
                        {
                            id = e.EmployeeID,
                            Name = e.FirstName + " " + e.LastName,
                            hasChildren = e.Employees1.Any()
                        };

        return Json(employees, JsonRequestBehavior.AllowGet);
    }