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

Kendo Grid columns revert to evenly spaced when a tooltip is added to content

2 Answers 50 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ross B.
Top achievements
Rank 1
Ross B. asked on 12 Jun 2014, 01:50 AM
Greetings,
I have a problem occurring when I add a tooltip to an anchor in a grid cell. The column widths are ignored and rendered spaced evenly when I explicitly set their width in the grid config.

I have a grid defined as follows:

@(Html.Kendo().Grid<SomeCollection>()
    .Name("grdTest")
    .Columns(columns =>
    {
        columns.Bound(t => t.Column1).Width(25).Title("Column1")
           .ClientTemplate("#if(Param1!=null){# <a class='locationLink' href='javascript:void(0)'data-param1='#=Param1#' data-param2='#=Param2#'>#=Column1#</span> #} else {##}#");
        columns.Bound(t => t.Column2).Width(100).Title("Column2");   
    })
    .DataSource(dataSource => dataSource
       .Ajax()
       .PageSize(100) 
       .Read(read => read.Action("MyMethod", "MyController", @Model))
       .ServerOperation(true)                     
    )       
    .Pageable()
    .Scrollable(s => s.Height("auto"))
    .Reorderable(reorder => reorder.Columns(true))       
    .Resizable(resize => resize.Columns(true))
    .Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn).AllowUnsort(true))
    .Navigatable()
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
    .Sortable()      
)


I need to attach a popup to column1's hyperlink. I am doing this in the load function as follows:

<script type="text/javascript">
 
$(document).ready(function () {
 
    var grid = $("#grdTest").kendoGrid().data("kendoGrid");
 
    grid.table.kendoTooltip({
        filter: "a.locationLink",
        position: "top",
        width: 500,
        height: 250,
        content: {
            url: '@Url.Action("PopupViewContentMethod","Controller")'
        },
        requestStart: function (e) {
            e.options.data = {
                parameter1: $(e.target[0]).attr("data-parameter1"),
                paremeter2: $(e.target[0]).attr("data-parameter2")
            }
        }
    });
});
</script>



I narrowed down a problem to the code I added for the tooltip above. When I remove it my columns are rendered with the with I set in the configuration. When I add the popup code then the columns become evenly spaced with a ellipse on column overflows.

Any Ideas?

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 12 Jun 2014, 01:00 PM
Hello Ross,

Please note the difference between .kendoGrid() and .data("kendoGrid"). The first expression initializes a widget, while the second one returns it.

When using a Kendo UI server wrapper, the widget's initialization statement is rendered and executed automatically, so you don't need to do that yourself.

In this case the duplicate instance of the Grid widget overwrites the existing column settings (widths), hence the observed behavior.

Our documentation explains how to obtain references to Kendo UI widgets.

http://docs.telerik.com/kendo-ui/getting-started/widgets#getting-reference-to-a-kendo-ui-widget

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ross B.
Top achievements
Rank 1
answered on 12 Jun 2014, 01:36 PM
Doh! I clearly see that now,

Thanks.
Tags
Grid
Asked by
Ross B.
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Ross B.
Top achievements
Rank 1
Share this question
or