From my test, the code will be the same, adding WebGrid filter to FilteredColumns collection. However, if you are using WebValueList, the filter text will be the value of the DataValueField you assign in the WebValueList.

I have applied filter to a valuelist(dropdown).  Even filter works properly, it is not selected item in a dropdown filter? How to make it selected item?

In order to show the filter text for dropdownlist when you are filtering programmatically you will need to set the filter text manually in the corresponding filter row cell.

Here is a snippet for such scenario, the value of the filter is 2 while the filter text is Interest 1 and the filtered cell is the fourth cell in the WebGrid:

function FilterGrid() 
{
    var grid = ISGetObject("wgTest");

    var newFilter = new WebGridFilter(); // create new Filter configuration
    newFilter.ColumnMember = "Interest";
    newFilter.FilterType = "EqualTo";
    newFilter.FilterText = "2";

    grid.RootTable.FilteredColumns.Add(newFilter);
    grid.RootTable.FilteredColumns.Add(newFilter2);
    grid.RootTable.UpdateUI();
    grid.Refresh(); // apply changes

    var colHeaderRows = grid.RootTable.GetElement(WG40.COLHEADER, WG40.HTMLROW).getElementsByTagName("tr");
    for(var i = 0; i < colHeaderRows.length; i++)
    {
        var colHeader = colHeaderRows[i];
        if (colHeader.getAttribute("type") == "FilterRow") 
        {
            colHeader.getElementsByTagName("td")[4].getElementsByTagName("span")[0].innerHTML = "Interest 1";

        }
    }
}