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

rowTemplate, columnTemplates and flexible columns

3 Answers 284 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Russ
Top achievements
Rank 1
Russ asked on 16 Apr 2013, 03:41 PM
We've been working on protoyping an application and would like to allow the user to have maximum flexibility to hide/unhide columns and perhaps reorder columns.  I'm going to call this column manipulation.

We started out by using columnTemplates to format columns and column manipulation presented no issue.  

However, we also want to be able to mark the entire row of the grid (i.e. when the item the row represents becomes "used") by assigning the whole row a CSS class or style (e.g. "opacity:0.30"), so we switched to a row template so that we could create the <tr> element and set its class according to a data value.  We also created an alternate row template that differs only by adding the k-alt class.  Works well.

However, if we allow the column menu to manipulate the list of columns, the rowTemplate (coded to expect a particular list of columns in a certain order) has a bit of an issue.

Do you have a suggestion for how to handle the whole-row decoration without using a row Template, or how to write a rowTemplate that is aware of the column manipulation?

In a somewhat related vein, is there an easy way for a columnTemplate to know what column it has been summoned forth to format?  Say I want to use the same exact template for 2 (or more) columns.  However, the columnTemplate is passed the entire model, not just the column to be formatted.  No problem for a columnTemplate that only handles one column, but an issue for one that doesn't know which of the columns it should format data from.

3 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 18 Apr 2013, 01:20 PM
Hello Russell,

You could use the approach suggested in this code-library in order to add a class to the row based on the data:

function onDataBound(e) {
    var grid = $("#mvcGrid").data("kendoGrid");
    var gridData = grid.dataSource.view();
 
    for (var i = 0; i < gridData.length; i++) {
        //get the item uid
        var currentUid = gridData[i].uid;
        //if the record fits the custom condition
        if (gridData[i].EmployeeId % 2 == 0) {
            //find the row based on the uid and the custom class
            var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
            $(currenRow).addClass("customClass");
        }
    }
}
I am not sure if I understand the problem with the column menu. It should still hide the columns even if a row template is used. If you are using reordering then you could use the grid columns field to check the current order.

Regarding your question about the column template - the field name is not available. If you have a complex template that you wish to reuse for multiple columns then you could create it outside of the grid and call it with the value for the column e.g.
<script type="text/kendo" id="commonTemplate">
    #: data#
</script>
<script>
     var myTemplate = kendo.template($("#commonTemplate").html());
</script>
{ field: "FieldName", template: "#=myTemplate(FieldName)#"}

Regards,
Daniel
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Russ
Top achievements
Rank 1
answered on 18 Apr 2013, 01:52 PM
Thank you for your samples, I think I understand them and I do believe they will help.

Perhaps it is something I am doing wrong with the way I create a rowTemplate, but the issue I have with using a rowTemplate while allowing a user to hide a column is this:

  • Yes, KendoUI allows it, and
  • Yes, the column header disappears, but
  • The row template that I've been creating provides <td> elements for every data element nested in a <tr>.  When a column is hidden, my row template should suppress the <td>, but (a) it doesn't and (b) I don't know how I could make it do so. 

0
Daniel
Telerik team
answered on 22 Apr 2013, 12:27 PM
Hi again,

There could be a problem if the column is hidden initially from the column configuration. In this case you could generate the template dynamically and add "display:none" style to the <td> elements base on the column hidden option. I have created a small jsBin example that shows this approach.

Regards,
Daniel
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Russ
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Russ
Top achievements
Rank 1
Share this question
or