Print a Kendo UI grid with pagination

So I wanted to print a page that has a Kendo ui grid with pagination activated, but I didn’t want to remove the pagination on the page.

I found those two posts that helped me

http://www.telerik.com/forums/print-all-pages-in-a-grid

http://stackoverflow.com/questions/18325025/how-to-detect-window-print-finish

And I ended with this


(function () {

var pageSize = 0;
 var beforePrint = function () {

 // remove paging on grid
 if ($(".k-grid").length > 0) {
 var dataSource = $(".k-grid").data("kendoGrid").dataSource;
 pageSize = dataSource.options.pageSize; // save the current page size
if(pageSize !== undefined){
 dataSource.pageSize(dataSource.total()); // set the size to the number of items
}
 }

};

var afterPrint = function () {

// set paging back
 if ($(".k-grid").length > 0 && pageSize > 0) {
 var dataSource = $(".k-grid").data("kendoGrid").dataSource;
 dataSource.pageSize(pageSize);
 }
 };

// chrome
 if (window.matchMedia) {
 var mediaQueryList = window.matchMedia('print');
 mediaQueryList.addListener(function (mql) {
 if (mql.matches) {
 beforePrint();
 } else {
 afterPrint();
 }
 });
 }

// FF & IE
 //https://developer.mozilla.org/en-US/docs/Web/API/window.onbeforeprint
 window.onbeforeprint = beforePrint;
 window.onafterprint = afterPrint;

}());

Hope it helps someone

Incoming search terms:

  • kendo ui pagination
  • kendo ui print
  • kendo ui chart print
  • print kendo grid
  • kendogrid number page total
  • print_pagination
  • live disable pagination kendo grid
  • kendo ui page size 0
  • Kendo Grid Pagination
  • remove kendo grid

Optgroup with the Kendo UI Combobox

Kendo UI is a great framework to use, sometimes what you are looking for is not out of the box, but it’s not really difficult to make it work as you want to.

Kendo provides a combobox and a dropdown control, the following article uses the combobox for the example but applies for both controls.

What I want to achieve is to build a combobox with an optgroup.

Here is the raw html sample

<select>
 <optgroup label="Group 1">
 <option value="Value0">Option N°0</option>
 <option value="Value1">Option N°1</option>
 <!-- ... -->
 </optgroup>
 <optgroup label="Group 2">
 <option value="Value0">Option N°0</option>
 <option value="Value1">Option N°1</option>
 <!-- ... -->
 </optgroup>
 <optgroup label="Group 3">
 <option value="Value0">Option N°0</option>
 <option value="Value1">Option N°1</option>
 <!-- ... -->
 </optgroup>
 </select>

Using kendo, you can define a combox using the MVC wrappers this way

@(Html.Kendo().ComboBox()
 .Name("democombo").HtmlAttributes(new { style = "width:300px;" })
 .Filter("contains")
 .Placeholder("Select an item ...")
 .Items(x =>
 {
 // add some values
 x.Add().Text("Group 1");
 for (int i = 0; i < 10; i++)
 {
 x.Add().Value("value" + i).Text("Option N°" + i);
 }
 x.Add().Text("Group 2");
 for (int i = 0; i < 10; i++)
 {
 x.Add().Value("value" + i).Text("Option N°" + i);
 }
 //....

}))

it will look like this :

kendo combobox

There is a nice style and a search functionality, but since there is no way to specify that we want an optgroup, you cannot spot the difference between a simple item and a “group” item

Fortunately, it’s not that hard to make it work like if this option was existing.

Kendo ships with a template engine that will help

if we change a bit our code to make a clever user of the template :


@(Html.Kendo().ComboBox()
 .Name("democombo").HtmlAttributes(new { style = "width:300px;" })
 .Filter("contains")
 .Placeholder("Select an item ...")
 .Items(x =>
 {
x.Add().Text("Group 1").Value("optgroup");// notice that we give a value
 // ...
}).TemplateId("scriptTemplate"))

the template

// we use the value
<script id="scriptTemplate" type="text/x-kendo-template">
 # if ( Value=="optgroup") { #
 <div class="optgroup">#=Text#</div>
 # } else { #
 <div class="option">#=Text#</div> # } #
</script>

and the css


.k-list .k-item .optgroup {
 background: #fff;
 color: #000;
 font-weight: bold;
 }
 .k-list .k-item .option {
 padding-left: 15px;
 }

we are getting this result

kendo ui template

It’s nice but there is still two problems: the style on hover change, and the item is clickable

we can make use of the kendo combobox events to resolve that :


@(Html.Kendo().ComboBox()
 .Name("democombo").HtmlAttributes(new { style = "width:300px;" })
 .Filter("contains")
 .Placeholder("Select an item ...")
 .Items(x =>
 {
x.Add().Text("Group 1").Value("optgroup");
// ...
}).TemplateId("scriptTemplate").Events(events =>
 {
 events.DataBound(@<text>function(e){
// disable the click, and add a special class on the parent (which is the real item)
       $(".optgroup").parent().click(false).addClass("optgrouplistitem");
 }</text>);>
 }))

Some CSS to override the normal kendo “hover” style


.k-popup .k-list .k-item.optgrouplistitem.k-state-hover{
 border: none;
 color: #000;
 border-radius: 0;
 background: none;
 padding: 1px 5px 1px 5px;
 box-shadow: none;
 }

and we end with this

kendo optgroup

Complete code

<style type="text/css">
 .k-list .k-item .optgroup {
 background: #fff;
 color: #000;
 font-weight: bold;
 }

 .k-popup .k-list .k-item.optgrouplistitem.k-state-hover {
 border: none;
 color: #000;
 border-radius: 0;
 background: none;
 padding: 1px 5px 1px 5px;
 box-shadow: none;
 }

.k-list .k-item .option {
 padding-left: 15px;
 }
</style>

 

<script id="scriptTemplate" type="text/x-kendo-template">
 # if ( Value=="optgroup") { #
 <div class="optgroup">#=Text#</div>
 # } else { #
 <div class="option">#=Text#</div> # } #
</script>

 

@(Html.Kendo().ComboBox()
 .Name("democombo").HtmlAttributes(new { style = "width:300px;" })
 .Filter("contains")
 .Placeholder("Select an item ...")
 .Items(x =>
 {
 x.Add().Text("Group 1").Value("optgroup");
 for (int i = 0; i < 10; i++)
 {
 x.Add().Value("value" + i).Text("Option N°" + i);
 }
 x.Add().Text("Group 2").Value("optgroup");
 for (int i = 0; i < 10; i++)
 {
 x.Add().Value("value" + i).Text("Option N°" + i);
 }
 x.Add().Text("Group 3").Value("optgroup");
 for (int i = 0; i < 10; i++)
 {
 x.Add().Value("value" + i).Text("Option N°" + i);
 }

}).TemplateId("scriptTemplate").Events(events =>
 {

events.DataBound(@<text>function(e){
 $(".optgroup").parent().click(false).addClass("optgrouplistitem");
 }</text>);
 }))

Incoming search terms:

  • kendo combobox
  • kendoComboBox template tree
  • kendoDropDownList and optgroup
  • kendo select group items
  • kendocombobox
  • optgroup filter
  • kendo ui model for combobox
  • Kendo() DropDownList TemplateId
  • kendo optgroup
  • filter the kendo drop down list with 2 or 3 drop donlist

Quick tip : Master-Child checkboxes with jQuery

Here is a code that is really often asked.

I was asked how to code a master-child checkboxes using jQuery.

The requirements were :

  1. We want a “master” checkbox that the “child” checkboxes will mimic.
  2. We want this checkbox to be cheched if all child checkboxes are checked.
  3. We want this checkbox to be unchecked if all child checkboxes are not checked anymore.

Here is what I came with (check the demo here):

HTML markup :


<label>
 <input type="checkbox" id="checkall" />
 ALL</label>
 <hr />
 <div id="checkboxes">

<label>
 <input type="checkbox" />
 test 1</label><br />
 <label>
 <input type="checkbox" />
 test 2</label><br />
 <label>
 <input type="checkbox" />
 test 3</label><br />
 <label>
 </div>

jQuery part for requirement 1 :


$("#checkall").on("change", function () {
 $('#checkboxes input[type="checkbox"]').prop("checked", $(this).is(":checked"));
 });

Set all the checkboxes inside elements with class “checkboxes” to the value of the input with id “checkall”

jQuery part for requirements 2 and 3 :


$('#checkboxes [type="checkbox"]').on("change", function () {
 $("#checkall").prop("checked", $('#checkboxes input[type="checkbox"]:checked').length === $('#checkboxes input[type="checkbox"]').length);
 });

Set the element with id “checkall” to the answer to the question “is the number of checkboxes equal to the number of checked checkboxes”

You can check the demo here

I want a simpler way to assign icons to my jquery ui buttons

JQuery UI has a nice widget for the buttons, problem is, imoh, that when I want to assign an icon for a button I have to do it for each button separatly.

Here is the sample from the jquery ui website :

<!doctype html>

<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>jQuery UI Button - Icons</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
 <link rel="stylesheet" href="/resources/demos/style.css" />
 <script>
 $(function() {
 $( "button:first" ).button({
 icons: {
 primary: "ui-icon-locked"
 },
 text: false
 }).next().button({
 icons: {
 primary: "ui-icon-locked"
 }
 }).next().button({
 icons: {
 primary: "ui-icon-gear",
 secondary: "ui-icon-triangle-1-s"
 }
 }).next().button({
 icons: {
 primary: "ui-icon-gear",
 secondary: "ui-icon-triangle-1-s"
 },
 text: false
 });
 });
 </script>
</head>
<body>

<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>

</body>
</html>

jquerysample

It works but I think it’s not the easiest way, I would prefer to configure the html tag with a property to say what is the icon I want.

So my solution is to use the data attribute of the element on which we want the button widget to be applied


<a href="#" class="button" data-icon="ui-icon-pencil" id="myid">my text button</a>

and in the document ready of the page

 $(document).ready(function () {

 $(".button").button({
 create: function (event, ui) {
 var icon = $(this).data("icon");
 if (HasValue(icon)) {
 $(this).button("option", "icons", { primary: icon });
 }
 }
 });
});

Basicly, when a button is created, I check if I have a data-icon property setted, and if so I use it to set the primary icon property of the button.

textbutton

I’m working with ASP.NET, so if I use WebForms I put that little piece of code in my master page, and if I’m workgin with MVC, I put the code in the _layout.cshtml file.
This way I don’t have to worry about setting the icon for each button.

But where are the icons defined ?

The example I used sooner (ui-icon-pencil) is a class of the icon set of a jquery mobile theme (you can see what’s available on the themeroller page).

If I want to define a custom icon, I do it this way

in the CSS:

.ui-icon.ui-icon-xlsx
{
 background: transparent url('images/xlsx.png') no-repeat;
}

and in the html:

<a href="#" class="button" data-icon="ui-icon-pdf">XLSX</a>

xlsxbbbb

Incoming search terms:

  • ASP NET jquery ui button
  • assign ui
  • button(option icons
  • button(option icons not working
  • jquery icons
  • jquery mobile icon from custom css
  • jquery ui button text after custom icon