Everything Works with the exception of Filtering

[bjswick33]

Hello All!

I have setup a page that uses the Kendo UI Grid (code attached below).  Everything seems to be working fine with the exception of filtering.  I've looked at the documentation and browsed through the forums, but must have completely missed the answer.  Can anyone take a look and offer any help?  Thanks for your time in advance!

Brun

chtml code

01.@using (Ajax.BeginForm("AddCurriculum", "Home", new { @personID = ViewBag.UserID }, new AjaxOptions
02.{
03.    HttpMethod = "Post",
04.    InsertionMode = InsertionMode.Replace,
05.    UpdateTargetId = "PersonCurriculum",
06.    OnSuccess = "resetAddCurriculum",
07.    OnComplete = "closeAddCurriculum"
08.}))
09.{
10.    <!-- Modal -->
11.    <div class="modal fade" id="addCurriculum" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
12.        <div class="modal-dialog" style="width: 1500px; height: 600px;">
13.            <div class="modal-content">
14.                <div class="modal-header">
15.                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
16.                    <h4 class="modal-title">Add Curriculum</h4>
17.                </div>
18.                <div class="modal-body">
19.                    @(Html.Kendo().Grid<NCHTraining.Models.CourseSchedule>()
20.                        .Name("courseSchedules")
21.                        .Columns(columns =>
22.                            {
23.                                columns.Bound(c => c.ID)
24.                                            .ClientTemplate("<button name=\"btnAddCurriculum\" type=\"submit\" class=\"btn btn-primary\" value=\"#=ID#\">Add</button>")
25.                                            .HtmlAttributes(new { style = "text-align:center; width:100px;" })
26.                                            .Title("")
27.                                            .Sortable(false)
28.                                            .Filterable(false);
29.                                columns.Bound(c => c.Course.Name).Filterable(true);
30.                                columns.Bound(c => c.StartDateTime)
31.                                            .Format("{0: MM/dd/yyyy}")
32.                                            .HeaderHtmlAttributes(new { style = "text-align:center;" })
33.                                            .HtmlAttributes(new { style = "text-align:center; width:100px;" })
34.                                            .Title("Start Date")
35.                                            .Filterable(false);
36.                                columns.Bound(c => c.StartDateTime)
37.                                            .Format("{0: hh:mm:ss tt}")
38.                                            .HeaderHtmlAttributes(new { style = "text-align:center;" })
39.                                            .HtmlAttributes(new { style = "text-align:center; width:100px;" })
40.                                            .Title("Start Time")
41.                                            .Sortable(false)
42.                                            .Filterable(false);
43.                                columns.Bound(c => c.EndDateTime)
44.                                            .Format("{0: hh:mm:ss tt}")
45.                                            .HeaderHtmlAttributes(new { style = "text-align:center;" })
46.                                            .HtmlAttributes(new { style = "text-align:center; width:100px;" })
47.                                            .Title("End Time")
48.                                            .Sortable(false)
49.                                            .Filterable(false);
50.                                columns.Bound(c => c.AvailableSeats)
51.                                            .HeaderHtmlAttributes(new { style = "text-align:center;" })
52.                                            .HtmlAttributes(new { style = "text-align:center; width:100px;" })
53.                                            .Title("Seats Remaining")
54.                                            .Filterable(false);
55.                            })
56.                        .Pageable()
57.                        .Sortable()
58.                        .Filterable()
59.                        .DataSource(dataSource => dataSource
60.                            .Ajax()
61.                            .PageSize(10)
62.                            .Sort(sort => sort.Add("StartDateTime").Ascending())
63.                            .Read(read => read.Action("GetCourseSchedules", "Home", new { @personID = ViewBag.UserID }))
64.                        )
65.                    )
66.                </div>
67.                <div class="modal-footer">
68.                    <button id="btnCloseAddCurriculum" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
69.                </div>
70.            </div>
71.            <!-- /.modal-content -->
72.        </div>
73.        <!-- /.modal-dialog -->
74.    </div>
75.    <!-- /.modal -->
76.}
77.
78.<script>
79.    function resetAddCurriculum(context) {
80.        // Get grid, set to page 1, and refresh data
81.        var grid = $('#courseSchedules').data('kendoGrid');
82.        grid.dataSource.page(1);
83.        grid.dataSource.read();
84.    }
85.
86.    function closeAddCurriculum(context) {
87.        // Close modal
88.        $('#btnCloseAddCurriculum').click();
89.    }
90.</script>

controller code

01.public JsonResult GetCourseSchedules([DataSourceRequest]DataSourceRequest request, int personID)
02.        {
03.            using (NCHTrainingDataContext db = new NCHTrainingDataContext())
04.            {
05.                // Get the persons curriculum
06.                var personCurriculumIDs = GetPersonCurriculum(personID).Select(pc => pc.CourseScheduleID);
07.
08.                // Get the list of available cousre schedules
09.                IQueryable<CourseSchedule> courseSchedules = db.CourseSchedule.Where(c => c.StartDateTime > DateTime.Now
10.                                                                                            && c.AvailableSeats > 0
11.                                                                                            && !personCurriculumIDs.Contains(c.ID))
12.                                                                    .Include(c => c.Course)
13.                                                                    .Include(c => c.Course.CourseLocation)
14.                                                                    .Include(c => c.Course.CourseType);
15.
16.                return Json(courseSchedules.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
17.            }
18.        }

[Vladimir Iliev]

Hi Brun,

 
I tried to reproduce the problem locally but to no avail – everything is working as expected on our side. Could you please provide runable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

Regards,
Vladimir Iliev
Telerik

[bjswick33]

Vladimir,

Thanks for responding to the post.  I was also able to get it working, but only if I remove the code for the bootstrap modal.  Did you test the code after opening it in the modal?  I guess if you render the view from the index.cshtml

<!-- Render the Add Curriculum modal -->
@{ Html.RenderPartial("_AddCurriculum"); }

 _AddCurriculum is a partial view that is the code in my original post.  It's rendered on the index and the button code below is used to open it.  Once it's open the filter stops working.

<a data-toggle="modal" href="#addCurriculum" class="btn btn-default btn-xs pull-right">Add Curriculum</a>

[Vladimir Iliev]

Hi Brun,

 
Please note that I tested the Grid without the bootstrap modal - could you please send us a small isolated project that reproduces the issue as from the current information we can only guess what is the exact reason for current behavior? 

Kind Regards,
Vladimir Iliev
Telerik

[bjswick33]

Vladimir,

After further research I found that the bootstrap modal prevents the filter from working.  After removing the modal and moving to a Kendo UI Window everything started working correctly.  There are a few posts in the forums and the web talking about this issue, but I looked into the window and really liked a few of the features so I move in that direction.  So it looks like the modal was the issue.

Thanks!
Brun

[Joy]

Hi Brun,

I am having the same issue with kendo grid filtering. It appears to me that bootstrap modal somehow prevents filter text input. I have to display kendo grid in modal that's the requirement. Would appreciate if you can post some hint on how to solve this issue.

Thanks.

Joy

[bjswick33]

Joy,

Sorry for the late reply, but what I did was I used a Kendo UI Window instead of the modal.  So instead of adding a modal to my partial and placing my grid inside it my partial view just contains the grid.  On my index page I added a Kindow UI Window and the content of that window is my partial with the grid.  A button will open and center the grid and it works just like a modal.  Here is some code and I hope this helps!

This is the window code in my index.html page

 

<!-- Render the Add Curriculum window -->
@(Html.Kendo().Window().Name("winAddCurriculum").Title("Add Curriculum")
    .Content(@<text>@Html.Partial("_AddCurriculum")</text>)
    .Draggable()
    .Resizable()
    .Actions(actions => actions.Pin().Maximize().Close())
    .Visible(false)
    .Modal(true)
)

This is the javascript in my page where the button to open the window exists (My index contains multiple partials).

 

// On document ready set click events for buttons
    $(document).ready(function () {
        // Click event for Add Curriculum button
        $("#btnOpenWinAddCurriculum").click(function (e) {
            openAddCurriculumWindow(null);
        });

        // Click event for Add Course button
        $("#btnOpenWinAddCompletedCourse").click(function (e) {
            $("#winAddCompletedCourse").data("kendoWindow").open().center();
        });
    });

    function openAddCurriculumWindow(courseNameFilter) {
        // Get the grid that needs the filter
        var grid = $('#courseSchedules');

        if (courseNameFilter == null) {
            // Clear filters
            grid.data("kendoGrid").dataSource.filter([]);
        } else {
            // Add or update filter
            // ***This function is located on index.html***
            updateGridSearchFilters(grid, 'Course.PrimaryCourseAlias.Name', 'eq', courseNameFilter);
        }

        // Open window and center
        $("#winAddCurriculum").data("kendoWindow").open().center();
    }

This is my partial with the grid.

@using (Ajax.BeginForm("AddCurriculum", "Home", new { @personID = ViewBag.PersonID }, new AjaxOptions
{
    HttpMethod = "Post",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "PersonCurriculumAndCourses",
    OnSuccess = "resetAddCurriculum",
    OnComplete = "closeAddCurriculum"
}))
{
    @(Html.Kendo().Grid<NCHTraining.Models.CourseSchedule>().Name("courseSchedules")
        .Columns(columns =>
            {
                columns.Bound(c => c.ID)
                            .ClientTemplate("<button name=\"btnAddCurriculum\" type=\"submit\" class=\"btn btn-primary\" value=\"#=ID#\">Add</button>")
                            .HtmlAttributes(new { style = "text-align:center;" })
                            .Title("")
                            .Width(100)
                            .Sortable(false)
                            .Filterable(false);
                columns.Bound(c => c.Course.PrimaryCourseAlias.Name);
                columns.Bound(c => c.CourseScheduleLocation.FullLocationName)
                         .HeaderHtmlAttributes(new { style = "text-align:center;" })
                         .HtmlAttributes(new { style = "text-align:left;" })
                         .Title("Location")
                         .Width(300)
                         .Filterable(false)
                         .Encoded(false);
                columns.Bound(c => c.StartDateTime)
                            .Format("{0: MM/dd/yyyy}")
                            .HeaderHtmlAttributes(new { style = "text-align:center;" })
                            .HtmlAttributes(new { style = "text-align:center;" })
                            .Title("Start Date")
                            .Width(100)
                            .Filterable(false);
                columns.Bound(c => c.StartDateTime)
                            .Format("{0: hh:mm:ss tt}")
                            .HeaderHtmlAttributes(new { style = "text-align:center;" })
                            .HtmlAttributes(new { style = "text-align:center;" })
                            .Title("Start Time")
                            .Width(100)
                            .Sortable(false)
                            .Filterable(false);
                columns.Bound(c => c.EndDateTime)
                            .Format("{0: hh:mm:ss tt}")
                            .HeaderHtmlAttributes(new { style = "text-align:center;" })
                            .HtmlAttributes(new { style = "text-align:center;" })
                            .Title("End Time")
                            .Width(100)
                            .Sortable(false)
                            .Filterable(false);
                columns.Bound(c => c.AvailableSeats)
                            .HeaderHtmlAttributes(new { style = "text-align:center;" })
                            .HtmlAttributes(new { style = "text-align:center;" })
                            .Title("Seats Remaining")
                            .Width(100)
                            .Filterable(false);
                columns.Bound(c => c.Course.CourseType.Type)
                            .HeaderHtmlAttributes(new { style = "text-align:center;" })
                            .HtmlAttributes(new { style = "text-align:center;" })
                            .Title("Course Type")
                            .Width(100)
                            .Sortable(true)
                            .Filterable(true);

                //columns.Bound(c => c.Course.CourseLocation.Name)
                //            .HeaderHtmlAttributes(new { style = "text-align:center;" })
                //            .HtmlAttributes(new { style = "text-align:center;" })
                //            .Title("Location")
                //            .Width(100)
                //            .Filterable(false);
            })
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true))
        .Sortable()
        .Filterable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Sort(sort => {
                sort.Add("Course.PrimaryCourseAlias.Name").Ascending();
                sort.Add("StartDateTime").Ascending();
            })
            .Read(read => read.Action("GetCourseSchedules", "Home", new { @personID = ViewBag.PersonID }))
        )

    )
    <div>
        <button type="button" class="btn btn-default" onclick="closeAddCurriculum(this);">Cancel</button>
    </div>
}

<script>
    function resetAddCurriculum(context) {
        // Get grid, set to page 1, refresh data, and clear filters
        var grid = $('#courseSchedules').data('kendoGrid');
        grid.dataSource.page(1);
        grid.dataSource.read();
        grid.dataSource.filter([]);
    }

    function closeAddCurriculum(context) {
        // Close window
        $('#winAddCurriculum').data("kendoWindow").close();
    }
</script>