I am trying to figure out how to get a date column to sort when the grid was initialized from an html table. I see from the demos that I would have added formatting to the columns, but I don't see how to add the format when initializing from HTML.
Some things to take into consideration in trying to answert this question:
The size of the table, and number of columns, is created dynamically in a JSP using jstl. This means that a row might be date, and it might not be.
The formatting of the date is always "ddMMMyyyy", all upper case.
Here is an example of what the html might look like:
<tr>
<td><div>01JAN2013</div></td>
</tr>
Notice that it has a div in it, which is used for cell scrolling, should the value not be a date, and have large amounts of text in it.
The jstl for the header of the date might be something like this:
<c:forEach var="column" items="${row}">
<c:choose>
<c:when test="${column.type eq "date"}" >
<th <%---Add some kind fo attribute here to tell kendo this is a date?---%>My Date</th>
</c:when>
<c:otherwise>
<%-- Do some other stuff, without date formatting --%>
</c:otherwise>
</c:choose>
</c:forEach>
I suppose I could try to build the JavaScript object dynamically, but I really dislike the idea of building JavaScript objects with jstl, and I'm not certain how that might conflict with initializing from html.
I'm working with some legacy data and services, and so I have no choice as to how the data is returned to the JSP.
Some things to take into consideration in trying to answert this question:
The size of the table, and number of columns, is created dynamically in a JSP using jstl. This means that a row might be date, and it might not be.
The formatting of the date is always "ddMMMyyyy", all upper case.
Here is an example of what the html might look like:
<tr>
<td><div>01JAN2013</div></td>
</tr>
Notice that it has a div in it, which is used for cell scrolling, should the value not be a date, and have large amounts of text in it.
The jstl for the header of the date might be something like this:
<c:forEach var="column" items="${row}">
<c:choose>
<c:when test="${column.type eq "date"}" >
<th <%---Add some kind fo attribute here to tell kendo this is a date?---%>My Date</th>
</c:when>
<c:otherwise>
<%-- Do some other stuff, without date formatting --%>
</c:otherwise>
</c:choose>
</c:forEach>
I suppose I could try to build the JavaScript object dynamically, but I really dislike the idea of building JavaScript objects with jstl, and I'm not certain how that might conflict with initializing from html.
I'm working with some legacy data and services, and so I have no choice as to how the data is returned to the JSP.
1 Answer, 1 is accepted
0
Hello Keith,
The sorting functionality works with underlying dataSource items. In order to get a date column to sort as expected when the grid was initialized from an html table, you should define custom parse function that will transform HTML string value into valid JavaScript Date object. For your convenience I prepared a small example:
Regards,
Alexander Valchev
Telerik
The sorting functionality works with underlying dataSource items. In order to get a date column to sort as expected when the grid was initialized from an html table, you should define custom parse function that will transform HTML string value into valid JavaScript Date object. For your convenience I prepared a small example:
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!