Everything Works with the exception of Filtering

7 posts, 1 answers
  1. bjswick33
    bjswick33 avatar
    9 posts
    Member since:
    Jun 2011

    Posted 04 Oct 2013 Link to this post

    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.        }
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2199 posts

    Posted 08 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. bjswick33
    bjswick33 avatar
    9 posts
    Member since:
    Jun 2011

    Posted 08 Oct 2013 Link to this post

    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>
  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2199 posts

    Posted 10 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Answer
    bjswick33
    bjswick33 avatar
    9 posts
    Member since:
    Jun 2011

    Posted 10 Oct 2013 Link to this post

    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
  6. Joy
    Joy avatar
    5 posts
    Member since:
    May 2014

    Posted 13 Jul 2015 in reply to bjswick33 Link to this post

    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

  7. bjswick33
    bjswick33 avatar
    9 posts
    Member since:
    Jun 2011

    Posted 15 Jul 2015 in reply to Joy Link to this post

    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>

Back to Top