Prevent panelbar from creating duplicate items

8 posts, 1 answers
  1. Sumith Jayasuriya
    Sumith Jayasuriya avatar
    25 posts
    Member since:
    Jan 2010

    Posted 11 Dec 2012 Link to this post

    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?
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 13 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Sumith Jayasuriya
    Sumith Jayasuriya avatar
    25 posts
    Member since:
    Jan 2010

    Posted 13 Dec 2012 Link to this post

    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


  5. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 17 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Sumith Jayasuriya
    Sumith Jayasuriya avatar
    25 posts
    Member since:
    Jan 2010

    Posted 18 Dec 2012 Link to this post

    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.
  7. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 20 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Alejandro
    Alejandro avatar
    1 posts
    Member since:
    Apr 2014

    Posted 30 Apr 2014 Link to this post

    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.
  9. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 02 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready