This is a migrated thread and some comments may be shown as answers.

Displaying "user-friendly" dropdownlist items without underscores

7 Answers 53 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 1
Sean asked on 28 Oct 2013, 02:23 PM
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!

7 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 29 Oct 2013, 08:28 AM
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:

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sean
Top achievements
Rank 1
answered on 29 Oct 2013, 10:55 AM
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.
0
Sean
Top achievements
Rank 1
answered on 29 Oct 2013, 02:14 PM
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.
0
Alexander Valchev
Telerik team
answered on 30 Oct 2013, 10:35 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Cajund
Top achievements
Rank 1
answered on 16 Jan 2014, 09:46 PM
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.
0
Cajund
Top achievements
Rank 1
answered on 16 Jan 2014, 11:21 PM
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.
0
Daniel
Telerik team
answered on 20 Jan 2014, 08:06 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Data Source
Asked by
Sean
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Sean
Top achievements
Rank 1
Cajund
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or