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

ASP.NET vNext

A few resources about ASP.NET vNext

Intro by Scott Hanselman : http://www.hanselman.com/blog/IntroducingASPNETVNext.aspx

Intro by David Fowler : http://davidfowl.com/asp-net-vnext/

  • A better platform for building web applications with .NET
  • Things we wanted to fix
  • System.Web

Overview by David Fowler : http://davidfowl.com/asp-net-vnext-architecture/

Intro by Jeff Fritz: http://developer.telerik.com/featured/microsofts-special-k-an-introduction-to-asp-net-vnext/

  • Introducing OWIN
  • MVC – Meet WebAPI, WebAPI meet MVC
  • Bye Bye System.Web
  • Blistering Performance
  • Where is web.config?
  • Welcome Project.JSON!

Videos :

Scott Hanselman and Scott Hunter : INTRODUCING: The Future of .NET on the Server

David Fowler and Scott Hanselman : DEEP DIVE: The Future of .NET on the Server

 

Source code :

Asp.Net vNext is open source and can be found on github : https://github.com/aspnet

The current version of ASP.NET is still on codeplex : http://aspnetwebstack.codeplex.com/

Know your .NET Framework Episode 2 : getting a range of integers

If you need a list of integers filled with all numbers in a specific range, you will often do this :

List<int> range = new List<int>();
for (int i = rangeStart; i < RangeEnd; i++)
{
   range.Add(i);
}

or you will write a method

public IEnumerable<int> GetRange(int start, int end)
{
  for (int i = start; i < end; i++)
  {
    yield return i;
  }
}

and call it:

List<int> range = GetRange(0, 10).ToList();

Good news : this method already exists in the framework !

You can find it in the System.Linq namespace : it’s the Enumerable.Range static method, and it’s available since framework 3.5.

This method returns an IEnumerable<int>, you can use it like this, or convert it to an array or a list.
to use it :
List<int> range = new List<int>(Enumerable.Range(0, 10));
or
List<int> range = Enumerable.Range(0, 10)).ToList();

Remark

Note that the first parameter is the start, but the second is not the end ! it’s a count !, so if you want to use it by specifying a start and an end you will have to do this :

int start = 5;
int end = 50;
List<int> range = Enumerable.Range(start, (end-start)+1)).ToList();

It’s handy to reduce the code size when you want to fill a dropdown or other things that requires a range of integers.

Know your .NET Framework Episode 1 : joining strings

Too often we see developers re-inventing the wheel, so I’d like to try to make a round-up of the common methods people don’t use enough

I’m not saying I’ never made the same mistakes, but I’m going to try to group them to avoid you (and me) to do them again

First example : how to properly join a list of strings (jump to the conclusion if you want the direct answer)

imagine you have a list of strings :


IEnumerable<string> mylist = new[] { "dog", "cat", "turtle", "bird", "fish" };

and as a result you would like

dog, cat, turtle, bird, fish

so joining all items by a comma followed by a blank space

what devs usually do is :


string result = "";
foreach(string item in mylist) // joining all items
{
  result += item + ", ";
}

which will result in

dog, cat, turtle, bird, fish,

so they will remove the trailing “, ”


string result = "";
foreach(string item in mylist) // joining all items
{
  result += item + ", ";
}

result =result.TrimEnd(new char[] { ',', ' ' });

// or result =  result.Remove(result.LastIndexOf(", "), 2);
// or another method

this will give the wanted “dog, cat, turtle, bird, fish”

Another way to go is

 List<string> mylist = new List<string>(new []{ "dog", "cat", "turtle", "bird", "fish" });
 string result = "";
 for (int i = 0; i < mylist.Count; i++)
 {
   if (i != 0)
   {
      result += ", ";
   }
   result += mylist[i];
}

This will work as well

But there is a method that was there for ever (I mean since the first version of the framework)

This is a static method of the String class: the Join method.

It has several signatures, but basically it takes the separator you want as the first parameter, and a collection of string or object as second parameter.

If you want to see how it’s implemented : check the method in the framework source reference

Conclusion

You can really shorten you code by using this method

string result = String.Join(", ",mylist);

Bonus

Of course you don’t have to limit yourself to a comma as a separator, here is an example to create an html unordered list:

List<string> mylist = new List<string>(new []{ "dog", "cat", "turtle", "bird", "fish" });

// step 1 :create the inner "li"
string listItems = string.Join("</li><li>", mylist);

// step 2 : complete the first and last "li" and surround by an "ul"
string result = string.Format("<ul><li>{0}</li></ul>",listItems);

output :

<ul><li>dog</li><li>cat</li><li>turtle</li><li>bird</li><li>fish</li></ul>

or :

  • dog
  • cat
  • turtle
  • bird
  • fish

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>);
 }))