Hierarchy grid using client row template problem

[Dan]

I am creating a hierarchy grid similar to the example at http://demos.kendoui.com/web/grid/hierarchy.html. This works good but I need to also to use the grid.ClientRowTemplate method to draw specific data items in the grid. When doing so the icon that expands and collapses the child grid goes missing. It looks as if the ClientRowTemplate data I am providing overwrites this. So is there a way to use the ClientRowTemplate and also use a hierarchy grid together.

An example of the ClientRowTemplate method that I am using is below.

.ClientRowTemplate("<tr>" +
                "<td><span onclick='javascript:OpenDepartmentWindow(\\#=DepartmentName\\#\\#=DepartmentId\\#);'>\\#=DepartmentName\\#</a></td>" +
                "<td>\\#=DepartmentName\\#</td>" +
                "<td>\\#=Validity\\#</td>" +
                "<td>\\#=CanAmount\\#</td>" +
                "<td>\\#=CanActual\\#</td>" +
                "<td>\\#=StaticPercentage\\#</td>" +
                "<td>\\#=YearlyAmount\\#</td>" +
                "<td>\\#=UnitOfMeasure\\#</td>" +
                "\\#=GroupButtonCellHtml\\#" +
                "</tr>")

 

[Avitot]

Hello Dan,

Oops!

1. your <span> tag seems to have a closing </a> tag. 
2. and is this "\\#=GroupButtonCellHtml\\#" doesn't really have a wrapping <td> element?

Typo error only? Well, but if that's an anchor tag, href is better to use than onclick, and if you're going to customize just one or few <td> elements and you're not merging the cells, it would be better to use column templates or client templates rather than client row templates. :)
Try this in your column: 

columns.Bound(p=>p.DepartmentId)

     .ClientTemplate("<a href = 'javascript:OpenDepartmentWindow(\\#=DepartmentName\\#\\#=DepartmentId\\#);' > \\#=DepartmentName\\# </a>");

Hope this somehow helps,
Avi

[Dan]

Thanks Avi. Typo on span as tried working this with span and anchor tag with no success. I think I need to use a clientrowtemplate due to I need to change the html the grid is creating. I have a requirement to make the grid merge cells between rows so the last columns adds a rowspan to the html to implement this. That is why there is no td tags as these are created in the controller with rowspan attributes.

I did solve this by manually adding the first cell with icons that open/close the grid. Not to happy with the solution but it appears to be working. Below is a mockup of what it ended up looking like using a clientrowtemplate. The "HierarchyRowTagHtml" returns a tr tag with a class of "k-master-row" or "k-alt k-master-row". The next cell is open/close cell which opens and closes the child grids. And the GroupButtonCellHtml conditionally returns "<td rowspan=n>data</td>" which spans the rows on the last column.

If there is a better way please let me know.

 

 

 

 

.ClientRowTemplate(
  "\\#=HierarchyRowTagHtml\\#" +
  "<td class='k-hierarchy-cell'><span class='k-icon k-plus' onclick=''></span></td>" +
                "<td><a onclick='javascript:OpenDepartmentWindow(\\#=DepartmentName\\#\\#=DepartmentName\\#\\#=DepartmentId\\#);'>\\#=DepartmentName\\#</a></td>" +
                "<td>\\#=DepartmentName\\#</td>" +
                "<td>\\#=Validity\\#</td>" +
                "<td>\\#=CanAmount\\#</td>" +
                "<td>\\#=CanActual\\#</td>" +
                "<td>\\#=StaticPercentage\\#</td>" +
                "<td>\\#=YearlyAmount\\#</td>" +
                "<td>\\#=UnitOfMeasure\\#</td>" +
                "\\#=GroupButtonCellHtml\\#" +
                "</tr>")

[Steve]

Dan,

 I am running into the same issue now... did you ever get an official post from Telerik about this?

 Thanks,

Steve

[Boyan Dimitrov]

Hello Steve,

I would like to confirm that when using the ClientRowTemplate the row template must contain a table row element (tr).

By default The Grid renders a table row (<tr>) for every data source item, but in this case the row and its content should be defined in the template. Also the table row must have the uid data attribute set to #= uid #. The grid uses the uid data attribute to determine the data to which a table row is bound to.

Please find attached a sample project that implements hierarchy grid using client row template for the child grid. 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Steve]

Boyan,

 I appreciate the time for the response and the sample.   However it's not quite what I am referring to nor do I think it is what others have here as well.

 In the example the ClientRowTemplate is in the detail grid... that's not what we are wanting.

We want the ClientRowTemplate in the MAIN grid that retains the selectable >> on the first column that goes then to the detail grid.

 In your example, the main grid is the standard column definition with no ClientRowTemplate. 

Please show us how a ClientRowTemplate can be in the MAIN grid retaining the >> in the left most column that allows it to be selected into a DETAIL grid.

 Please... I'm sure ALOT of people would like to see this.

Thanks,

 Steve

[Steve]

All,

Although we got an answer to a question that wasn't posed, and because we did some poking around, we feel it is important to report back how we solved the issue - even though we pay for technical support.

 When you use a ClientRowTemplate on a grid it wipes out all default visual actions that might naturally appear on a row for that grid.   Two cases in point: the icon to expand into the ClientTemplate (or detail grid) and default command operations.   We found a couple of articles on how to restore the COMMAND-based operations by forcing the button to appear along with the button click operation.   This, coupled with our desire to show an image in a column on a row and to condense several view model data elements condensed on a row, we were able to get the effect we wanted on a row.   However, because we had an associated ClientTemplate our row always looked like:

Blank Column - User Last Name (filterable) - Photo - Several Detail Items - More Detail Items - EDIT - DELETE

but the problem remained that the BLANK COLUMN (which used to hold the default clickable expand/condense icon for the detail grid was wiped out.

So we review a couple of other posts in other sections that said to move to Column-based templates.   We took each defined division and nested <td> in each column of the ClientRowTemplate and broke it out into individual column templates:

     .Columns(columns =>
              {
                columns.Bound(f => f.LastName).Width(150).Title("Last");

                columns.Template(e => { }).ClientTemplate(                  

@"<div class='photo'>" +
"<img src='" + Url.Content("~/Content/web/patients/") + "No_photo_available_1.jpg' />" +
"</div>"
                  ).Width(55).Title("Photo");

                columns.Template(e => { }).ClientTemplate(
@"<div class='details'>" +
 "<dt class='name'>#:FirstName# #:LastName#</dt><br />" +
 "<dd class='title'>Gender : #: GenderStr#</dd><br />" +
 "<dd class='title'>Birthday : #: BirthDateStr#</dd><br />" +
 "<dd class='title'>MRN : #: MedicalRecordNumber#</dd><br />" +
 "</div>"
                ).Width(200).Title(" ");                
                
                columns.Template(e => { }).ClientTemplate(
@"<div class='details'>" +
"<dd class='title'>DNR : #: DNRStr#</dd><br />" +
"<dd class='title'>DNH : #: DNHStr#</dd>" +
"</div>"
                  ).Width(200).Title(" ");
                
                columns.Command(commands =>
                {
                  commands.Edit();
                  commands.Destroy();
                }).Width(100);

This meant a couple of things:

 First, several of the items which we had as <td> items had to be changed to <div> items.   Second, we could remove the references to show (manually force) the appearance of the EDIT and DELETE button and allow the default operation to appear.   Third, we had to un-bind the individual columns to .Template(e => { }) definitions.

Doing all of this, we remove the reference to the ClientRowTempalte and let the formatting of the individual columns take affect and wham... we got the ability to show COMMAND buttons, consolidated view model data in a single cell, a photo in a column and MORE IMPORTANT (which was the basis of the original question), the default ICON to expand/consolidate the detail grid re-appeared and worked as designed.

So... bottom line is this (which was never answered):

If you have a detail grid and you want to format the row/cell contents of the parent grid - use ClientTemplate() on individual operations and avoid the ClientRowTemplate.

Steve

[Boyan Dimitrov]

Hello Steve,

 

Please excuse me for the misunderstanding in the communication. 

 

I would like to thank you for sharing such detailed explanation and sample code. 

 

I am sure that this solution will be very helpful to many people. 

 

Regards,
Boyan Dimitrov
Telerik