Inline Grid auto search get value in javascript

[Merve]

This is my func userNameAutoCompleteEditor

function userNameAutoCompleteEditor(container, options) {
    $('<input required data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoAutoComplete({
            dataTextField: "UserName",
            dataValueField: "UserId",
            filter: "contains",
            minLength: 3,
            //_readMethod: '../Warehouse/SearchUser',
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: '../Warehouse/SearchUser',
                        //data: {
                        //    q: function () {
                        //        return $("#autoComplete").data("kendoAutoComplete").value();
                        //    },
                        //    maxRows: 10,
                        //    username: "demo"
                        //}
                    }
                },
            }),
        });
}

 

    "" " I want to Catch autosearc value go connroller and come back with user name contains value just give me way to take value PLEASE!!!!""

This is my grid column area

grid._columns.push(grid.GridColumn('Id', null, '200px', null, null, null, null, null, null, null, true));
grid._columns.push(grid.GridColumn('User', 'User', '200px', null, "#=User.UserName#", null, null, null, null, null, null, null, null, null, userNameAutoCompleteEditor));
grid._columns.push(grid.GridColumn(null, ' ', '200px', { style: 'text-align:right' }, null, null, null, null, null, null, null, null, null, ['edit', 'destroy']));

[Aleksandar]

Hello Merve,

You can configure the AutoComplete's dataSource to use serverFiltering, as demonstrated in this demo. In this scenario the definition would look like the below:

function userNameAutoCompleteEditor(container, options) {
    $('<input required data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoAutoComplete({        
            dataTextField: "UserName",
            dataValueField: "UserId",
            filter: "contains",
            minLength: 3,
            //_readMethod: '../Warehouse/SearchUser',
            dataSource: new kendo.data.DataSource({
                serverFiltering:true,
                transport: {
                    read: {
                        url: '../Warehouse/SearchUser',
                        //data: {
                        //    q: function () {
                        //        return $("#autoComplete").data("kendoAutoComplete").value();
                        //    },
                        //    maxRows: 10,
                        //    username: "demo"
                        //}
                    }
                },
            }),
        });
}

By default, the filter is sent to the server following jQuery conventions, for example:

filter[logic]: and
filter[filters][0][field]: UserName
filter[filters][0][operator]: contains
filter[filters][0][value]: Jane //value that the user has entered

Note also that the AutoComplete does not provide a dataValueField configuration option. The AutoComplete works with a single data item field. This means that the selected value is directly set to the model field. You can read more about using the AutoComplete as a custom editor in this article.

Regards,
Aleksandar
Progress Telerik

[Merve]

I try to like this ı never catch my searc text value controller.My controller Always take null 

[Merve]

and my datasource must fill ı am go searc ı am came but ı never see examole like this allways take datasource

[Aleksandar]

Hello,

You can get the filter value from the HTTP Context:

var userInput = HttpContext.Request.QueryString.Get(0);

You can also get all key/value pairs of the query string if needed:

var keys = HttpContext.Request.QueryString.AllKeys;
var values = new List<string>();
for (int i = 0; i < keys.Length; i++)
{
      values.Add(HttpContext.Request.QueryString.Get(i));
}

Regards,
Aleksandar
Progress Telerik

[Merve]

Am I write this code my controller or my javascript code ?

And ı try to like this.And my browser give error HttpContextnot define.What ı missing here?

01.var userInput = HttpContext.Request.QueryString.Get(0);
02.
03.function userNameAutoCompleteEditor(container,options) {
04.
05.    $('<input id="UserId" name="UserId">')
06.        .appendTo(container)
07.        .kendoComboBox({
08.            autoBind: false,
09.            dataTextField: "UserName",
10.            dataValueField: "UserId",
11.            filter: "contains",
12.            minLength: 3,
13.            valuePrimitive: true,
14.            dataSource: new kendo.data.DataSource({
15.                contentType: "application/json; charset=utf-8",
16.                serverFiltering: true,
17.                transport: {
18.                    read: {
19.                        url: '../Warehouse/SearchUser' ,
20.                        data: function () {
21.                            var UserSearcText = userInput ;
22.                            debugger;
23.                            return UserSearcText;
24.
25.                        }
26.
27.                    }
28.                },
29.            }),
30.        });
31.}

[Aleksandar]

Hello Merve,

I apologize if I was not clear in my previous response. The code provided should be used in the Controller's action method. Based on the details provided I understood you need to get the user input in the corresponding Action method, responsible for the filtering.

Below is a possible approach for implementing the suggestion:

public JsonResult SearchUser()
{
     var userInput = HttpContext.Request.QueryString.Get(0);      
     var users = GetAllUsers(); 
     
     if (!string.IsNullOrEmpty(userInput))
     {
         users = users.Where(u => u.UserName.Contains(userInput));
      }

     return Json(users.ToList());           
}

Please elaborate more on the scenario you have in case I have misunderstood your request.

Regards,
Aleksandar
Progress Telerik

[Merve]

ı solved my problem this my code ...

 

 

01.function userNameEditor(container, options) {
02.    debugger;
03.    var gridDataSource = new kendo.data.DataSource({
04.        transport: {
05.            read: {
06.                url: '../Warehouse/SearchUser',
07.                dataType: "json"
08.            },
09.            success: function(e) {
10.                debugger;
11.            },
12.            error: function (e) {
13.                debugger;
14.            }
15.        }
16.    });
17.        var cmb=$('<input name="' + options.field + '"/>')
18.        .appendTo(container)
19.        .kendoComboBox({
20.            autoBind: false,
21.            dataTextField: "UserFullName",
22.            dataValueField: "Id",
23.            filter: "contains",
24.            minLength: 3,
25.            dataSource: gridDataSource,
26.            filtering: function (e) {
27.
28.                var filter = e.filter;
29.                gridDataSource.read({ userSearchText: filter.value });
30.                //dataSource.filter({ userSearchText: filter.value });
31.            },
32.            dataBound: function (e) {
33.                debugger;
34.                var equipmentData = e.sender.dataSource.data();
35.
36.
37.                        $.each(equipmentData, function (index, selectedEquipmentData) {
38.                                var dataItem = e.sender.dataSource.at(index);
39.
40.                        });
41.            },
42.            select: function(e) {
43.                debugger;
44.                this.refresh();
45.            },
46.            complete: function(e) {
47.                debugger;
48.            },
49.            error: function(e) {
50.                debugger;
51.            }
52.        }).data('kendoComboBox');
53.    cmb.refresh();

[Merve]

I write this but this work autocomplete to.

[Aleksandar]

Hi Merve,

Thank you for sharing the solution to the issue with the community. I am sure someone will benefit from it.

Regards,
Aleksandar
Progress Telerik