How can i proprammaticaly reload items for selectFilter column in dataTable?

How can i programmatically reload items for select Filter column in dataTable?
I have a column with select filter, i need to add addition elements here for example after sending other forms that add new item to table



  • grid.getFilter(columnId) will return a filter object, if you are using a richselect you can use something like next

    var list = grid.getFilter(columnId).getList();
    //list is an instance of webix.ui.list
  • How can i do this if i use serverSelectFilter?

  • edited August 2015

    No, this approach can be applied to serverSelectFilter (and selectFilter as well) as they are created in a different way. These filters are based on HTML < select > tag, so you need to rerender the grid columns to reload the options dynamically:

    var columns = grid.config.columns;
    columns[2].options = [1, 2, 3]; //defining new options
    grid.refreshColumns(columns); //rerendering
  • Apparently, this doesn't work for grouped columns because grid.config.columns just doesn't list them.

  • So, does anybody know a solution which works on ANY column?

  • I've finally figured this out by myself. Here's what you need to do. First of all, in your configuration add a collection consisting of only one, empty, option, like:

            id: "my_column",
            options: [{id: '', value: ""}],

    Then, once you've got actual data you do the following


    That's it. No need to call grid.refreshColumns.

  • It seems that grid.refreshColumns still needs to be called if the modified column is visible.

  • doesn't work for grouped columns

    Columns which are hidden is not accessible through grid.config.columns, this collection contains only visible columns.

    You can use grid.getColumnConfig(id) to get the column config, it will work for both visible and hidden columns.

  • edited August 2018

    I have the same problem: I want to update my options columns when the user select a cell of column.
    I try to use onItemClick event

    onItemClick:function(id, e, trg){
                            //id.column - column id
                            //id.row - row id
                            //webix.message("Click on row: " + id.row+", column: " + id.column);
                            var richiesta =
                                                azione: 32, 
                            var columns = this.config.columns;
                            var tabella = this;
                            for(var i = 0; i < columns.length; i++){
                                if(columns[i].id == id.column){
                                   tabella.getColumnConfig(id.column).options.parse(webix.ajax().post("Pratica",{jsonStr: JSON.stringify(richiesta)},function(text, data){
                                                            var test = data.json(); 
                                                            return test;

    but it doesn't work. Can someone help me? thanks

  • You need to call refreshColumns from the ajax callback, so it will be called after data really were update ( is async. operation )

  • but it's possible show a loader inside the popup until the ajax return the data?
    somethings like

Sign In or Register to comment.