Using datalist (drop down menu) in Form edit

When using select element in HTML content we are limited to insert new values in the list, if there is such requirement. Adding new item in the options require adding additional code. The problem is solved if we use the new HTML5 tag datalist

As per the definition: The

To the time of writing this article Guriddo jqGrid does not have a predefined datalist element which can be used directly. In order to use this element it is needed to create a custom type element as described here.

Before to explain how to create this tag in Guriddo jqGrid Form editing  we will explain some other aspects.

Usually the options value of datalist and selects are get from database with some criteria. When a new value should be inserted we need to create the appropriate server code to insert the new value (in most cases). It is important to note that when a new value is created in the current example it is posted to the server as part of the entire data. If there is a need to insert this new item in separate table it is possible to: either get the name from the post and analyze if the item exists in the table or we can simply set a flag that a new value is inserted in order to indicate server side that there is a need to perform a add in the table.

Lets go with the explanation and the code.

We suppose that the items which should be inserted in the datalist are available locally in global array. We named this array listarray. Again with this we use a global variable new_value which indicates if a new value is available and this flag is added into the posted data to the server so that the developer can easy add this new item into the list if needed.

[js]
var listarray = ["Chrome", "FireFox", "InternetExplorer"];
var new_value;
[/js]

As from the Guriddo documentation link above we need to define a edittype parameter in colModel to custom and prepare the two functions custom_element which is responsible to create the needed HTML conten and custom_value which is responsible to post the needed value plus to set the appropriate value from grid to the form and when we use navigator buttons in the form editing.

the code will look like this

[js]
jQuery("#grid").jqGrid({
…
"colModel":[
…
{"name":"Browser","index":"Browser", editable : true,
edittype : ‘custom’,
editoptions : {
custom_element : data_element,
custom_value : data_value
} },
…
],
…
});
[/js]

The custom_element function is responsible to create the needed HTML content. Again with this we insert the option item in the datalist from the global list array. Below is the code:

[js]
function data_element (value, options) {
// create all the needed elements
var elem = $("

<div id=’myelem’ style=’float:left’>\
<input tye=’text’ id=’Browser’ name=’Browser’ value=’" +value+"’ list = ‘browsers’ class=’myinput ui-widget-content ui-corner-all’/>\
<datalist id=’browsers'</datalist></div>

");
// add option values from listarray to datalist
for(var i=0; i<listarray.length;i++) {
$("#browsers", elem).append("<option>"+listarray+"</option>");
}
new_value = false;
return elem[0];
}
[/js]

The function creates three html elements – one div where the input and datalist tags are enclosed. This div is returned from the function to be inserted into the Guriddo jqGrid form.  The div have a float style to left so that it will look aligned with other fields and to the input element we added some classes so that it look in sync with the other input elements. In this case we defined myinput class, which formats its like FormElement. Please note that It is not good idea to set FormElement class to your custom input.

At end this function add the items into the datalist from the array and initializes the variable new_value that there are no new values added.

We should note that this function is executed every time when the form is opened from the navigator button.

The next interesting function is a custom_value

[js]
// custom value function to get and set value from the list
// when operation is set we check if the new inserted item is in list and if nor
// the element is added into the list array
function data_value( elem, operation, value) {
if(operation === ‘get’) {
var ret = $(‘input’,elem).val();
if( $.inArray(ret, listarray) === -1 ) {
listarray.push(ret);
// refresh the list
refreshlist();
//indicate new value
new_value = true;
}
return ret;
} else if(operation === ‘set’) {
$(‘input’,elem).val(value);
}
}

// function to refresh the list in html when new value is inserted
function refreshlist() {
var list = $("#browsers");
list.empty();
for(var i=0; i<listarray.length;i++) {
var option = document.createElement(‘option’);
option.value = listarray;
list[0].appendChild(option);
}
}
[/js]

The function should set value from grid to the form edit when the operation is set – i.e when we open the form in edit mode or navigate through the grid records with the navigator buttons. Again with this the function should return the value from the form which will be posted to the server – this happen when the operation is get Again with this the function is responsible to do the  following:

1. check if the inserted value is in the array (if( $.inArray(ret, listarray) === -1 ) ) and if not
2. insert the new value into the array  ( listarray.push(ret); )
3. refresh the html with the new item – the function refreshlist()
4. indicates that the new value is present in order to be posted to the server – new_value = true;

Finally in the edit and add options we use serializeEditData to add the new_value element to the posted data.

The code and example can be seen using this link

Enjoy the code