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

[Ross B.]

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?

[Dimo]

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

 

 

[Ross B.]

Doh! I clearly see that now,

Thanks.