Tip : How to know how your product name sounds in another language.

SONY DSC

Finding a name that suits your product/business/application/[anything] is hard.
It’s even harder when you want your product to be available worldwide.

You have to keep in mind that the name you found can be perfect in you language but can have an dumb (or offensive) meaning in another one.

You will also wonder how the name you came with will sound in other languages.

To help you with these questions, here is a quick tip: use google translate https://translate.google.com

First, it will help you to know the different meaning your name can have

Translate

Second, you can listen how it sounds in different languages

2016-01-29 10_10_57-Google Translatefrench

2016-01-29 10_10_24-Google Translateenglish

It will not really help you to find a name, but it’s a cheap and easy way to test if what you came with doesn’t sound really weird in some languages.

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.

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

Dynamic is magic : A solution to use the ASP.NET profile in web applications.

Profiles are not auto generated with Web Applications, so you can’t just add them in the web.config and use them directly. (unless …)

The WebSite project do a magic thing : when you add properties to the profile in the web.config file, a class is autogenerated and allow the developer to access these properties. The web application project don’t do that.

You can find some workarounds over the web, here is some

The “dynamic” keyword help us here.

So, no more chit chat, here is the code snippets for a profile with 3 parameters : LastName, FirstName and GSM

web.config:


<profile enabled="true">
 <providers>
 <clear/>
 <add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider" connectionStringName="ApplicationServices" applicationName="MyApp"/>
 </providers>
 <properties>
 <add name="FirstName" type="string"/>
 <add name="LastName" type="string"/>
 <add name="GSM" type="string"/>
 </properties>
 </profile>

A “business” class, I called it “ProfilePresenter”, it returns the profile of the logged user and allow modifications:


public class ProfilePresenter
{
 public dynamic GetProfile()
 {
 return HttpContext.Current.Profile;
 }
 public dynamic UpdateProfile(string FirstName, string LastName, string GSM)
 {
 HttpContext.Current.Profile.SetPropertyValue("FirstName", FirstName);
 HttpContext.Current.Profile.SetPropertyValue("LastName", LastName);
 HttpContext.Current.Profile.SetPropertyValue("GSM", GSM);
 HttpContext.Current.Profile.Save();
 return HttpContext.Current.Profile;
 }
}

A page that uses the ProfilePresenter class : displaying the profile properties, and edit them

ObjectDataSource:


<asp:ObjectDataSource runat="server" ID="ProfileODS" TypeName="Board.Presenters.ProfilePresenter"
 SelectMethod="GetProfile" UpdateMethod="UpdateProfile"/>
<pre>

FormView: Display part

 <asp:FormView runat="server" ID="ProfileFV" DataSourceID="ProfileODS" RenderOuterTable="false">
 <EmptyDataTemplate>
 <p>
 No profil datas
 </p>
 </EmptyDataTemplate>
 <ItemTemplate>
 <h2>
 Profil informations</h2>
 <div>
 <asp:Button runat="server" ID="Edit" CommandName="Edit" Text="Edit" /></div>
 <table>
 <thead>
 <tr>
 <th colspan="2">
 Infos
 </th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th>
 LastName
 </th>
 <td>
 <%# Eval("LastName")%>
 </td>
 </tr>
 <tr>
 <th>
 FirstName
 </th>
 <td>
 <%# Eval("FirstName")%>
 </td>
 </tr>
 <tr>
 <th>
 GSM
 </th>
 <td>
 <%# Eval("GSM")%>
 </td>
 </tr>
 </tbody>
 </table>
 </ItemTemplate>

FormView : the Edit part

 <EditItemTemplate>
 <h2>
 Profil Update</h2>
 <div>
 <asp:Button runat="server" ID="Edit" CommandName="Cancel" Text="Annuler" />
 <asp:Button runat="server" ID="Button1" CommandName="Update" Text="Sauver" /></div>
 <table>
 <thead>
 <tr>
 <th colspan="2">
Infos
 </th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th>
 LastName
 </th>
 <td>
 <asp:TextBox runat="server" ID="LastName" Text='<%# Bind("LastName")%>' />
 </td>
 </tr>
 <tr>
 <th>
 FirstName
 </th>
 <td>
 <asp:TextBox runat="server" ID="FirstName" Text='<%# Bind("FirstName")%>' />
 </td>
 </tr>
 <tr>
 <th>
 GSM
 </th>
 <td>
 <asp:TextBox runat="server" ID="GSM" Text='<%# Bind("GSM")%>' />
 </td>
 </tr>
 </tbody>
 </table>
 </EditItemTemplate>
 </asp:FormView>

A simple use :


dynamic profil = HttpContext.Current.Profile;
if (profil != null)
{
 Console.Writeline(profil.GSM);
}

Another example : retrieve the gsm numbers from  members of a security role. It shows how to retrieve the profile of an other user


string[] users = Roles.GetUsersInRole(role);

List<string> gsm = new List<string>();
foreach (string user in users)
{
 dynamic profil = HttpContext.Current.Profile;
 dynamic profi = profil.GetProfile(user);
 if (profi != null)
 {
 if (!string.IsNullOrEmpty(profi.GSM))
 {
 gsm.Add(profi.GSM);
 }
 }
}

Let me know what you think !