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

Quick Tip : List available encodings

Here is a way to list the available encodings for a version of the .NET Framework


using System.Text;

 


EncodingInfo[] encodings = Encoding.GetEncodings();

Here is a piece of code to output the encoding info in an html file (as a table for readability)


var encodings = (from e in Encoding.GetEncodings()
 orderby e.Name
 select string.Format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", e.CodePage, e.Name, e.DisplayName)
 ).ToList();

// add html part infos
 encodings.Insert(0, "<html><head><title>Encodings</title><style>table {width:100%;} table tr:nth-child(2n){background:#ddd;}</style></head><body><h1>Encodings list</h1><table><tr><th>Code</th><th>Name</th><th>DisplayName</th></tr>");
 encodings.Add("</table></body></html>");
 File.WriteAllLines(@"c:\encodings.html", encodings);

The result for the .NET FX 4.5 :

CodeNameDisplayName
708ASMO-708Arabic (ASMO 708)
950big5Chinese Traditional (Big5)
21025cp1025IBM EBCDIC (Cyrillic Serbian-Bulgarian)
866cp866Cyrillic (DOS)
875cp875IBM EBCDIC (Greek Modern)
50221csISO2022JPJapanese (JIS-Allow 1 byte Kana)
720DOS-720Arabic (DOS)
862DOS-862Hebrew (DOS)
51936EUC-CNChinese Simplified (EUC)
51932euc-jpJapanese (EUC)
20932EUC-JPJapanese (JIS 0208-1990 and 0212-1990)
51949euc-krKorean (EUC)
54936GB18030Chinese Simplified (GB18030)
936gb2312Chinese Simplified (GB2312)
52936hz-gb-2312Chinese Simplified (HZ)
858IBM00858OEM Multilingual Latin I
20924IBM00924IBM Latin-1
1047IBM01047IBM Latin-1
1140IBM01140IBM EBCDIC (US-Canada-Euro)
1141IBM01141IBM EBCDIC (Germany-Euro)
1142IBM01142IBM EBCDIC (Denmark-Norway-Euro)
1143IBM01143IBM EBCDIC (Finland-Sweden-Euro)
1144IBM01144IBM EBCDIC (Italy-Euro)
1145IBM01145IBM EBCDIC (Spain-Euro)
1146IBM01146IBM EBCDIC (UK-Euro)
1147IBM01147IBM EBCDIC (France-Euro)
1148IBM01148IBM EBCDIC (International-Euro)
1149IBM01149IBM EBCDIC (Icelandic-Euro)
37IBM037IBM EBCDIC (US-Canada)
1026IBM1026IBM EBCDIC (Turkish Latin-5)
20273IBM273IBM EBCDIC (Germany)
20277IBM277IBM EBCDIC (Denmark-Norway)
20278IBM278IBM EBCDIC (Finland-Sweden)
20280IBM280IBM EBCDIC (Italy)
20284IBM284IBM EBCDIC (Spain)
20285IBM285IBM EBCDIC (UK)
20290IBM290IBM EBCDIC (Japanese katakana)
20297IBM297IBM EBCDIC (France)
20420IBM420IBM EBCDIC (Arabic)
20423IBM423IBM EBCDIC (Greek)
20424IBM424IBM EBCDIC (Hebrew)
437IBM437OEM United States
500IBM500IBM EBCDIC (International)
737ibm737Greek (DOS)
775ibm775Baltic (DOS)
850ibm850Western European (DOS)
852ibm852Central European (DOS)
855IBM855OEM Cyrillic
857ibm857Turkish (DOS)
860IBM860Portuguese (DOS)
861ibm861Icelandic (DOS)
863IBM863French Canadian (DOS)
864IBM864Arabic (864)
865IBM865Nordic (DOS)
869ibm869Greek, Modern (DOS)
870IBM870IBM EBCDIC (Multilingual Latin-2)
20871IBM871IBM EBCDIC (Icelandic)
20880IBM880IBM EBCDIC (Cyrillic Russian)
20905IBM905IBM EBCDIC (Turkish)
20838IBM-ThaiIBM EBCDIC (Thai)
50220iso-2022-jpJapanese (JIS)
50222iso-2022-jpJapanese (JIS-Allow 1 byte Kana – SO/SI)
50225iso-2022-krKorean (ISO)
28591iso-8859-1Western European (ISO)
28603iso-8859-13Estonian (ISO)
28605iso-8859-15Latin 9 (ISO)
28592iso-8859-2Central European (ISO)
28593iso-8859-3Latin 3 (ISO)
28594iso-8859-4Baltic (ISO)
28595iso-8859-5Cyrillic (ISO)
28596iso-8859-6Arabic (ISO)
28597iso-8859-7Greek (ISO)
28598iso-8859-8Hebrew (ISO-Visual)
38598iso-8859-8-iHebrew (ISO-Logical)
28599iso-8859-9Turkish (ISO)
1361JohabKorean (Johab)
20866koi8-rCyrillic (KOI8-R)
21866koi8-uCyrillic (KOI8-U)
949ks_c_5601-1987Korean
10000macintoshWestern European (Mac)
932shift_jisJapanese (Shift-JIS)
20127us-asciiUS-ASCII
1200utf-16Unicode
1201utf-16BEUnicode (Big-Endian)
12000utf-32Unicode (UTF-32)
12001utf-32BEUnicode (UTF-32 Big-Endian)
65000utf-7Unicode (UTF-7)
65001utf-8Unicode (UTF-8)
1250windows-1250Central European (Windows)
1251windows-1251Cyrillic (Windows)
1252Windows-1252Western European (Windows)
1253windows-1253Greek (Windows)
1254windows-1254Turkish (Windows)
1255windows-1255Hebrew (Windows)
1256windows-1256Arabic (Windows)
1257windows-1257Baltic (Windows)
1258windows-1258Vietnamese (Windows)
874windows-874Thai (Windows)
20000x-Chinese-CNSChinese Traditional (CNS)
20002x-Chinese-EtenChinese Traditional (Eten)
20001x-cp20001TCA Taiwan
20003x-cp20003IBM5550 Taiwan
20004x-cp20004TeleText Taiwan
20005x-cp20005Wang Taiwan
20261x-cp20261T.61
20269x-cp20269ISO-6937
20936x-cp20936Chinese Simplified (GB2312-80)
20949x-cp20949Korean Wansung
50227x-cp50227Chinese Simplified (ISO-2022)
20833x-EBCDIC-KoreanExtendedIBM EBCDIC (Korean Extended)
29001x-EuropaEuropa
20105x-IA5Western European (IA5)
20106x-IA5-GermanGerman (IA5)
20108x-IA5-NorwegianNorwegian (IA5)
20107x-IA5-SwedishSwedish (IA5)
57006x-iscii-asISCII Assamese
57003x-iscii-beISCII Bengali
57002x-iscii-deISCII Devanagari
57010x-iscii-guISCII Gujarati
57008x-iscii-kaISCII Kannada
57009x-iscii-maISCII Malayalam
57007x-iscii-orISCII Oriya
57011x-iscii-paISCII Punjabi
57004x-iscii-taISCII Tamil
57005x-iscii-teISCII Telugu
10004x-mac-arabicArabic (Mac)
10029x-mac-ceCentral European (Mac)
10008x-mac-chinesesimpChinese Simplified (Mac)
10002x-mac-chinesetradChinese Traditional (Mac)
10082x-mac-croatianCroatian (Mac)
10007x-mac-cyrillicCyrillic (Mac)
10006x-mac-greekGreek (Mac)
10005x-mac-hebrewHebrew (Mac)
10079x-mac-icelandicIcelandic (Mac)
10001x-mac-japaneseJapanese (Mac)
10003x-mac-koreanKorean (Mac)
10010x-mac-romanianRomanian (Mac)
10021x-mac-thaiThai (Mac)
10081x-mac-turkishTurkish (Mac)
10017x-mac-ukrainianUkrainian (Mac)

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