Displaying "user-friendly" dropdownlist items without underscores

[Sean]

Hi,

I am trying to display the remote data bound items in a dropdownlist without underscores, to achieve a 'user-friendly' display. (ie. Customer Name instead of Customer_Name).  How could this be accomplished? 

I did come across this:

$('.name').each(function() {
    var $this = $(this);

    $this.text($this.text().replace(/_/g, ' '));
});

Just not sure where best to tackle this seemingly easy replacement.

Thanks in advance!

[Alexander Valchev]

Hi Todd,

You can format the data in a user-friendly way via template. Kendo templates can execute JavaScript which means that you will be able to work with the replace method like in the provided code snippet.

Here is a small example that demonstrates underscore removing:

<div id="example"></div>

<script type="text/javascript">
    var templateString = '<p>#: data.replace(/_/g, " ") #</a>';
    var template = kendo.template(templateString);

    $("#example").html(template({ data: "Customer_Name" }));
</script>

For more information regarding templates syntax please check the following help topic:

• http://docs.kendoui.com/getting-started/framework/templates/overview
  
  

Regards,
Alexander Valchev
Telerik

[Sean]

Thanks. I'm using a template with another control and it's quite useful. Where I'm hung up is implementing it via the dropdownlist with bound data like so:

// search schema from customers view - remote, sample JSON above
var dataSourceSearch1 = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://demos.kendoui.com/service/Customers",
            dataType: "jsonp"
        }
    }
});
dataSourceSearch1.read();

// searchfield1 1-1 Customer=name1
var cboSearchField1 = $("#cboSearchField1").kendoDropDownList({
    dataTextField: "COLUMN_NAME",
    dataValueField: "COLUMN_NAME",
    filter: "contains",
    autobind: true,
    select: cboSearchField1_Selected,
    change: cboSearchField1_onChange,
    dataSource: dataSourceSearch1,
}).data("kendoDropDownList");

Should I reconsider my format, or can you suggest where to add the template? Thanks.

[Sean]

I did manage to remove the underscores by adding a template attribute to my control, however it only replaces the underscores when the dropdownlist is opened. The selected item still shows with the underscores after closing.

template: "${COLUMN_NAME.replace(/_/g, ' ')}",

See below, I added this after the dataSource: dataSourceSearch1, attribute. Can I use this approach to remove the underscores from the selected item text?

Thanks.

[Alexander Valchev]

Hello Todd,

DropDownList widget does not provide ability for the developer to define a template for the selected item.

As an alternative approach I can suggest you to modify directly the data in the DataSource. You may use the parse function to loop through the raw data array and remove underscores. In this way the DataSource will not contain underscores at all and respectively the DropDownList widget will not display them. In this case the usage of template is not needed.

Regards,
Alexander Valchev
Telerik

[Cajund]

Hi Folks,

Chiming in here, as I would like to get a little more information as to options.

I have this in the config:

dataSource: self.users_datasource,
dataTextField: 'first_name',
dataValueField: 'id',
template: "#= first_name # #= last_name #",

This datasource is tied to the Backbone model, so manipulating the data is not really an option. So, while the drop down items are displaying the way I would like, the selected item is only showing the first name. Any ideas on how I may show what I am showing in the template? Why wouldn't the template (if present) override the dataTextField? This is more expected behavior for drop downs.

Thanks.

David.

[Cajund]

Hi Folks,

I want to follow up here. I found that after I posted this, I discovered that there was an newer version. But now I have a different problem:

This works:

dataSource: self.users_datasource,
dataTextField: 'first_name',
dataValueField: 'id',
template: "#= first_name # #= last_name #",
valueTemplate: "#= data.first_name # #= data.last_name #",

However, if I add an option label when the value of the field is null:

optionLabel: "Select a User as a Billing Contact...",
dataSource: self.users_datasource,
dataTextField: 'first_name',
dataValueField: 'id',
template: "#= first_name # #= last_name #",
valueTemplate: "#= data.first_name # #= data.last_name #",

I get an error saying "Uncaught ReferenceError: last_name is not defined"

OK, so I see that valueTemplate takes a function (this is in anticipation of some logic to handle the missing last_name:

optionLabel: "Select a User as a Billing Contact...",
dataSource: self.users_datasource,
dataTextField: 'first_name',
dataValueField: 'id',
template: "#= first_name # #= last_name #",
valueTemplate: function () {
    return "#= data.first_name # #= data.last_name #";
},

I get "#= data.first_name # #= data.last_name #" in the drop down always.

I'm sure I am missing something, Thanks for your help.

[Daniel]

Hello,

You can set an object for the optionLabel in order to avoid the error e.g.

optionLabel: {
    first_name: "Select a User as a Billing Contact...",
    id: "",
    last_name: ""
}

It will occur because the dropdownlist is not aware of the last_name field and will not add it to the optionLabel data.

Regards,
Daniel
Telerik