Cannot read property 'dataSource' of undefined at HTMLDocument.eval

4 posts, 0 answers
  1. Vince
    Vince avatar
    13 posts
    Member since:
    Dec 2016

    Posted 19 Jan 2017 Link to this post

    Hi Team,

    When I try to use 

     $(document).ready(function () {
                    $("#grid2").data("kendoGrid").dataSource.filter({ logic: "and", filters: [{ field: "Title", operator: "contains", value: "nurse" }] })
        });

    I got an error of "Cannot read property 'dataSource' of undefined at HTMLDocument.eval".

    The following is my grid:

    @(Html.Kendo().Grid(Model)
            .Name("grid2")
            .Columns(columns =>
            {
                columns.Command(command => command.Custom("Add").Click("AddToTeam")).Width(40);
                columns.Bound(p => p.StaffItem.FullName).Title("Name").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
                columns.Bound(p => p.StaffItem.JobTitleDesc).Title("Title").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));


            })
            .Pageable()
            .Sortable()
            .Filterable(ftb=>ftb
                .Extra(false)
                .Operators(operators => operators
                    .ForString(str => str.Clear()
                     .Contains("Contains")
                        .IsEqualTo("Is equal to")
                        .IsNotEqualTo("Is not equal to")
            )))
            .DataSource(d => d
                .Ajax()
                //.Filter(f=>f.Add(a=>a.StaffItem.JobTitleDesc).Contains("nurse"))
                .ServerOperation(false)
                .PageSize(8)
            )
            .Resizable(resize => resize.Columns(true))
            .Reorderable(reorder => reorder.Columns(true))
        )

  2. Eyup
    Admin
    Eyup avatar
    4085 posts

    Posted 23 Jan 2017 Link to this post

    Hello Vince,

    The error indicates that the following object returns undefined:
    $("#grid2").data("kendoGrid")

    This approach is used to get the Kendo widget object after initialization:
    http://docs.telerik.com/kendo-ui/intro/widget-basics/events-and-methods#event-binding-after-initialization

    Generally, during the $(document).ready() event the grid should have already been initialized. Alternatively, you can also use the dataBound event handler:
    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

    You can track this line to determine the reason for the issue. Check whether the $("#grid2") returns the grid element as expected.

    Basically, if you want to apply a default filter, you can try to use the Filter method directly in the Razor View. Something similar to this:
    http://www.telerik.com/forums/setting-default-filter#S_REO2_SHkWTf16Q6raiNw

    I hope this will prove helpful.

    Regards,
    Eyup
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Vince
    Vince avatar
    13 posts
    Member since:
    Dec 2016

    Posted 23 Jan 2017 Link to this post

    Thanks you . I understand what you said. One more question, how can I get the value in the textbox of a filter? 

    For example, columns.Bound(p => p.StaffItem.JobTitleDesc).Title("Title").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))).

    I want to retrieve the data in the filter each time. (Doesn't matter before clicking filter or after clicking.)

  4. Eyup
    Admin
    Eyup avatar
    4085 posts

    Posted 25 Jan 2017 Link to this post

    Hello Vince,

    Generally, you can access the filter input and use its own events to capture when the value is changed. Another option would be to use the following event handler provided by the grid component:
    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-filter

    Regards,
    Eyup
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top