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

Error with Datepicker in Grid filter row

5 Answers 408 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 10 Nov 2015, 09:44 PM

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);
                    }
                });

 

5 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 12 Nov 2015, 01:44 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Michael
Top achievements
Rank 1
answered on 10 Dec 2015, 07:56 PM

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
                });
            }
        }
    }
}

0
Rosen
Telerik team
answered on 11 Dec 2015, 09:15 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Michael
Top achievements
Rank 1
answered on 11 Dec 2015, 04:13 PM

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.

0
Rosen
Telerik team
answered on 14 Dec 2015, 07:49 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Michael
Top achievements
Rank 1
Share this question
or