igCombo 14.2 dynamic drop-down width

Calculating the width with a dummy HTML structure in advance

HTML

<script src="http://www.igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.lob.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<div id="combo"></div>
<div id="ruler" class="ui-widget ui-igcombo-list"><span class="ui-igcombo-listitem ui-state-default"></span>

</div>

CSS

#ruler {
    display:none;
    border:1px solid transparent;
}

JavaScript

$(function () {

    var data = [
        { "ID":1, "Name": "John Smith larger name item", "Age": 45 },
        { "ID":2, "Name": "Mary Johnson", "Age": 32 },
        { "ID":3, "Name": "Bob Ferguson", "Age": 27 },
        { "ID":6, "Name": "John Smith even larger name item", "Age": 66 }
    ];
    var maxWidth = measureMaxItem(data, "Name");

    $("#combo").igCombo({
        dataSource: data,
        valueKey: "ID",
        textKey: "Name",
        placeHolder:"focus...",
        dropDownWidth: maxWidth
    });
    
    /*
    * Find the longest text for 'key' in data
    */
    function measureMaxItem(data, key) {
        var maxName = data[0][key], max;
    
        for (var i = 1; i < data.length; i++) {
            if (data[i][key].length > maxName.length) {
                maxName = data[i][key];
            }
        }
        max = $("#ruler > span").text(maxName).parent().outerWidth();
        if (max > 500) max = 500;
        return max;
    }
});