This is a migrated thread and some comments may be shown as answers.

Checkbox Styling with DataSource

10 Answers 138 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Rider333
Top achievements
Rank 1
Rider333 asked on 24 Oct 2016, 09:01 PM

I have a treeview set up as below ("treeview"), and the rendered checkboxes are not styled according to the theme (bootstrap).  If I set up another treeview with local data ("treeview1"), they render as themed.  Any hints as to how i can get the checkboxes to adhere to the theme when using a datasource?

 

NOT THEMED:

@(Html.Kendo().TreeView()
        .Name("treeview")
        .Checkboxes(checkboxes => checkboxes.Name("checkedCategories")
        .CheckChildren(true))
        .Events(events => events.Check("onCheck"))
        .DataTextField("description")
        .DataSource(dataSource => dataSource
            .Model(m => m.HasChildren("HasChildren").Children("Children"))
            .Read(read => read.Action("GetFilters", "ProductList")))
          )

THEMED:

@(Html.Kendo().TreeView()
        .Name("treeview1")
        .Checkboxes(checkboxes => checkboxes.Name("checkedCategories"))
        .Items(treeview =>
       {
           treeview.Add().Text("Asset Class").Id("1-1")
               .Expanded(true)
               .Items(category =>
               {
                   category.Add().Text("My first thing").Id("2-1");
                   category.Add().Text("My Second Thing").Id("2-2");
               });
       }))

10 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 26 Oct 2016, 08:10 AM
Hi,

We have created a sample project, but we are not able to reproduce the issue. Check-boxes in the both cases look in the same way. We are sending you this video as a part of the testing for your reference. Could you please watch the video and tell us if there is something important missing in our sample?

Regards,
Magdalena
Telerik by Progress
Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
0
Rider333
Top achievements
Rank 1
answered on 26 Oct 2016, 12:56 PM

Hi, thanks for the reply.  I have attached a picture of what I'm seeing.  The first group is bound to the remote data, and the second is bound to the local data.  Notice that the local data checkboxes seem to be themed and look different...this is what I want, but I'm not sure how this is being done to these, but not the remote ones.  Let me know what you think.

Here is my bundling, followed by the rendering from _Layout.cshtml (this is an MVC5 app):

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));

            bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
               "~/Scripts/kendo/kendo.all.min.js",
               "~/Scripts/kendo/kendo.aspnetmvc.min.js"));

            bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
                "~/Content/kendo/kendo.common-bootstrap.min.css",
                "~/Content/kendo.bootstrap-theme.min.css",
                "~/Content/kendo/kendo.bootstrap.min.css"));

            bundles.IgnoreList.Clear();
        }

 

----------------------------

 

Layout:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/kendo/css")
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/kendo")

 

etc...

0
Magdalena
Telerik team
answered on 28 Oct 2016, 08:53 AM
Hi,

We have succeeded to reproduce the issue. We have forward the issue for further investigation to the responsible developer team and we will contact you as soon as we have an answer.

Regards,
Magdalena
Telerik by Progress
Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
0
Rider333
Top achievements
Rank 1
answered on 28 Oct 2016, 12:51 PM
Perfect, thanks!
0
Magdalena
Telerik team
answered on 01 Nov 2016, 10:12 AM
Hi,

Actually this is an issue, and we have logged it for fixing. We have added you Telerik points for reporting a bug. We would like to appologize for any inconvenience caused.

Regards,
Magdalena
Telerik by Progress
Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
0
Rider333
Top achievements
Rank 1
answered on 01 Nov 2016, 12:44 PM
OK, thanks.
0
Cédric
Top achievements
Rank 1
answered on 14 Dec 2016, 02:05 PM

Hello,

We get the same problem with checkbox styling and datasource, is there a workaround ?

In which release this bug will be fix ?

Thanks

0
Ivan Zhekov
Telerik team
answered on 16 Dec 2016, 12:03 PM
The public GitHub issue for this bug is https://github.com/telerik/kendo-ui-core/issues/2379.

As of now there is no workaround nor a quick solution.

Regards,
Ivan Zhekov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Neil
Top achievements
Rank 1
answered on 14 Jul 2017, 09:13 AM

I see in the GitHub issue that a fix has been implemented. Do you have an update as to when this might be released?

 

Thanks

0
Magdalena
Telerik team
answered on 14 Jul 2017, 02:19 PM
Hi Neil,

Thank you for pointing that. Actually the issue was closed because it is not reproduced in the Kendo jQuery widgets. We have reopened it and added more detailed information about reproducing the issue in Kendo MVC wrapers.

Regards,
Magdalena
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
TreeView
Asked by
Rider333
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Rider333
Top achievements
Rank 1
Cédric
Top achievements
Rank 1
Ivan Zhekov
Telerik team
Neil
Top achievements
Rank 1
Share this question
or