Error with Datepicker in Grid filter row

[Michael]

I have a Grid that I have a filter row on (mode: "row").  All of the filters function correctly except for a column that contains dates.  I have the datepicker showing, however when I select a date from the datepicker nothing happens and I get the following javascript error:

 Uncaught TypeError: Cannot read property 'flatView' of undefined

 Here is my code:

 $("#inbox").kendoGrid({
                    sortable: true,
                    selectable: "row",
                    navigateable: true,
                    height: "99%",
                    filterable: {
                        mode: "row"
                    },
                    schema: {
                        model: {
                            fields: {
                                MessageID: { type: "string" },
                                MessageText: { type: "string" },
                                EventTime: { type: "date" },
                                Subject: { type: "string" },
                                CaseID: { type: "string" },
                                ClaimID: { type: "string" }
                            }
                        }
                    },
                    columns: 
                    [{
                        field: "MessageID"
                    },
                    {
                        field: "MessageText"
                    }, {
                        field: "EventTime",
                        format: "{0:M/d/yyyy}",
                        width: "200px",
                        filterable: {
                            cell: {
                                operator: "contains",
                                showOperators: false,
                                template: function(args) {
                                    args.element.kendoDatePicker({
                                        format: "{0:M/d/yyyy}",
                                        parseFormats: "{0:M/d/yyyy}",
                                        valuePrimitive: true,
                                        dataTextField: "EventTime",
                                        dataValueField: "EventTime"
                                    });
                                    }
                                }
                            }
                        }, {
                            field: "CaseID",
                            width: "200px",
                            filterable: {
                                cell: {
                                    operator: "startswith",
                                    showOperators: false
                                }
                            }
                        }, {
                            field: "ClaimID",
                            width: "200px",
                            filterable: {
                                cell: {
                                    operator: "startswith",
                                    showOperators: false
                                }
                            }
                        }, {
                            field: "Subject",
                            filterable: {
                                cell: {
                                    operator: "contains"
                                }
                            }
                        }],
                    change: function () {
                        var row = this.select();
                        var id = row[0].cells[0].innerText;
                        var message = row[0].cells[1].innerHTML;
                        $("#<%= hdnSelectedMessage.ClientID %>").val(id);
                        $("#<%= lblMessage.ClientID %>").html(message);
                    }
                });

 

[Rosen]

Hello Michael,

The error is caused by incorrect configuration. The DatePicker widget does not have dataTextField nor dataValueField options. Please remove them.

Also the contains operator is only valid for strings and it will not work for dates. Thus, a more appropriate operator should be selected.

Regards,
Rosen
Telerik

 

 

[Michael]

I am now having the issue when I select a date from the datepicker, nothing shows up in the textbox that it is attached to it.  However, the "X" to remove the filter does appear.  My datepicker column is defined as:

 

{
    field: "EventTime",
    format: "{0:M/d/yyyy}",
    width: "200px",
    filterable: {
        cell: {
            operator: "eq",
            showOperators: false,
            template: function(args) {
                args.element.kendoDatePicker({
                    format: "{0:M/d/yyyy}",
                    parseFormats: "{0:M/d/yyyy}",
                    valuePrimitive: true
                });
            }
        }
    }
}

[Rosen]

Hello Michael,

Most probably this behavior is due to incorrect format and parseFormats values. Those settings should contain only the format and not the placeholder.

format: "M/d/yyyy",
parseFormats: "M/d/yyyy",

 

Regards,
Rosen
Telerik

 

 

[Michael]

I have updated the formats, but the problem persists.  The selected date still does not show in the datepickers textbox section, but the button to remove the filter shows.

Here is my complete code:

001.$("#inbox").kendoGrid({
002.    sortable: true,
003.    selectable: "row",
004.    navigateable: true,
005.    height: "99%",
006.    filterable: {
007.        mode: "row"
008.    },
009.    schema: {
010.        model: {
011.            fields: {
012.                MessageID: { type: "string" },
013.                MessageText: { type: "string" },
014.                EventTime: { type: "date" },
015.                Subject: { type: "string" },
016.                CaseID: { type: "string" },
017.                ExamineeName: { type: "string" }
018.            }
019.        }
020.    },
021.    columns:
022.   [{
023.        field: "TimesSent",
024.        width: "50px",
025.        filterable: false,
026.        attributes: {
027.            style: "visibility: hidden;"
028.        }
029.    }, {
030.        field: "MessageID"
031.    },
032.    {
033.        field: "MessageText"
034.    }, {
035.        field: "EventTime",
036.        format: "M/d/yyyy",
037.        width: "200px",
038.        filterable: {
039.            cell: {
040.                operator: "eq",
041.                showOperators: false,
042.                template: function(args) {
043.                    args.element.kendoDatePicker({
044.                        format: "M/d/yyyy",
045.                        parseFormats: "M/d/yyyy"
046.
047.                    });
048.                }
049.            }
050.        }
051.   }, {
052.       field: "Subject",
053.       filterable: {
054.           cell: {
055.               operator: "contains"
056.           }
057.       }
058.   }, {
059.       field: "ExamineeName",
060.       width: "300px",
061.       filterable: {
062.           cell: {
063.               operator: "contains",
064.               showOperators: false
065.           }
066.       }
067.   }, {
068.       field: "CaseID",
069.       width: "200px",
070.       filterable: {
071.           cell: {
072.               operator: "startswith",
073.               showOperators: false
074.           }
075.       }
076.   }
077.],
078.    change: function () {
079.        var row = this.select();
080.        var id = row[0].cells[1].innerHTML;
081.        var message = row[0].cells[2].innerHTML;
082.        $("#<%= hdnSelectedMessage.ClientID %>").val(id);
083.        $("#<%= lblMessage.ClientID %>").html(message);
084.        $.ajax({
085.            type: "POST",
086.            url: "/inbox.ashx",
087.            data: {
088.                messageID: id,
089.                operation: "VIEW"
090.            },
091.            async: true,
092.            success: function () {
093.                row.removeClass("unread");
094.            }
095.        });
096.    },
097.    dataBound: function () {
098.        var grid = this;
099.        grid.tbody.find(">tr").each(function() {
100.            var dataItem = grid.dataItem(this);
101.            if (dataItem.TimesSent == 0) {
102.                $(this).addClass("unread");
103.            }
104.        });
105.    }
106.});
107.
108.var grid = $("#inbox").data("kendoGrid");
109.grid.hideColumn(1);
110.grid.hideColumn(2);

 

Thanks for the assistance.

[Rosen]

Hello Michael,

 

The issue is due to the fact that the schema is not correctly defined. It should be inside the DataSource declaration as this is its correct position.

 

Regards,
Rosen
Telerik