CheckBox in Kendo Web Grid

2 posts, 0 answers
  1. Troy Clemons
    Troy Clemons avatar
    69 posts
    Member since:
    Apr 2010

    Posted 30 May 2014 Link to this post

    The problem I am having is, I have 12 rows in my Grid and only 1 checkbox is appearing. right in the middle.
    Here is my Code.

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            html {
                font-size: 9px;
                font-family: 'Segoe UI';
            }
        </style>
        <title>Grid With CheckBox</title>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.mobile.min.css" rel="stylesheet" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
    </head>
    <body>
        <div data-role="view" id="tabstrip-ticker" data-title="Grid With Checkbox" data-layout="mobile-tabstrip">
            <ul data-role="listview" data-style="inset" data-type="group">
                <li>
                    Test Grid With CheckBox
                    <ul>
                        <li>
                            <div id="revgrid" style="width: 100%; margin-left: auto; margin-right: auto; font-size: 9px; float: left;"></div>
                        </li>
                    </ul>
                </li>
            </ul>
    </div>
        <div data-role="layout" data-id="mobile-tabstrip">
            <header data-role="header">
                <div data-role="navbar">
                    <!--<a class="nav-button" data-align="left" data-role="backbutton">Back</a>-->
                    <span data-role="view-title"></span>
                    <a data-align="right" data-role="button" class="nav-button" href="#/">Home</a>
                </div>
            </header>
     
            <p>TabStrip</p>
     
            <div data-role="footer">
                <div data-role="tabstrip">
                    <a href="#tabstrip-ticker" data-icon="info">Home</a>
                </div>
            </div>
        </div>
        <style scoped>
            #tabstrip-profile h2 {
                display: inline-block;
                font-size: 1.1em;
                margin: 1.5em 0 0 .7em;
            }
     
                #tabstrip-profile h2 span {
                    display: block;
                    clear: both;
                    font-size: 1.8em;
                    margin: .1em 0 0 0;
                }
     
            #tabstrip-profile img {
                width: 5em;
                height: 5em;
                float: left;
                margin: 1em;
                border: 1px solid rgba(0,0,0,.2);
                -webkit-border-radius: 4em;
                border-radius: 4em;
            }
     
            .sales-down,
            .sales-hold,
            .sales-up,
            .value {
                float: right;
            }
     
            .sales-up {
                color: green;
            }
     
            .sales-down {
                color: red;
            }
     
            .sales-hold {
                color: blue;
            }
     
            .value {
                color: #bbb;
            }
        </style>
        <script>
             
            $(document).ready(function () {
                var RevSource = [
                    { "BookYear": "JPLN/15", "RevHandled": "$1500.00", "RepCode": "TJN" },
                    { "BookYear": "JPLN/15", "RevHandled": "$1600.00", "RepCode": "TJN" },
                    { "BookYear": "JPLN/15", "RevHandled": "$1700.00", "RepCode": "TJN" },
                    { "BookYear": "JPLN/15", "RevHandled": "$1800.00", "RepCode": "TJN" },
                    { "BookYear": "JPLN/15", "RevHandled": "$1500.00", "RepCode": "TJN" },
                    { "BookYear": "JPLN/15", "RevHandled": "$1600.00", "RepCode": "TJN" },
                    { "BookYear": "JPLN/15", "RevHandled": "$1700.00", "RepCode": "TJN" },
                    { "BookYear": "JPLN/15", "RevHandled": "$1800.00", "RepCode": "TJN" },
                    { "BookYear": "JPLN/15", "RevHandled": "$1500.00", "RepCode": "TJN" },
                    { "BookYear": "JPLN/15", "RevHandled": "$1600.00", "RepCode": "TJN" },
                    { "BookYear": "JPLN/15", "RevHandled": "$1700.00", "RepCode": "TJN" },
                    { "BookYear": "JPLN/15", "RevHandled": "$1800.00", "RepCode": "TJN" }
                ];
     
                $("#revgrid").kendoGrid({
                    dataSource: RevSource,
                    selectable: "multiple row",
                    columns: [
                        { field: "BookYear", title: "Book/Year" },
                        { field: "RevHandled", title: "Rev Handled", format: "{0:c}" },
                        { field: "RepCode", title: "Rep Code" },
                        {
                            field: "Select",
                            title: "Select",
                            headerTemplate: '<input type="checkbox" id="check-all" /><label for="check-all">Select</label>',
                            template: '<input type="checkbox" id="selectbox" />'
                        }
                    ]
                });
     
                 
            });
        </script>
        <script>
        var app = new kendo.mobile.Application(document.body, {
            transition: 'slide'
        });
        localStorage.clear();
        function showLoading() {
            app.showLoading();
            setTimeout(function () {
                app.changeLoadingMessage("Please wait...");
            }, 1000);
        }
        $(function () {
            app.skin("flat");
        });
        </script>
     
    </body>
    </html>


    Thank you

    Troy
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 02 Jun 2014 Link to this post

    Hello Troy,

    The problem comes from the fact that your Kendo UI Grid with checkboxes is placed inside a Kendo UI Mobile ListView, and by default the checkboxes nested inside a ListView are automatically styled according to the mobile design guidelines, as shown in this demo:

    http://demos.telerik.com/kendo-ui/mobile-forms/checkboxes

    If you take the grid out of the ListView, then all the checkboxes are shown correctly:

    http://jsbin.com/doved/1/edit

    Regards,
    Kiril Nikolov
    Telerik
     
    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
Back to Top