GroupBy functionality not working correctly with ClientRowTemplate

3 posts, 1 answers
  1. Carrie
    Carrie avatar
    27 posts
    Member since:
    Aug 2013

    Posted 29 Aug 2013 Link to this post

    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. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 02 Sep 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Haluk
    Haluk avatar
    5 posts
    Member since:
    Feb 2014

    Posted 18 Mar 2014 Link to this post

    Can you help me for this post 

    http://www.telerik.com/forums/telerik-mvc-grid-row-values-failing-after-group-by
Back to Top