Is it possible to use BindTo and LoadContentFrom for each bound item?

[Paul]

Hi there

I want to setup a panel bar that uses the BindTo(Model.Panels ....) to get the top level items. For each panel item I have defined in my panel list I have a property for the content url. I can't find any examples of this type of setup and I can't figure it out myself.

Does anyone know if this is possible?

Here is my model definition and an attempt to figure it out with no luck

public class WarningsViewModel

{

    public int SelectedPanel { get; set; }

    public List<Panel> Panels { get; set; }

 

    public WarningsViewModel()

    {

        Panels = new List<Panel>();

    }

 

    public class Panel

    {

        public string Text { get; set; }

        public string ContentUrl { get; set; }

    }

}

Html.Telerik().PanelBar()
    .Name("pnlWarnings")
    .BindTo(Model.Panels, mappings =>
        {
            mappings.For<HRPortal.Models.WarningsViewModel.Panel>(binding => binding
                .ItemDataBound((item, section) =>
                    {
                        item.Text = section.Text;
                        item.LoadFromContent = section.ContentUrl;  <-- This does not work
                    })
                .Children(xyz => xyz.   <-- this does not work as there are no children
                );
        })


Thanks for any help
Paul

[Georgi Krustev]

Hello Paul,

 
I believe the the PanelBarItem does not have LoadFromContent property. You should use ContentUrl instead.

All the best,
Georgi Krustev
the Telerik team

[Mahesh]

Hi ,

I too have the same problem.If I use the "ContentUrl" then the page is navigating to that page instead of getting the content in the panel content. How can I solve this issue???


Regards
Mahesh

[Paul]

Hi Mahesh

Here is my razor partial view

@model ProCaMM.Core.Models.SiteDetailViewModel
<div class="dataWindow content clear">
    <div id="address">
        @Model.ShortAddress<br />
        <span class="postcode">@Model.Site.Postcode</span><br />
    </div>
    @{ Html.Telerik().PanelBar()
        .Name("pnlDetails")
        .HtmlAttributes(new { style = "width: 100%; border: 0;" })
        .ExpandMode(PanelBarExpandMode.Single)
        .SelectedIndex(@Model.SelectedPanel)
        .Items(panel =>
        {
            panel.Add()
                .Text("Details")
                .HtmlAttributes(new { id = '0'})
                .Content(
                    @<text>
                        <div style="height: 195px;">
                            <div class="display-label clear">
                                @Html.LabelFor(m => m.Site.SiteName)
                            </div>
                            <div class="display-data">
                                @Model.Site.SiteName
                            </div>

                            <div class="display-label clear">
                                @Html.LabelFor(m => m.Site.AddressLine1)
                            </div>
                            <div class="display-data">
                                @Model.Site.AddressLine1
                            </div>

                            <div class="display-label clear">
                                @Html.LabelFor(m => m.Site.AddressLine2)
                            </div>
                            <div class="display-data">
                                @Model.Site.AddressLine2
                            </div>

                            <div class="display-label clear">
                                @Html.LabelFor(m => m.Site.AddressLine3)
                            </div>
                            <div class="display-data">
                                @Model.Site.AddressLine3
                            </div>

                            <div class="display-label clear">
                                @Html.LabelFor(m => m.Site.City)
                            </div>
                            <div class="display-data">
                                @Model.Site.City
                            </div>

                            <div class="display-label clear">
                                @Html.LabelFor(m => m.Site.County)
                            </div>
                            <div class="display-data">
                                @Model.Site.County
                            </div>

                            <div class="display-label clear">
                                @Html.LabelFor(m => m.Site.Postcode)
                            </div>
                            <div class="display-data">
                                @Model.Site.Postcode
                            </div>

                            <div class="display-label clear">
                                @Html.LabelFor(m => m.Site.Telephone)
                            </div>
                            <div class="display-data">
                                @Model.Site.Telephone
                            </div>

                            <div class="display-label clear">
                                @Html.LabelFor(m => m.Site.Fax)
                            </div>
                            <div class="display-data">
                                @Model.Site.Fax
                            </div>

                            <div class="display-label clear">
                                @Html.LabelFor(m => m.Site.SiteContact)
                            </div>
                            <div class="display-data">
                                @Model.Site.SiteContact
                            </div>
                        </div>
                        <div class="clear"></div>
                    </text>);
            panel.Add()
                .Text("Compliance")
                .HtmlAttributes(new { id = '1' })
                .LoadContentFrom("_SiteCompliance", "Management");
            panel.Add()
                .Text("Site Assets")
                .HtmlAttributes(new { id = '2' })
                .LoadContentFrom("_SiteAssets", "Management");
        })
        .Render();
    }
</div>

and here is my controller code for one of the panels in the above code

[Authorize]
[AjaxOnly]
public ActionResult _SiteCompliance(ComplianceViewModel model)
{
    return PartialView("_SiteCompliance", model);
}

Quite straight forward really. Let me know if you need more information.

Paul

[Mahesh]

Hi Paul,

Thank you for your quick reply, In your code you haven't used model binding with list. Can you please let me know any other way for dynamic binding.

[Paul]

Mahesh

Can you tell me what you mean by 'model binding with list'? Are you wanting a drop down list with binding to the model?

Paul

[Mahesh]

Hi Paul,

I mean In your code you have used only single object of type "ProCaMM.Core.Models.SiteDetailViewModel". But in my code I want to use the IEnumerable <Products> which used to bind the panel header and content.
Please check the below code
@model IEnumerable<Product>
   
        @{ Html.Telerik().PanelBar()
        .Name("PanelBar")
        .HtmlAttributes(new { style = "width:100% float: left; margin-bottom: 30px;" })    
        .SelectedIndex(0)
        .BindTo(Model, mappings =>
        {
            mappings.For<string>(binding => binding
                          .ItemDataBound((item1, category) =>
                          {
                              item1.Text =category.Name;
                              item1.ContentUrl = "ProcuctDetails";
                          })
                          );
        })
        .Render();
        }

In this code I am facing 2 problems.
1) when i click on the panel header It it redirecting to that "ProductDetails" page instead of populating in the panel content place.
2) I am not able to pass the Product object as parameter to the "ProductDetails"controller method.
Could you please provide me the solution for this problem.

Thanks in Advance
Mahesh

[Paul]

Hello Mahesh

I've attached a sample project showing you how I would do it. It might not be the best way but it works fine. When you look at the product view you will see I have added another panel bar within the panel bar but of course you can put any content you like in there from a simple unordered list to a grid.

Here are the basics

Models

public class CategoryView
{
    public List<Category> Categories { get; set; }
}

public class Category
{
    public string CategoryName { get; set; }
    public int Id { get; set; }
    public string Url { get; set; }
}

public class ProductsView
{
    public string PanelId { get; set; }
    public int CategoryId { get; set; }
    public List<Product> Products { get; set; }
}

public class Product
{
    public string ProductName { get; set; }
    public int Id { get; set; }
}

Main view

@model BoundPanelbar.Models.CategoryView
@(Html.Telerik().PanelBar()
    .Name("PanelBar")
    .HtmlAttributes(new { style = "width: 300px;" })
    .BindTo(Model.Categories, mappings =>
    {
        mappings.For<BoundPanelbar.Models.Category>(binding => binding
                .ItemDataBound((item, category) =>
                {
                    item.Text = category.CategoryName;
                    item.ContentUrl = category.Url;
                })
        );
    })
)

Partial products view

@model BoundPanelbar.Models.ProductsView
@(Html.Telerik().PanelBar()
    .Name(Model.PanelId)
    .HtmlAttributes(new { style = "width: 300px;" })
    .BindTo(Model.Products, mappings =>
    {
        mappings.For<BoundPanelbar.Models.Product>(binding => binding
                .ItemDataBound((item, product) =>
                {
                    item.Text = product.ProductName;
                })
        );
    })
)

Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new CategoryView();
        model.Categories = new List<Category>();
        model.Categories.Add(new Category() { CategoryName = "Chairs", Id = 1, Url = Url.Action("Products", new { categoryId = 1 }) });
        model.Categories.Add(new Category() { CategoryName = "Desks", Id = 2, Url = Url.Action("Products", new { categoryId = 2 }) });
        model.Categories.Add(new Category() { CategoryName = "Lights", Id = 3, Url = Url.Action("Products", new { categoryId = 3 }) });

        return View(model);
    }

    public PartialViewResult Products(int categoryId)
    {
        var model = new ProductsView();
        model.PanelId = string.Format("ProductCategory-{0}", categoryId);
        model.Products = new List<Product>();
        switch (categoryId)
        {
            case 1:
                model.Products.Add(new Product() { ProductName = "Chair 1", Id = 1 });
                model.Products.Add(new Product() { ProductName = "Chair 2", Id = 2 });
                model.Products.Add(new Product() { ProductName = "Chair 3", Id = 3 });
                break;
            case 2:
                model.Products.Add(new Product() { ProductName = "Desk 1", Id = 10 });
                model.Products.Add(new Product() { ProductName = "Desk 2", Id = 20 });
                model.Products.Add(new Product() { ProductName = "Desk 3", Id = 30 });
                break;
            case 3:
                model.Products.Add(new Product() { ProductName = "Light 1", Id = 11 });
                model.Products.Add(new Product() { ProductName = "Light 2", Id = 21 });
                model.Products.Add(new Product() { ProductName = "Light 3", Id = 31 });
                break;
        }

        return PartialView(model);
    }
}

regards
Paul

[Mahesh]

Hi Paul,
Thank you for quick reply. But I want to bind the model in a way like,
My Product object having properties like id,name,quantity and price. I want to bind the name to panel header using item.text=Product.name and the remaining details in the panel content. For that I want to send the same object to the url which i have given in the contentUrl. Is it possible?

@model IEnumerable<Product>
   
        @{ Html.Telerik().PanelBar()
        .Name("PanelBar")
        .HtmlAttributes(new { style = "width:100% float: left; margin-bottom: 30px;" })    
        .SelectedIndex(0)
        .BindTo(Model, mappings =>
        {
            mappings.For<string>(binding => binding
                          .ItemDataBound((item1, category) =>
                          {
                              item1.Text =category.Name;
                            //I want to send the category object to this  controller method which i provide in the ContentUrl.
                              item1.ContentUrl = "ProcuctDetails";
                          })
                          );
        })
        .Render();
        }

Thanks in Advance
Mahesh

[Paul]

Hi Mahesh

It is possible by expanding on the example I sent you. However, I'm afraid I don't have time to expand on my sample project I sent you. Perhaps someone from Telerik support can jump in here and take it further for you. If you have an active support agreement with Telerik I would submit a request directly if I were you.

I'm sorry I can't help further.

Paul