EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Alfred on April 24, 2019, 02:25:55 AM



Title: Combogrid with multiple select does not clear the search term
Post by: Alfred on April 24, 2019, 02:25:55 AM
I am trying to use combogrid with multiple:true and search data

    $('#cc').combogrid({
        panelWidth:450,
        multiple:true,
        idField:'name',  textField:'name',
        mode:'remote', method:'get',
        url:'Employees/list',
        columns:[[
            {field:'regd',title:'Code',width:60},
            {field:'name',title:'Name',width:100},
            {field:'addr',title:'Address',width:120}
        ]]
    });

I have hundred of employees, I want to select 2 or more employees by typing their name on the input of the combobgrid. On the server side, I got the q value for the first name, for the second value, typing does not help because the query alfready contains the first typed name. So using multiple becomes useless. But I solve this problem by reading the q string after the last comma. The problem is combogrid does not clear the typed query string. For example I type 23 for the regd, then I select the name on the grid, the regd 23 is appended to the name selected. How do I clear this? How do I clear the search term I used after selecting the item?
Look at this example.http://jsfiddle.net/Bz9Js/
When you type something, even after selecting our choices from the grid, the typed letters still exist in the input field.

Thanks and regards,
Alfred


Title: Re: Combogrid with multiple select does not clear the search term
Post by: stworthy on April 24, 2019, 07:56:46 PM
This may be another solution to do searching on a combogrid component. Attach a toolbar that contains a searching input to the datagrid. Type something on the searching input to search new data from remote server.
Code:
$('#cc').combogrid({
    panelWidth:450,
    multiple:true,
    idField:'name',
    textField:'name',
    mode:'remote',
    method:'get',
    url:'Employees/list',
    columns:[[
        {field:'regd',title:'Code',width:60},
        {field:'name',title:'Name',width:100},
        {field:'addr',title:'Address',width:120}
    ]],
    toolbar: '#toolbar'
});
<div id="toolbar">
<input class="easyui-searchbox" data-options="searcher:doSearch">
</div>


Title: Re: Combogrid with multiple select does not clear the search term
Post by: Alfred on April 25, 2019, 04:51:37 AM
My question is to clear the input field once we select a row from the combogrid and fill the input field with the selected data. Because I use multiple property, once I select a row, the input field with the selected field value, e.g. John and added Comma(,) which is followed by my search term, e.g. Jo, So it becomes John, Jo. So I want to remove Jo from the input field, But I select another row e.g. James, I want the input field to be set with John, James.
In my case, Toolbar is not convenient. I hope you can solve the problem.

I am trying something like below:

Code:
onSelect:function(index, row){
   var ginput = $('#cbg').combogrid('getText');
   var newText = ginput.substr(0, ginput.lastIndexOf(',')+1);
   $('#cbg').combogrid('setValue', newText);
}
But this does not allow me to add another field after the last comma. May be there are workarounds, or maybe the combogrid has way to solve this without the toolbar.


Thanks and regards,
Alfred


Title: Re: Combogrid with multiple select does not clear the search term
Post by: stworthy on April 25, 2019, 07:22:24 AM
Without the toolbar for searching, please try to use the 'reversed' to true and 'selectOnNavigation' to true. This is the simple example emulating how to do remote searching.

http://code.reloado.com/unuvut/edit#preview


Title: Re: Combogrid with multiple select does not clear the search term
Post by: Alfred on April 25, 2019, 07:51:53 AM
Thanks. this solves the problem

Regards,

Alfred