How to change the data-source for a table on dropdown-list change

Question

I just can't find any examples that can help me. I have a drop-down list of customers and a table which displays services/products a customer provides. On page load the ddl is set to customer 0 and that customer's data is displayed in the table. I now need to changed the data-source and refresh the table when the drop-down is changed.

The main bits of my code are...

 <div class="card-body">
        <div class="row">
            <div class="col-4">
                <lable for="customerFilter" class="control-label">Customer Filter: </lable>
            </div>
            <div class="col-8">
                <input id="customerFilter" class="form-control" />
            </div>
        </div>

        <div id="toolbar">
            <div class="alert alert-info">You can refine this list by entering an additional filter in the search box on the right. Any text you type will filter the list based on any of the fields containing the text typed.</div>
        </div>
        <div>
            <table id="table"
                   data-classes="table table-hover table-condensed"
                   data-striped="true"
                   data-toolbar="#toolbar"
                   data-pagination="true"
                   data-click-to-select="true"
                   data-search="true"
                   data-show-export="true"
                   data-show-pagination-switch="true"
                   data-show-toggle="true"
                   data-show-columns="true"
                   data-url='@Url.Content("~/SSTCodes/GetSSTCodesByCustomer?CustomerID=0")'>
                <thead>
                    <tr>
                        <th data-field="sstID" data-formatter="btnViewFormatter" data-sortable="true">ID</th>
                        <th data-field="sstRU" data-sortable="true" data-formatter="sstFormatter">Recoverability</th>
                        <th data-field="sstProductCode" data-sortable="true">Product Code</th>
                        <th data-field="sstProductName" data-sortable="true">Product Name</th>
                        <th data-field="sstStockLevel" data-formatter="lowStockFormatter">Stock Level</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">

    cData = @Html.Raw(ViewData("Customers"));

    $("#customerFilter").kendoComboBox({
        dataTextField: "Text",
        dataValueField: "Value",
        change: customerFilterChanged,
        dataSource: cData,
        filter: 'contains'
    });

    function customerFilterChanged() {
        // NEED TO CHANGE THE DATASOURCE Url
        var customer = this.value()
        var url = '@Url.Content("~/SSTCodes/GetSSTCodesByCustomer?CustomerID=")' + customer;
        // NEED TO SET THIS AS THE TABLES data-url AND REFRESH THE DATASOURCE....
    }

    var $table = $('#table');

    function btnViewFormatter(value) {
        return '<a class="btn btn-primary btn-sm" href="@Url.Content("~/SSTCodes/Edit?id=")' + value + '">' + value + '</a>';
    }
    
    function sstFormatter(value) {
        //Removed for clarity
        Return value
    }
    
    function lowStockFormatter(value) {
        //Removed for clarity
        Return value
    }

    function getSelectedRow() {
        var index = $table.find('tr.success').data('index');
        return $table.bootstrapTable('getData')[index];
    }

    $(function () {

        $table.bootstrapTable({
            fixedColumns:    true,
            fixedNumber: 1,
            exportDataType:"all",
            exportTypes:['csv', 'txt', 'xlsx']
        });

        $table.on('click-row.bs.table', function (e, row, $element) {
            $('.success').removeClass('success');
            $($element).addClass('success');
        });

        $table.on('dbl-click-row.bs.table', function (e, row, $element) {
            var url = '@Url.Content("~/SSTCodes/Edit?id=")' + getSelectedRow().sstID;
            window.open(url, '_self');
        })

    });

</script>

The function customerFilterChanged is where I need help.

Answer 1

I have changed my approach...

The customerFilterChange function now just redirects the page

function customerFilterChanged() {
    window.location.href = "@Url.Content("~/SSTCodes/Index?id=")" + this.value();
}

The controller has been amended so that it has an optional id...

Function Index(Optional id As Integer = 0) As ActionResult

        If IsNothing(id) Then
            ViewData("CustomerID") = 0
        Else
            ViewData("CustomerID") = id
        End If

        ViewData("Customers") = Newtonsoft.Json.JsonConvert.SerializeObject(CustomerModel.CustomerDDLList.GetAllCustomers())
        Return View()

    End Function

And the data-url value for the table is now

data-url='@Url.Content("~/SSTCodes/GetSSTCodesByCustomer?CustomerID=") + @ViewData("CustomerID")' >

Job done...