CODEWITHSUNDEEP
c#asp.net-mvckendo-ui
Monah
Monah

Reputation: 6784

Kendo Ui PanelBar dynamic load

I have 2 tables CourseCatalog and Courses and I want to display them using Kendoui Panelbar, how can I achieve this?

the content of panelbar titles will be dynamic and also each panel is dynamic

hope i explained my needs clearly

here a code sample

public class CourseCatalog
{
    public int CatalogId{get; set;}
    public string Name {get; set;}
}

public class Course
{
    public int CourseId{get; set;}
    public int CatalogId{get; set;}
    public string CourseName{get; set;}
    public int Hours{get; set;}
}

the controller

public class AvailableCourses:Controller
{
    public ActionResult Index()
    {
         return View();
    }

    public ActionResult Courses(int id)
    {
         return PartialView();
    } 
}

the view

@(Html.Kendo().PanelBar().Name("avaliableCoursesPanelBar")
       .Items(i=>{
             i.Add().Text("Training Courses").LoadContentFrom(Url.Action("Courses","AvailableCourses",new {id=1}));
       });
  )

my problem is i can add manually the items to the panel bar and to assign the parameter manually id=1, but how to automate this process completely?

Upvotes: 1

Views: 2577

Answers (1)

Monah
Monah

Reputation: 6784

You can do the following:

1- your controller assuming that you are using entityframework and the context called db

// function to return the course catalog list
public List<CourseCatalog> GetCourseCatalogs()
{
    var details=db.CourseCatalogs.ToList();
    return details;
}

// your index action
public ActionResult Index()
{
    ViewBag.Catalogs=GetCourseCatalogs();
    return View();
}

// partial view for your Course details with parameter id to filter the course catalog

public ActionResult CourseDetails(int id)
{
    var details = db.Courses.Where(t=>t.CatalogId==id).ToList();
    return PartialView(details);
}

2- your index view

 Html.Kendo()
    .PanelBar()
    .Name("catalogBar")
    .ExpandMode(PanelBarExpandMode.Single)
            .Items(items =>
            {
                // here is the trick to add the items dynamically
                foreach (YourApplication.Models.Catalog detail in ViewBag.Catalogs)
                {
                    items.Add()
                        .Text(detail.Name)
                        .LoadContentFrom(Url.Action("CourseDetails", "YourController", new { id = detail.Id }));
                }

            })
)

3- your course details view

the content depends on how you will display it, here i will assume that you will display it in ul

  @model IEnumerable<YourApplication.Models.Course>


      <ul>
        @foreach(YourApplication.Models.Course detail in Model)
        {
           <li>@detail.Name</li>
        }
        </ul>

hope this will help you

Upvotes: 1

Related Questions