This is a migrated thread and some comments may be shown as answers.

Filter data in grid

2 Answers 55 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Khiem
Top achievements
Rank 1
Khiem asked on 24 Jun 2014, 09:12 AM
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 :)






2 Answers, 1 is accepted

Sort by
0
Khiem
Top achievements
Rank 1
answered on 24 Jun 2014, 09:15 AM
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>
0
Petur Subev
Telerik team
answered on 26 Jun 2014, 08:45 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Khiem
Top achievements
Rank 1
Answers by
Khiem
Top achievements
Rank 1
Petur Subev
Telerik team
Share this question
or