Remove underscore from Kendo dropdownlist

Question

This one seems simple, just not sure where to handle it. I am retrieving column name values from a SQL database via REST JSON. The values in the dropdown list have underscores as expected (Customer_Name). I want to display a "friendly" (Customer Name) version without underscores, yet still be sending my value (Customer_Name) to my REST service. I looked at Underscore.js but just not sure where to start and this may be simpler than I think. Thanks!

Answer 1

I don't know how you receive your data from your rest service.

But basically, you just have to map your data received by your REST service changing the value as you want.

Here is some sample code :

// Call to the REST service and when done call the callback function loadDDL
$.ajax({
  type: "POST",
  url: "my-rest-service"
}).done(loadDDL);


// Callback function when returning from the REST service
// -> load data in the DDL (here, it has the id "my-ddl")
function loadDDL(data) { 
  $("#my-ddl").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: _.map(data, makeFriendlyName),
    index: 0
  }); 
}


// Function used by the _.map function in order 
// change dynamically the labels in the DDL
function makeFriendlyName(obj) {
  return { 
    text: obj.text, 
    value: obj.value.replace("_", " ") 
  };
}

---

EDIT :

Based on OP's fiddle, here is a sample code using templates instead of directly changing the datasource :

function loadDDL(data) { 
  $("#my-ddl").kendoDropDownList({
    autoBind: true,
    dataTextField: "DOMAINQUERY",
    dataValueField: "COLUMN_NAME",
    dataSource: dataSourceSearch1,
    template: "${DOMAINQUERY.replace(/_/g, ' ')}"
  }); 
}

---

EDIT 2 :

In order to translate directly the datasource, I comes again to a re-mapping of the datasource by changing dynamically the text in the change event of the datasource :

var dataSourceSearch1 = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://demos.kendoui.com/service/Customers",
            dataType: "jsonp"
        }
    },
    change: changeDS // <-- Here add a change event : each time the datasource changes, this event is being raised
});


// This is the function call when the DS changes
// the data stuff is in the `items` property which is the object send via the REST service
function changeDS(datasource) {
    _.map(datasource.items, makeFriendlyName);
}


// Function to apply to each data -> here I just replace all spaces in the 
// `ContactName` field by `_`
function makeFriendlyName(data) {
    data.ContactName = data.ContactName.replace(/ /g, '_');
    return data;
}


// Fill the DDL with the previous datasource
var cboSearchField1 = $("#cboSearchField1").kendoDropDownList({
    dataTextField: "ContactName",
    dataValueField: "ContactName",
    filter: "contains",
    autobind: true,
    select: cboSearchField1_Selected,
    change: cboSearchField1_onChange,
    dataSource: dataSourceSearch1
}).data("kendoDropDownList");