Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

CheckBox in Kendo Web Grid

1 Answer 201 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Troy Clemons
Top achievements
Rank 1
Troy Clemons asked on 30 May 2014, 12:11 PM
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

1 Answer, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 02 Jun 2014, 11:19 AM
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!
 
Tags
Grid
Asked by
Troy Clemons
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or