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

Row template + filtering

3 Answers 185 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pascal
Top achievements
Rank 1
Pascal asked on 29 Jul 2013, 07:58 AM
Hello, i'm new, how can i enable Header filtering in a Row Template grid.


I'm using, an exemple i found in this forum ....

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
            <div id="example" class="k-content">
            <table id="grid">
                <colgroup>
                    <col class="photo" />
                    <col class="details"/>
                    <col/>
                </colgroup>
                <thead>
                    <tr>
                        <th>
                            Picture
                        </th>
                        <th>
                            Details
                        </th >
                        <th data-field="EmployeeID">
                            ID
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="3"></td>
                    </tr>
                </tbody>
            </table>
            <script id="rowTemplate" type="text/x-kendo-tmpl">
           <tr>
           <td class="photo">
                       image
           </td>
           <td class="details">
          <span class="title">#: Title #</span>
          <span class="description">Name : #: FirstName# #: LastName#</span>
          <span class="description">Country : #: Country# </span>
           </td>
           <td class="employeeID">
              #: EmployeeID #
           </td>
          </tr>
            </script>

            <style scoped>
                .photo {
                    width: 140px;                    
                }
                .details {
                    width: 400px;
                }                
                .title {
                    display: block;
                    font-size: 1.6em; 
                }
                .description {
                    display: block;
                    padding-top: 1.6em;
                }
                .employeeID {
                    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
                    font-size: 50px;
                    font-weight: bold;
                    color: #898989;
                }
                td.photo, .employeeID {
                    text-align: center;
                }
                .k-grid-header .k-header {
                    padding: 10px 20px;
                }
                .k-grid td {

                }
            </style>
        </div>


</body>
</html>

3 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 30 Jul 2013, 10:43 AM
Hello Pascal,


Here is a short example which demonstrates how to combine filtering and row template. A few things to notice - The table does not contain a thead tag, the Grid has a columns configuration and the dataSource has a schema.model configuration for the fields. The same approach could be used, when the Grid is initialized from a div.

 

Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 2
answered on 08 Jul 2015, 02:05 PM

Dimiter, 

I also have a need to filter on a grid cell that has been created using a row template. In the example you provided the filter only works on the the field on which the column is based (in this example the title and id fields). Is there a way to filter on any/all of the the text in the column cell that was created using the row template?

 

Thanks!

 

John Meyer

0
Dimiter Madjarov
Telerik team
answered on 08 Jul 2015, 02:47 PM

Hello John,

The current requirement is not supported. The dataSource is not aware of the fields that are displayed in the templates. The only field that will be filtered is the one that the column is bound to. If you want, you could implement a custom filtering outside of the Grid and use the filter method of the dataSource API.

Regards,
Dimiter Madjarov
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
Pascal
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
John
Top achievements
Rank 2
Share this question
or