JG Vimalan's Blog

It is all about coding!

Editable Select Control in ASP.NET MVC 4 using Coffeescripter

I got a task where I need to display editable ‘select’ control using coffeescript in ASP.NET MVC 4 and twitter bootstrap.

Coffeescripter files are available here,

http://coffeescripter.com/code/editable-select/

The steps I followed to create editable “select” control are given below,

In MVC project, add reference to necessary coffeescript and jquery (I used jquery-1.9.1.js) and bootstrap files.

In View, add the following code,
<select id=”user_name_ddl” class=”editable-select”></select>

Open ‘jquery.editable-select.css’ (this file will be available in coffeescript pack) in your project and update the correct image location,

input.editable-select {
background: #FFF url(images/arrow-down.gif) right center no-repeat;
padding-right: 13px;
cursor:pointer;
}
Note: I copied the arrow-down image into an images folder in my MVC project.

In your custom .js file (if not, create one) add the following lines of code,

$(function () {
$(‘.editable-select’).editableSelect( {
bg_iframe: true, onSelect: function (list_item) {
$(‘#results’).html(‘List item text: ‘ + list_item.text() + ‘\ Input value: ‘+ this.text.val());
} } );

var select = $(‘.editable-select:first’);
var instances = select.editableSelectInstances();

if (instances != null && instances!= undefined && instances.length > 0)
instances[0].addOption(“Item 1”);
});

That’s it. Now, you will be able to see an editable select as shown below,

Snapshot

Advertisements

November 9, 2013 Posted by | ASP.NET MVC, JQuery | Leave a comment