JQuery Kendo DropDownList - How to pass search criteria to MVC action

6 posts, 0 answers
  1. David
    David avatar
    3 posts
    Member since:
    Sep 2013

    Posted 27 Oct 2017 Link to this post

    I'm kind of new to JQuery, Json, MVC and all so my problem is probably simple to fix but for some reason, I can't seems to find the answer.

    I'm trying to use the Kendo DropDownList to call an MVC action that takes a parameters and sends a query to an ElasticSearch server. So far I have this code :

    $('#myInput').kendoDropDownList({
        template: $("#inputTemplate").html(),
        dataValueField: 'Id',
        dataTextField: 'FullName',
        filter: 'contains',
        minLength: 3,
        dataSource: {
            serverFiltering: true,
                transport: {
                    read: {
                        url: '@(Url.Action("ElasticSearch", "Participant"))',
                        dataType: 'json',
                        contentType:'application/json; charset=utf-8',
                        data:  {
                            critere: 'bob'
                        }
                    }
               }

          }
    });

     

    This is actually working .... if I only want to search for "bob". But I can't figure out how to send the text from the seach field in the dropdownlist each time that I type something.

    What am I missing here?

  2. David
    David avatar
    3 posts
    Member since:
    Sep 2013

    Posted 27 Oct 2017 in reply to David Link to this post

    Just to clarify, I wan't to change "critere: 'bob'" in the exemple above by something like "critere: $("#myInput").data("kendoDropDownList").value()" but it doesn't seems to work...
  3. David
    David avatar
    3 posts
    Member since:
    Sep 2013

    Posted 27 Oct 2017 in reply to David Link to this post

    I'm an idiot ... a closer look to the documentation gave me the answer. I don't know why I didn't saw that in the first place. Simple as that :

    data: {
        critere: function(){
            return $('#myInput').data('kendoDropDownList').filterInput.val();
        }
    }
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2079 posts

    Posted 31 Oct 2017 Link to this post

    Hello David,

    The approach you have found is correct. The DataSource's transport.read.data configuration option accepts either object or function as a parameter.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 29 Feb in reply to Ivan Danchev Link to this post

    Still not working for me, though. I have a value from model, when the user clicks Edit, the value is passed to the template.. The template has dropdown, but the dropdown does not filter instead it display first item in the dropdownlist.
  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2079 posts

    Posted 02 Mar Link to this post

    Neil,

    Based on the scenario you describe, the behavior you experience seems more related to properly configuring the Grid, in order to be able to use its editing functionality, rather than the original issue about passing data with the DropDownList DataSource data function. Thus, open a new thread in the Kendo UI (or UI for ASP.NET MVC/Core if you are using the helpers) Grid's forum section, and provide more details on your scenario (e.g. the template and the Grid's declaration). This will help us identify what could be behind the exhibited behavior.

    Regards,
    Ivan Danchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top