Cannot Pass "data" to the Kendo DataSource

2 posts, 1 answers
  1. Jason
    Jason avatar
    1 posts
    Member since:
    Jul 2012

    Posted 30 Mar Link to this post

    I am trying to pass the value of the textbox into my datasource so I can pre-filter my AJAX result set. The following code always gives me an empty string for "issueid". The values I am passing for "token" and "rnd" work just fine. Debugging in the console for "$("#kAutoDuplicateId").val()" reveals the textbox value just fine as well.

    <input id="kAutoDuplicateId" style="width: 500px;" />
    <script type="text/javascript">
    $(document).ready(function () {
        $("#kAutoDuplicateId").kendoAutoComplete({
            minLength: 1,
            dataTextField: "Id",
            template: 'Service Request ID: #: data.Id # - #: data.RequestType #',
            filter: "startswith",
            dataSource: {
                transport: {
                    read: {
                        type: 'POST',
                        url: '/pages/ajax/searchreports.ashx',
                        dataType: "json",
                        data: {
                            issueid: $("#kAutoDuplicateId").val(),
                            token: $('#hdnCsrfToken').val(),
                            rnd: Math.random()
                        }
                    }
                },
                pageSize: 5
            },
            placeholder: 'Enter the ID...'
        });
    });
    </script>
  2. Answer
    Nencho
    Admin
    Nencho avatar
    1645 posts

    Posted 03 Apr Link to this post

    Hello Jason,

    I would suggest you to use a function to return the parameters to the data object, hence, pass them to the method in your handler. This approach is described in our documentation article below:

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.data


    Please consider the below implementation:

    data: function () {
        var autoCompleteText = $("#kAutoDuplicateId").val();
        var hndFieldValue = $('#AutoCompleteValue').val();
        return {
            issueid: autoCompleteText,
            token: hndFieldValue,
            rnd: "1"
        };
     
    }

    Hope this would help.

    Regards,
    Nencho
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top