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

GroupBy functionality not working correctly with ClientRowTemplate

2 Answers 54 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Carrie
Top achievements
Rank 1
Carrie asked on 29 Aug 2013, 12:31 PM
Hello,
I am trying to implement a grid that uses a ClientRowTemplate and also has GroupBy functionality.   The grid renders fine and all other behaviors act appropriately except the GroupBy, when a column is selected to GroupBy the column headers act strangely and an additional column is inserted and the widths are changed as well.   If I remove the ClientRowTemplate everything works great.   I am new to Kendo so please let me know if my implementation is wrong or could be better code is below:
@(Html.Kendo().Grid(Model)   
    .Name("Grid")
    .HtmlAttributes(new { style = "height:450px;font-size:.85em;" })
    .Columns(columns =>
    {
        columns.Template(e => { }).ClientTemplate(" ").Width(30).HtmlAttributes(new { style="vertical-align: middle; text-align: center" });       
        columns.Bound(p => p.Id).Width(60);
        columns.Bound(p => p.Title).Width(250);
        columns.Bound(p => p.AssignedUser).Width(120);
        columns.Bound(p => p.Status);
        columns.Bound(p => p.Priority);
        columns.Bound(p => p.Category);
        columns.Bound(p => p.Tier);
        columns.Bound(p => p.LastModifiedAsString).Title("Last Modified").Width(120);
    })
    .ClientRowTemplate(
        "<tr>" +
            "<td>" +
               "<img style ='margin-top:5px;' src='" + Url.Content("~/Images/") +"#:data.Icon#' alt='#:data.Icon#' />" +
            "</td>" +
            "<td width='60'>#: Id #</td>" +
            "<td width='250'>#: Title #</td>" +
            "<td width='120'>#: AssignedUser #</td>" +
            "<td>#: Status #</td>" +
            "<td>#: Priority #</td>" +
            "<td>#: Category #</td>" +
            "<td>#: Tier #</td>" +
            "<td>#: LastModifiedAsString #</td>" +
            "</tr>"     
    )
    .Pageable()
    .Sortable()
    .Scrollable()
    .Groupable()
    .Filterable(filterable => filterable
        .Extra(false)
         .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            ))
        )
    .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Single))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Get", "Grid"))
        )
    .Events(e => e.Change("onChanged"))
      )
 
 
 
<script type="text/javascript">
     
    function onChanged(arg) {
 
        var selected = this.select();
 
        var wiId = this.dataItem(selected).Id;
        
        window.location = '../WorkItem/Edit?Id=' + wiId;
    }
     
    var myGrid;
 
    $(function () {
 
        myGrid = $('#Grid').data('kendoGrid');
 
    });
 
    setInterval(DoWork, parseInt(@ViewBag.RefreshInterval));
 
    function DoWork() {
        myGrid.dataSource.read();
    }
 
</script>

2 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 02 Sep 2013, 10:50 AM
Hi Carrie,

Current behavior is expected as the grouping requires additional column - please check the example below which renders additional cell if grouping is applied to the Grid:

.ClientRowTemplate(
    "<tr>" +
        "#var groups = $(Grid).data('kendoGrid').dataSource.group().length;#" +
        "#if( groups > 0) {#"+
            "<td class='k-group-cell'> </td>" + //render hierarchy cell if grouping is applied
        "#}#" +
        "<td>" +
            "<img style ='margin-top:5px;' src='" + Url.Content("~/Images/") +"#:data.Icon#' alt='#:data.Icon#' />" +
        "</td>" +
        "<td width=''>#: OrderID #</td>" +
        "<td width=''>#: OrderDescription #</td>" +
        "<td width=''>#: OrderDate #</td>" +
    "</tr>"    
)
  Kind Regards,
Vladimir Iliev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Haluk
Top achievements
Rank 1
answered on 18 Mar 2014, 02:10 PM
Can you help me for this post 

http://www.telerik.com/forums/telerik-mvc-grid-row-values-failing-after-group-by
Tags
Grid
Asked by
Carrie
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Haluk
Top achievements
Rank 1
Share this question
or