Search code examples
javascriptjquerykendo-uikendo-multiselect

Kendo Multiselect value replace comma with comma + space

I'm using a kendo Multiselect. The value returned by default is a comma delimited value of the selected values. I would like to display this in a more readable format with a space between the commas. My code....

http://dojo.telerik.com/OcIxEw

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Kendo MultiSelect replace comma with comma space</title>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script></head>
<body>

  <select id="msCity" multiple="multiple" data-placeholder="Select Cities" >
    <option>Chicago</option>
    <option>Las Vegas</option>
    <option>Los Angeles</option>
    <option>New Jersey</option>
    <option>New York</option>
    <option>San Francisco</option>
  </select>
  <br />
  <br />
  <button id="btnGet" type="button" onclick="btnGetClick()">Get Value</button>
  <br />
  <br />
  <input id="result" type="text" style="width:100%" readonly />

  <script>

    //$(document).ready( function() {

            $('#msCity').kendoMultiSelect({ autoClose: false });

    //});

        function btnGetClick() {
        var selectedCities = "";
        selectedCities = $('#msCity').data("kendoMultiSelect").value().toString();
        $('#result').val(selectedCities.replace(",", ", "));
        }

    </script>

</body>
</html>

Unfortunately my result only replaces the first comma in any selection.

e.g. Chicago,New Jersey,San Francisco becomes Chicago, New Jersey,San Francisco the second (and subsequent commas) do not get replaced.

Anyone know why?

Solution

  • Unfortunately my result only replaces the first comma in any selection.

    In order to replace all occurrences of your pattern you can change:

    selectedCities.replace(",", ", ")

    to:

    selectedCities.replace(/,/g, ', ')

    The snippet:

    $('#msCity').kendoMultiSelect({ autoClose: false });

function btnGetClick() {
    var selectedCities = "";
    selectedCities = $('#msCity').data("kendoMultiSelect").value().toString();
    $('#result').val(selectedCities.replace(/,/g, ', '));
}
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>


<select id="msCity" multiple="multiple" data-placeholder="Select Cities" >
    <option>Chicago</option>
    <option>Las Vegas</option>
    <option>Los Angeles</option>
    <option>New Jersey</option>
    <option>New York</option>
    <option>San Francisco</option>
</select>
<br />
<br />
<button id="btnGet" type="button" onclick="btnGetClick()">Get Value</button>
<br />
<br />
<input id="result" type="text" style="width:100%" readonly />