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

GroupBy functionality not working correctly with ClientRowTemplate

1 Answer 89 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:27 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>


1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 02 Sep 2013, 10:51 AM
Hello Carrie,

I already answered to this query in duplicated forum post created by you - #731769. Please keep in mind that it is highly recommended that you keep related questions in one support thread or a forum post, so that we can easily keep track of your support history and provide better answers in a shorter time.


Regards,
Vladimir Iliev
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
Carrie
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or