Prevent panelbar from creating duplicate items

[Sumith Jayasuriya]

Quite new to MVC and kendo and was wondering if there was a way to prevent panelbar from creating duplicate items and whats the best method to achieve this.

Here is my panelbar markup:

@(Html.Kendo()

                  .PanelBar()

                  .Name("panelbar")

                  .HtmlAttributes(new { style = "width:200px" })

                  .ExpandAll(true)

                  .BindTo(Model, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<PanelBarItem> mappings) =>

                  {

                      mappings.For<QueryModel>(binding =>

                      {

                          binding.ItemDataBound((panelitem, modelitem) =>

                              {

                                  panelitem.Text = modelitem.category;

                              });

 

                      });

                  })

                   

             )

Here is my class markup for the model:

public class QueryModel

    {

        public string category { get; set; }

        public string controlID { get; set; }

        public string controlType { get; set; }

        public System.Nullable<int> multiplier { get; set; }

        public string caption { get; set; }

        public string dropdownSQL { get; set; }

        public string columnSQL { get; set; }

        public string sortorder { get; set; }

        public string tooltip { get; set; }

    }

And here is my controller action:

public ActionResult Query()

        {

            QueryModel querydata = new QueryModel();

 

            var results = from s in dbContext.T223_Searches

                          join sd in dbContext.T224_SearchDetails on s.KeySearch equals sd.KeySearch

                          join sc in dbContext.T225_SearchCategories on sd.KeyCategory equals sc.KeyCategory

                          where sd.KeySearch == 3

                          orderby sd.SortOrder

                          select new QueryModel

                          {

                              category = sc.Description,

                              controlID = sd.ControlID,

                              controlType = sd.ControlType,

                              multiplier = sd.Multiplier,

                              caption = sd.Caption,

                              dropdownSQL = sd.DDLSQL,

                              columnSQL = sd.SQLColumn,

                              tooltip = sd.ToolTip

                          };

 

            return View("Query", results.ToList());

        }

Is there anyway in the controller action or actual panelbar markup to select DISTINCT category?  My model returns multiple rows which could have different or the same category.  Or is there a way I can check if the item with certain text exists already and not create it?

Also am I going about this the wrong way and do I need to have a separate model just for categories?

[Petur Subev]

Hello Sumith,

PanelBar item is created for each of the items in the collection passed to the BindTo method (the Model in your case). You should remove the duplicate entries before passing the collection to the BindTo method. 
You can use the District Extensions method LINQ provides.
e.g.

return View("Query", results.Distict(yourComparator).ToList());

where yourComparator is implementing the IEqualityComparer<YourModel> interface.

Here is similar question on the stackoverflow site:

http://stackoverflow.com/questions/8560884/how-to-implement-iequalitycomparer-to-return-distinct-values

Kind Regards,
Petur Subev
the Telerik team

[Sumith Jayasuriya]

Forgive me if I misunderstood, but in the answer you provided the model would remove rows based on my Distinct compareer correct?  I guess maybe I wasn't too clear.  The data in my model would have the columns I listed below in my controller.  I'm trying to use the same model in my view to build a panelbar which needs lists DISTINCT categories from this model.  I was wondering if there was a way to get Distinct category in my view to use to make the panelbar, possibly in the BindTo method?

For example my model data would look like:

Geography State ...
Geography City ...
Demography Income...
Demography Household...

I would need to somehow get the Distinct category (geography, demography) to use in my view to build my panelbar.

If you answer below provides the solution could you please write a small example as I am new to MVC and kendo and I may have misunderstood.  Also maybe I am going about this the incorrect way and so I would like to know the best practice to achieve something like this.

Thank you for your help

[Petur Subev]

Hello Sumith,

If I understand you correctly you want to bind the PanelBar to the district elements in the Model collection.

As I replied in my previous post you can use the Distict Method. Check the attached project which uses all the items to populate the Grid and only the Distict records for the PanelBar.

Kind regards,
Petur Subev
the Telerik team

[Sumith Jayasuriya]

Thank you for your help Petur, i got the required functionality working.  Now I have a different question.  I want to create a div element for each of these panel items, and when I had the panelbar hardcoded I just used to .Content property with my html elements in there, but now I get various errors when trying to set the .Content property for each panel item.

Here is my markup below:

@(Html.Kendo()

                  .PanelBar()

                  .Name("panelbar")

                  .HtmlAttributes(new { style = "width:200px" })

                  .ExpandAll(true)

                  .BindTo(Model.Distinct(new CategoryComparator()), (panelitem, modelitem) =>

                  {

                      panelitem.Text = modelitem.category;

                      panelitem.Content = () =>

                          {

                              @<div id="modelitem.category"></div>

                          };

                  })

             )

It seems like I am getting a syntax error most of the time, but my VS is not showing any errors, and I only get these issues when debugging.  I've tried variations in the syntax but haven't been able to get it to work.

Any help is much appreciated.  Thanks again.

Edit:  Also have a seperate issue with kendo dropdownlist and comboboxes where the actual drop down list that slides down is scrolling with the screen.  Please let me know if I should start a different topic for this.

[Petur Subev]

Hello Sumith,

You should use the following approach to render the Content of the PanelBarItem when binding in Razor View:

@{ Html.Kendo().PanelBar()
           .Name("panelbar")
           .BindTo(Model, (PanelBarItem item, Kendo.Mvc.Examples.Models.Category cat) =>
             {
                 item.Text = cat.Description;
                 item.Content = () => Html.ViewContext.Writer.Write(cat.Description);
             })
           .Render();
           }

Regards,
Petur Subev
the Telerik team

[Alejandro]

Ok Petur,

But... if I need to render a Partial View? 

Basically I should write the panelItems dynamically using the BindTo method and their content is a partial view with its model. 

How do I do that?

I'm using...

@(Html.Kendo().PanelBar()
                                          .Name("panelbar")
                                            .BindTo((List<FicheroMedico.Models.LugarVisita>)Model.LugaresVisitas2, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<PanelBarItem> mappings) =>
                                                {
                                                    mappings.For<FicheroMedico.Models.LugarVisita>(binding => binding.ItemDataBound((visita, domi) =>
                                                        {
                                                            visita.Text = domi.Domicilio;
                                                            visita.Content = () => Html.Partial("Address", domi.Address); //Address it's a partial view
                                                        })
                                                        );
                                         })
)

Happens is that instead of the partial view, the main view is written within each panelbaritem

Thanks!

Alejandro.

[Petur Subev]

Hello Sumith,


Again you should use the same technique. 

I tried the following (which is using dynamic in contrast to your case, so you do not have to actually cast the dynamic expreesion) and it is working fine.

@{Html.Kendo().PanelBar()
        .Name("fff")
        .BindTo((new[] { new { partial = "somePartial", text = "foo" }, new { partial = "someOther", text = "bar" } }), (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<PanelBarItem> mappings) =>
            {
                mappings.For<dynamic>(binding => binding.ItemDataBound((pbitem, dyn) =>
                    {
                        pbitem.Text = dyn.text;
                        pbitem.Content = () => { Html.Partial((string)dyn.partial); }; //Address it's a partial view
                    })
                    );
            }).Render();
 }

Kind Regards,
Petur Subev
Telerik