About Dropdownlist

[hardcodeMember]

Hello Peter,
1. I have a grid table with two of them columns as dropdownlist.
I want that these two dropdownlist should be connected to two different tables. That means when the grid loads the dropdownlists will also load from different tables other than what the other columns are loading from.

2. I have a dropdown list showing the following countries as content in a grid table.
when a user clicks to edit the a row in the grid a popup window opens and the dropdownlist is loaded with possible countries for the user to select. The problem here is that. Assuming the current country is United States and the user clicks on the row to edit and the the popup window opens I want to set the current item in the dropdown to United States. how can I go about this. I cannot use the index because at a point in time i cannot tell the index of United States in the dropdownlist showing in the popup window.

Thanks

[Peter StoevKeymaster]

Hi hardcode,

1. In the columns array definition, you can set a createeditor callback function to a column. That function will be called when the dropdownlist editor is created by the Grid. In that callback function, you can bind the dropdownlist to a different data source.

createeditor – sets a custom function which is called when the cells editor is created. The Grid passes 3 parameters to it – row index, cell value and the editor element. The function can be used for adding some custom parameters to the editor.

{ text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177,
    createeditor: function (row, cellvalue, editor) {
        var dataSource = ['Cappuccino', 'Caramel Latte', 'Caffe Espresso'];
        editor.jqxDropDownList({source: dataSource });
    }
}

2. jqxDropDownList does not have built-in selectValue function and can select items only by index. Here’s a possible workaround to select an item by value:

// get all items.
var items = $("#jqxWidget").jqxDropDownList('getItems');
// find the index by searching for an item with specific value.
var indexToSelect = -1;
$.each(items, function (index) {
    if (this.value == "Blido Comidas preparadas") {
        indexToSelect = index;
        return false;
    }
});
$("#jqxWidget").jqxDropDownList({ selectedIndex: indexToSelect });

If you are using the Grid in edit mode, the appropriate function where you can select an item by value is called ‘initeditor’. That function is called when the user clicks on a cell and starts an edit operation.

More info about the ‘initeditor’ function:

initeditor - sets a custom function which is called when the cells editor is opened. The Grid passes 3 parameters to it - row index, cell value and the editor element. The function can be used for adding some custom parameters to the editor.
{ text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
    initeditor: function (row, cellvalue, editor) {
        editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
    }
}

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[hardcodeMember]

{ text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177,
    createeditor: function (row, cellvalue, editor) {
        var dataSource = ['Cappuccino', 'Caramel Latte', 'Caffe Espresso'];
        editor.jqxDropDownList({source: dataSource });
    }
}

Hello,
1. You suggested the above code when I asked for ways to link a dropdownlist in a grid to another table.. I tried it but it failed. I have spent days trying to figure it out but it is not just working..

2. I want to enable search in a dropdownlist, so when a user start typing the dropdwonlist will auto complete it.. I dont see anything like that in the API which will enable a user start typing as the dropdownlist is readonly

thank you

[Peter StoevKeymaster]

Hi hardcode,

1. To change the DropDownList editor’s data source, you need to use the ‘createeditor’ function as I suggested. In that function, you can initialize the DropDownList in the way you want. The provided code snippet was changing the widget’s source to an array, but you can bind it to remote data, too.

2. The DropDownList editor does not support search functionality and auto-complete. It displays a list of selectable items in a read-only popup.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts