kendo-uikendo-datasourcekendo-listview

DataBound Event of kendo listview loading previous parameters from dataSource


I am working on this search feature which takes input through search box and then passed to kendo dataSource which hits the server and gets the results and renders my list view. Here's the code:

 function searchClick(searchTerm) {

    var searchText = searchTerm;
    if (!searchTerm) {
        return;
    }

    var listView = $("#listView").data("kendoListView");
    if (!listView)
        createUI(searchText);
    else {
        listView.dataSource.read({
            searchTerm: searchText
        });
    }
}

> `function createUI(searchText) {`

    var tmpl = kendo.template($("#template").html());
    var dataSource = new kendo.data.DataSource({
        serverPaging: true,
        schema: {
            data: "ListMedia",
            total: "RowCount",
        },
        transport: {
            read: {
                url: gAppBaseURL + "Search/SearchData",
                type: "GET",
                dataType: "json",
                data: {
                    searchTerm: searchText,
                    pageSize: 25,
                    page: 1
                }
            }
        }

    });

    $("#listView").kendoListView({
        dataSource: dataSource,
        autoBind: false,
        template: tmpl,
        dataBound: function () {
            var ds = $("#listView").data("kendoListView").dataSource;
            if (ds.total() == 0) {
                return;
            }
        }
    });

    var pager = $("#pager").kendoPager({
        dataSource: dataSource,
        autoBind: false,
    }).data("kendoPager");

    return dataSource.read();
}

and it then loads data into my listView and Pager:

Now the Problem is when I do paging, it passes the server my previously typed search value. For example I first typed 'Cat' then it would load results of cat records correctly(on first search), but when I search for dog the results on first page are correct, but when I switch to page two it passes 'Cat' as a parameter to the server which returns the results of a cat. and following is my HTML:

<div class="SearchResultPage">
<input type="text" name="searchTextbox" id="searchTextbox" class="k-textbox" style="width:400px"/>
<button type="submit" id="btn_submitQry" onclick="onClickSearch()"></button>

<script>

    function onClickSearch() {
        var searchTerm = $('#searchTextbox').val();
        if (!searchTerm) {
            searchTerm = "@ViewBag.SearchText";
            $('#searchTextbox').val(searchTerm);
        }

        searchClick(searchTerm); //defined in universalSearch.js file
    }
</script>

Every Time I switch to another page(the second time I search something), it passes the previous search Term to the server.


Solution

  • Your function createUI define read data as constant value from parameter instead of function. Paging in data source will trigger read method, therefore your paging still use previous search term.

    You can make a function like this to make read data get new value(search term).

    function getSearchTerm() {
       return { searchTerm: $("#searchTextbox").val() };
    }
    

    and change your createUI function to be like this

    function createUI() {
        var tmpl = kendo.template($("#template").html()),
            dataSource = new kendo.data.DataSource({
            serverPaging: true,
            pageSize: 25
            schema: {
                data: "ListMedia",
                total: "RowCount",
            },
            transport: {
                read: {
                    url: gAppBaseURL + "Search/SearchData",
                    type: "GET",
                    dataType: "json",
                    data: {
                        searchTerm: getSearchTerm
                    }
                }
            }
        });
    }
    

    Then everytime its doing read, it will run this function to get new value. And your search click should be like this

    function searchClick(searchTerm) {
        var searchText = searchTerm,
            listView = $("#listView").getKendoListView();
    
        if (!searchTerm) return;
    
        if (!listView)
            createUI();
        else {
            listView.dataSource.page(1); // reset paging and do read automatically
        }
    }