Kendo grid template is not properly showing Bootstrap Toggle, only shows checkbox in column
I am using Bootstrap Toggle plugin, and trying to get it to show up properly in a kendo grid by using a template and all it shows is the checkbox and not how the switch should look, I know that the plugin is working properly because if I use a plain old table it appears.
Here is how it looks using a plain old table
See the toggle switch in the Options column? thats what I am trying to get into the kendo grid options column but as you can see below is how it looks using the kendo grid
$(document).ready(function() {
$('#grid').kendoGrid({
height: 500,
dataSource: colData,
columns: [{
field: "field",
title: "Columns"
},
{
field: "Options",
title: "Options",
template: hereItIs
}
]
});
});
function hereItIs() {
var input = '<input type="checkbox" checked data-toggle="toggle" />';
return input;
}
var colData = [{
"field": "Apple"
},
{
"field": "Orange"
},
{
"field": "Pear"
},
{
"field": "Plum"
},
{
"field": "Grape"
},
{
"field": "Banana"
},
{
"field": "Watermelon"
}
];<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<div id="grid"></div>Any idea's on why the toggle switch is not showing up properly in the kendo grid?
jquery kendo-ui kendo-grid
asked Nov 13 '18 at 18:57
ChrisChris
1,08852159
add a comment |
I am using Bootstrap Toggle plugin, and trying to get it to show up properly in a kendo grid by using a template and all it shows is the checkbox and not how the switch should look, I know that the plugin is working properly because if I use a plain old table it appears.
Here is how it looks using a plain old table
See the toggle switch in the Options column? thats what I am trying to get into the kendo grid options column but as you can see below is how it looks using the kendo grid
$(document).ready(function() {
$('#grid').kendoGrid({
height: 500,
dataSource: colData,
columns: [{
field: "field",
title: "Columns"
},
{
field: "Options",
title: "Options",
template: hereItIs
}
]
});
});
function hereItIs() {
var input = '<input type="checkbox" checked data-toggle="toggle" />';
return input;
}
var colData = [{
"field": "Apple"
},
{
"field": "Orange"
},
{
"field": "Pear"
},
{
"field": "Plum"
},
{
"field": "Grape"
},
{
"field": "Banana"
},
{
"field": "Watermelon"
}
];<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<div id="grid"></div>Any idea's on why the toggle switch is not showing up properly in the kendo grid?
jquery kendo-ui kendo-grid
asked Nov 13 '18 at 18:57
ChrisChris
1,08852159
add a comment |
I am using Bootstrap Toggle plugin, and trying to get it to show up properly in a kendo grid by using a template and all it shows is the checkbox and not how the switch should look, I know that the plugin is working properly because if I use a plain old table it appears.
Here is how it looks using a plain old table
See the toggle switch in the Options column? thats what I am trying to get into the kendo grid options column but as you can see below is how it looks using the kendo grid
$(document).ready(function() {
$('#grid').kendoGrid({
height: 500,
dataSource: colData,
columns: [{
field: "field",
title: "Columns"
},
{
field: "Options",
title: "Options",
template: hereItIs
}
]
});
});
function hereItIs() {
var input = '<input type="checkbox" checked data-toggle="toggle" />';
return input;
}
var colData = [{
"field": "Apple"
},
{
"field": "Orange"
},
{
"field": "Pear"
},
{
"field": "Plum"
},
{
"field": "Grape"
},
{
"field": "Banana"
},
{
"field": "Watermelon"
}
];<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<div id="grid"></div>Any idea's on why the toggle switch is not showing up properly in the kendo grid?
jquery kendo-ui kendo-grid
asked Nov 13 '18 at 18:57
ChrisChris
1,08852159
I am using Bootstrap Toggle plugin, and trying to get it to show up properly in a kendo grid by using a template and all it shows is the checkbox and not how the switch should look, I know that the plugin is working properly because if I use a plain old table it appears.
Here is how it looks using a plain old table
See the toggle switch in the Options column? thats what I am trying to get into the kendo grid options column but as you can see below is how it looks using the kendo grid
$(document).ready(function() {
$('#grid').kendoGrid({
height: 500,
dataSource: colData,
columns: [{
field: "field",
title: "Columns"
},
{
field: "Options",
title: "Options",
template: hereItIs
}
]
});
});
function hereItIs() {
var input = '<input type="checkbox" checked data-toggle="toggle" />';
return input;
}
var colData = [{
"field": "Apple"
},
{
"field": "Orange"
},
{
"field": "Pear"
},
{
"field": "Plum"
},
{
"field": "Grape"
},
{
"field": "Banana"
},
{
"field": "Watermelon"
}
];<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<div id="grid"></div>Any idea's on why the toggle switch is not showing up properly in the kendo grid?
$(document).ready(function() {
$('#grid').kendoGrid({
height: 500,
dataSource: colData,
columns: [{
field: "field",
title: "Columns"
},
{
field: "Options",
title: "Options",
template: hereItIs
}
]
});
});
function hereItIs() {
var input = '<input type="checkbox" checked data-toggle="toggle" />';
return input;
}
var colData = [{
"field": "Apple"
},
{
"field": "Orange"
},
{
"field": "Pear"
},
{
"field": "Plum"
},
{
"field": "Grape"
},
{
"field": "Banana"
},
{
"field": "Watermelon"
}
];<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<div id="grid"></div>$(document).ready(function() {
$('#grid').kendoGrid({
height: 500,
dataSource: colData,
columns: [{
field: "field",
title: "Columns"
},
{
field: "Options",
title: "Options",
template: hereItIs
}
]
});
});
function hereItIs() {
var input = '<input type="checkbox" checked data-toggle="toggle" />';
return input;
}
var colData = [{
"field": "Apple"
},
{
"field": "Orange"
},
{
"field": "Pear"
},
{
"field": "Plum"
},
{
"field": "Grape"
},
{
"field": "Banana"
},
{
"field": "Watermelon"
}
];<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<div id="grid"></div>jquery kendo-ui kendo-grid
jquery kendo-ui kendo-grid
asked Nov 13 '18 at 18:57
ChrisChris
1,08852159
asked Nov 13 '18 at 18:57
ChrisChris
1,08852159
asked Nov 13 '18 at 18:57
ChrisChris
1,08852159
asked Nov 13 '18 at 18:57
ChrisChris
1,08852159
asked Nov 13 '18 at 18:57
ChrisChris
1,08852159
1,08852159
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I had to add an initializer to get it to work:
$(function() {
$('.bootToggle').bootstrapToggle();
})
And I had to add a class to know where it should do the initializing..
<input type="checkbox" checked data-toggle="toggle" class="bootToggle" />
Made a pen to view the result (my first pen so I hope it works)
(in the pen I changed to templateId instead of template, but that's only because I normally only do mvc telerik-ui and are used to templateId)...
answered Nov 14 '18 at 9:34
Jörgen MoenJörgen Moen
937
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53287802%2fkendo-grid-template-is-not-properly-showing-bootstrap-toggle-only-shows-checkbo%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I had to add an initializer to get it to work:
$(function() {
$('.bootToggle').bootstrapToggle();
})
And I had to add a class to know where it should do the initializing..
<input type="checkbox" checked data-toggle="toggle" class="bootToggle" />
Made a pen to view the result (my first pen so I hope it works)
(in the pen I changed to templateId instead of template, but that's only because I normally only do mvc telerik-ui and are used to templateId)...
answered Nov 14 '18 at 9:34
Jörgen MoenJörgen Moen
937
add a comment |
I had to add an initializer to get it to work:
$(function() {
$('.bootToggle').bootstrapToggle();
})
And I had to add a class to know where it should do the initializing..
<input type="checkbox" checked data-toggle="toggle" class="bootToggle" />
Made a pen to view the result (my first pen so I hope it works)
(in the pen I changed to templateId instead of template, but that's only because I normally only do mvc telerik-ui and are used to templateId)...
answered Nov 14 '18 at 9:34
Jörgen MoenJörgen Moen
937
add a comment |
I had to add an initializer to get it to work:
$(function() {
$('.bootToggle').bootstrapToggle();
})
And I had to add a class to know where it should do the initializing..
<input type="checkbox" checked data-toggle="toggle" class="bootToggle" />
Made a pen to view the result (my first pen so I hope it works)
(in the pen I changed to templateId instead of template, but that's only because I normally only do mvc telerik-ui and are used to templateId)...
answered Nov 14 '18 at 9:34
Jörgen MoenJörgen Moen
937
I had to add an initializer to get it to work:
$(function() {
$('.bootToggle').bootstrapToggle();
})
And I had to add a class to know where it should do the initializing..
<input type="checkbox" checked data-toggle="toggle" class="bootToggle" />
Made a pen to view the result (my first pen so I hope it works)
(in the pen I changed to templateId instead of template, but that's only because I normally only do mvc telerik-ui and are used to templateId)...
answered Nov 14 '18 at 9:34
Jörgen MoenJörgen Moen
937
edited Nov 14 '18 at 9:45
answered Nov 14 '18 at 9:34
Jörgen MoenJörgen Moen
937
answered Nov 14 '18 at 9:34
Jörgen MoenJörgen Moen
937
answered Nov 14 '18 at 9:34
Jörgen MoenJörgen Moen
937
937
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53287802%2fkendo-grid-template-is-not-properly-showing-bootstrap-toggle-only-shows-checkbo%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
