Filter data in grid

[Khiem]

Hi telerik team !

I have a problem with event filter data from my textbox like picture below :

If I input " HTML" into textbox => grid will filtering data success but else if I input " html " grid display blank 

Have you any solution for my problem. Thank a lot :)

[Khiem]

my code :

001.<div id="primary_content">
002.        <div>
003.            <table>
004.                <tr>
005.                    <td>@Html.LabelFor(model => model.SearchCategoryName): </td>
006.                    <td>@Html.EditorFor(model => model.SearchCategoryName)</td>
007.                </tr>
008.                <tr>
009.                    <td></td>
010.                    <td><input type="button" id="btnSearch" class="k-button" value="Search" /></td>
011.                </tr>
012.            </table>
013.        </div>
014.        <div id="categories-grid" class="grid"></div>
015.        <script>
016.            $(document).ready(function () {
017.                $("#categories-grid").kendoGrid({
018.                    dataSource: {
019.                        type: "json",
020.                        transport: {
021.                            read: {
022.                                url: "@Html.Raw(Url.Action("List", "Category"))",
023.                                type: "POST",
024.                                dataType: "json",
025.                                data: additionalData
026.                            }
027.                        },
028.                        schema: {
029.                            data: "Data",
030.                            total: "Total",
031.                            errors: "Errors"
032.                        },
033.                        error: function (e) {
034.                            display_kendoui_grid_error(e);
035.                            // Cancel the changes
036.                            this.cancelChanges();
037.                        },
038.                        pageSize: 10,
039.                        serverPaging: true,
040.                        serverFiltering: true,
041.                        serverSorting: true
042.                    },
043.                    pageable: {
044.                        refresh: true
045.                    },
046.                    editable: {
047.                        confirmation: false,
048.                        mode: "inline"
049.                    },
050.                    scrollable: false,
051.                    columns: [{
052.                        field: "Breadcrumb",
053.                        title: "Name",
054.
055.                    }, {
056.                        field: "Published",
057.                        title: "Published",
058.                        width: 150,
059.                        headerAttributes: { style: "text-align:center" },
060.                        attributes: { style: "text-align:center" },
061.                        template: '<img src="@Url.Content("~/Content/admin-themes/images/icons/")active-#=Published#.png" />'
062.                    }, {
063.                        field: "DisplayOrder",
064.                        title: "Display Order",
065.                        headerAttributes: { style: "text-align:center" },
066.                        attributes: { style: "text-align:center" },
067.                        width: 100
068.                    }, {
069.                        width: 100,
070.                        attributes: { style: "text-align:center" },
071.                        template: '<a href="Edit/#=Id#" class="linkAction">Edit</a>'
072.                    }]
073.                });
074.            });
075.        </script>
076.
077.        <script type="text/javascript">
078.            $(document).ready(function () {
079.                //search button
080.                $('#btnSearch').click(function () {
081.                    //search
082.                    var grid = $('#categories-grid').data('kendoGrid');
083.                    grid.dataSource.page(1); //new search. Set page size to 1
084.                    grid.dataSource.read();
085.                    return false;
086.                });
087.
088.                @*$("#@Html.FieldIdFor(model => model.SearchCategoryName)").keydown(function (event) {
089.                    if (event.keyCode == 13) {
090.                        $("#btnSearch").click();
091.                        return false;
092.                    }
093.                });*@
094.            });
095.
096.            function additionalData() {
097.                return {
098.                    SearchCategoryName: $('#@Html.FieldIdFor(model => model.SearchCategoryName)').val()
099.                };
100.            }
101.        </script>
102.    </div>

[Petur Subev]

Hello Khiem,

Based on your code it looks like you are doing your own custom search by sending the value of the SearchCategoryName editor to the server.

Then you need to implement the searching to be case insensitive on the server side. Simply use toLower() on the strings before comparing them.

Kind Regards,
Petur Subev
Telerik