You can use Bootstrap instead of a Wijmo theme to customize the look of all of your Wijmo widgets. To do so, add references to the Bootstrap CSS stylesheet, Bootstrap JS, our Wijmo Bootstrap CSS stylesheet, and our Wijmo Bootstrap JS file.
Drop down to see all of the references required to use Bootstrap in the correct order
| References |
Copy Code
|
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- Wijmo Bootstrap CSS -->
<link href="http://cdn.wijmo.com/interop/bootstrap-wijmo.css" rel="stylesheet" type="text/css" />
<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20133.19.min.css" rel="stylesheet" type="text/css" />
<!--RequireJs-->
<script type="text/javascript" src="http://requirejs.org/docs/release/2.1.8/comments/require.js"></script>
|
Also, when you use Bootstrap, it is important to note that jQuery and Bootstrap each have their own buttons, and many Wijmo widgets use the jQuery buttons. Add these two lines of code inside the script that contains your document ready function to make the buttons compatible with Bootstrap.
var btn = $.fn.button.noConflict() // reverts $.fn.button to jqueryui btn
$.fn.btn = btn // assigns bootstrap button functionality to $.fn.btn
Here are the two lines of code in the context of the document ready function that you can add to the <head> section of your HTML file below all of the references.
Drop down to see jQuery Script for a grid with button compatibility enabled
| Script |
Copy Code
|
<script type="text/javascript">
var viewModel;
requirejs.config({
baseUrl: "http://cdn.wijmo.com/amd-js/",
paths: {
"jquery": "jquery-1.9.1.min",
"jquery-ui": "jquery-ui-1.10.1.custom.min",
"jquery.ui": "jquery-ui",
"jquery.mousewheel": "jquery.mousewheel.min",
"globalize": "globalize.min",
"knockout": "knockout-2.2.0" //Only if you use Knockout
}
});
require(["bootstrap.wijmo", "knockout.wijmo", "wijmo.wijgrid", "wijmo.data.ajax"], function () {
function ViewModel() {
var geonameView = new wijmo.data.AjaxDataView("http://ws.geonames.org/searchJSON", {
pageSize: 10,
// jQuery AJAX settings
ajax: {
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
name_startsWith: 'ab'
}
},
serverSettings: {
// query string parameters for a request
skip: "startRow",
take: "maxRows",
// mapping to property names of a server response
results: "geonames",
totalItemCount: "totalResultsCount"
}
});
geonameView.refresh();
this.geonames = geonameView;
this.clearPaging = function () {
geonameView.pageSize(0);
};
this.setPaging = function () {
geonameView.pageSize(10);
};
this.prevPage = function () {
geonameView.prevPage();
};
this.nextPage = function () {
geonameView.nextPage();
};
}
$(document).ready(function () {
viewModel = new ViewModel();
ko.applyBindings(viewModel);
var btn = $.fn.button.noConflict() // reverts $.fn.button to jqueryui btn
$.fn.btn = btn // assigns bootstrap button functionality to $.fn.btn
$("#wijgrid").wijgrid({
});
});
});
</script> |
Here is a live widget showing a Grid using a Bootstrap theme.
See Also
