Select2 EditorTemplates

Select2 EditorTemplates

@model object
@{
    var propertyName = ViewData.ModelMetadata.PropertyName;
    var propertyValue = Convert.ToInt32(ViewData.ModelMetadata.Model);
    var sourceList = ViewData["SourceList"];
    var isSearchable = ViewData["IsSearchable"];

    if (sourceList == null)
    {
        sourceList = Enumerable.Empty<SelectListItem>();
    }
}
@Html.DropDownListFor(m => m, (IEnumerable<SelectListItem>)sourceList, new { @id = propertyName, @class = "form-control", @style = "width: 75%", data_placeholder = "-- Select --" })
@*NOTE : DON'T put any inline  coments in the JS block below because it breaks when used in a Kendo grid popup template*@
<script>
    $(document).ready(function () {
        $("#@propertyName").select2({
            placeholder: function(){
                $(this).data('placeholder');
            },
            allowClear: true,
            escapeMarkup: function (markup) { return markup; },
            minimumInputLength: 0,
            theme: "classic",
            minimumResultsForSearch: -1
        });

       if (@propertyValue === 0) {
            $("#@propertyName").val(0).trigger("change.select2");
        }
    });
</script>

// WITH AJAX BINDING *************************************************************

@model object
@{
    var modelName = ViewData.ModelMetadata.ContainerType.Name + "." + ViewData.ModelMetadata.PropertyName;
    var model = ViewData.ModelMetadata.ContainerType.Name;
    var propertyName = ViewData.ModelMetadata.PropertyName;
    var propertyValue = Convert.ToInt32(ViewData.ModelMetadata.Model);
}
@{
    var sourceList = ViewData["SourceList"];
    var url = ViewData["Url"];
    var isSearchable = ViewData["IsSearchable"];

    if (sourceList == null)
    {
        sourceList = Enumerable.Empty<SelectListItem>();
    }
}
@Html.DropDownListFor(m=>m, (IEnumerable<SelectListItem>)sourceList, new { @id = propertyName, @class = "form-control", @style = "width: 75%" })
@*NOTE : DON'T put any inline  coments in the JS block below because it breaks when used in a Kendo grid popup template*@
<script>
    $(document).ready(function () {
        var pageSize = 20;
        $("#@propertyName").select2({
            ajax: {
                url: "@url",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        searchTerm: params.term,
                        pageNumber: params.page || 1,
                        pageSize: pageSize
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.Results,
                        pagination: {
                            more: (params.page * pageSize) < data.Total
                        }
                    };
                },
                cache: true
            },
            placeholder: "-- Select -- ",
            allowClear: true,
            escapeMarkup: function(markup) { return markup; },
            minimumInputLength: 0,
            theme: "classic",
            minimumResultsForSearch: 10
        });

        if (@propertyValue === 0) {
            $("#@propertyName").val(0).trigger("change.select2");
        }
    });
</script>