【问题标题】:kendo tooltip on a specific column name特定列名上的剑道工具提示
【发布时间】:2018-02-06 18:53:35
【问题描述】:

我有一个工具提示;如果您单击一行,用户将获得更多信息。工具提示如下所示:

$("#overzicht-grid").kendoTooltip({
    filter: "td:nth-child(3)",
    content: function (e) {            
        return "belastbaarheidcode " + e.target.html();
    }
});

这可以正常工作,但它也适用于主网格。因为剑道网格是这样的:

@(Html.Kendo().Grid<SDB.Models.NettoVergelijking.Dienstverband>()
        .Name("overzicht-grid")
        .AutoBind(false)
        .Columns(columns =>
        {
            columns.Bound(d => d.Naam).Title("Medewerker").ClientTemplate("<span title='${Naam}'>${Naam}</span>").Width(300)
                .Filterable(f =>
                {
                    f.Extra(false);
                    f.Operators(op =>
                    {
                        op.ForString(str =>
                        {
                            str.Clear().Contains("Bevat");
                        });
                    });
                });
            columns.Bound(d => d.Contractvorm).Title("Contractvorm").ClientTemplate("<span title='${Contractvorm}'>${Contractvorm}</span>").Width(200).Filterable(ftb => ftb.Multi(true)); ;
            columns.Bound(d => d.Run1.Netto).Title("Periode1").Filterable(true).HtmlAttributes(new { style = "text-align:right;" }).Width(220).ClientTemplate("# if (Run1.Netto != 0) { #  #= kendo.toString(Run1.Netto, 'n2') #  # } #").HeaderHtmlAttributes(new { style = "text-align:right;" });
            columns.Bound(d => d.Run2.Netto).Title("Periode 2").Filterable(true).HtmlAttributes(new { style = "text-align:right;" }).Width(220).ClientTemplate("# if (Run2.Netto != 0) { #  #= kendo.toString(Run2.Netto, 'n2') #  # } #").HeaderHtmlAttributes(new { style = "text-align:right;" });


            columns.Bound(d => d.VerschilPercentage).Filterable(false).HtmlAttributes(new { style = "text-align:right;", @class = "NettoVergelijkingVerschil" }).ClientTemplate("# if (VerschilPercentage != 0) { # %   #= kendo.toString(VerschilPercentage, 'n2') #  # } else { # % 0  # } #").Width(165).Format("{0:P}").HeaderHtmlAttributes(new { style = "text-align:right;" }).Hidden();


            columns.Bound(d => d.Verschil).Filterable(false).HtmlAttributes(new { style = "text-align:right;", @class = "NettoVergelijkingVerschil" }).ClientTemplate("# if (Verschil != 0) { #  € #= kendo.toString(Verschil, 'n2') #    # } else { # €  0,00  # } #").Width(165).Format("{0: #.00}").HeaderHtmlAttributes(new { style = "text-align:right;" });
        })
        .Filterable(f => f.Mode(GridFilterMode.Menu))
        .Sortable()
        .Pageable(pager => pager.PageSizes(new List<object> { 25, 50, 100, 200, 500 }))
        .ClientDetailTemplateId("overzicht-grid-details")
        .Excel(e => e.AllPages(true))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(50)
            .ServerOperation(false)
            .Model(model =>
            {
                model.Id(d => d.Id);
                model.Field(f => f.Naam);
                model.Field(f => f.Contractvorm);
                model.Field(f => f.Run1.Netto);
                model.Field(f => f.Run2.Netto);
            })
            .Read(r => r.Action("GetOverzicht", "NettoVergelijking").Data("getData"))
            .Sort(d => d.Add(a => a.Verschil).Descending()
            )
        )
)

<script id="overzicht-grid-details" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<SDB.Models.NettoVergelijking.Detail>()
                .Name("overzicht-grid1-details-#=Id#")
                .Columns(columns =>
                {
                    columns.Bound(o => o.Omschrijving).Width(270)
                        .Filterable(false).HeaderTemplate(" ");
                    columns.Bound(o => o.Belastbaarheid).Width(200).HtmlAttributes(new { style = "cursor:pointer;" });
                    columns.Bound(o => o.Waarde1).Width(220)
                        .ClientTemplate("\\# if (Waarde1 != 0 && Waarde1 != null) { \\#  \\#= kendo.toString(Waarde1, 'n2') \\#  \\# } else { \\#  \\# } \\#")
                        .ClientFooterTemplate("\\#=kendo.toString(sum, 'n2')\\#")
                        .FooterHtmlAttributes(new { style = "text-align:right;" }).Filterable(false).HeaderTemplate(" ").HtmlAttributes(new { style = "text-align:right;" }).HeaderHtmlAttributes(new { style = "text-align:right;" });


                    columns.Bound(o => o.Waarde2).Width(220)
                        .ClientTemplate("\\# if (Waarde2 != 0 && Waarde2 != null) { \\#  \\#= kendo.toString(Waarde2, 'n2') \\#  \\# } else { \\#  \\# } \\#")
                        .ClientFooterTemplate("\\#=kendo.toString(sum, 'n2')\\#")
                        .FooterHtmlAttributes(new { style = "text-align:right;" }).Filterable(false).HeaderTemplate(" ").HtmlAttributes(new { style = "text-align:right;" }).HeaderHtmlAttributes(new { style = "text-align:right;" });


                    columns.Bound(o => o.Verschil)
                        .ClientTemplate("\\# if (Verschil != 0 && Verschil != null) { \\#  \\#= kendo.toString(Verschil, 'n2') \\#  \\# } else { \\# 0  \\# } \\#")
                        .ClientFooterTemplate("\\#=kendo.toString(sum, 'n2')\\#")
                        .FooterHtmlAttributes(new { style = "text-align:right;" }).Filterable(false).HeaderTemplate(" ").HtmlAttributes(new { style = "text-align:right;" }).HeaderHtmlAttributes(new { style = "text-align:right;" }).Visible(true);


                    columns.Bound(o => o.VerschilPercentage)
                       .ClientTemplate("\\# if (VerschilPercentage != 0 && Verschil != null) { \\#  \\#= kendo.toString(VerschilPercentage, 'n2') \\#  \\# } else { \\# 0  \\# } \\#")
                       .ClientFooterTemplate("\\#=kendo.toString(sum, 'n2')\\#")
                       .FooterHtmlAttributes(new { style = "text-align:right;" }).Filterable(false).HeaderTemplate(" ").HtmlAttributes(new { style = "text-align:right;" }).HeaderHtmlAttributes(new { style = "text-align:right;" }).Visible(true);


                })
                .Filterable(f => f.Mode(GridFilterMode.Menu))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Aggregates(a =>
                    {
                        a.Add(x => x.Waarde1).Sum();
                        a.Add(x => x.Waarde2).Sum();
                        a.Add(x => x.Verschil).Sum();
                    })
                    .Model(model =>
                    {
                        model.Id(d => d.Id);
                        model.Field(f => f.Type);
                        model.Field(f => f.Omschrijving);
                        model.Field(f => f.Waarde1);
                        model.Field(f => f.Waarde2);
                        model.Field(f => f.Verschil);
                    })
                    .Group(groups => groups.Add(p => p.Type))
                    .Sort(s => s.Add(a => a.LoonfactorCode).Ascending())
                    .Read(read => read.Action("GetPeriodeDetails", "NettoVergelijking", new { dienstverbandId = "#=Id#" }).Data("getData"))
                )
                .ToClientTemplate()
    )

但我希望它只适用于:overzicht-grid。

所以我的问题是:如何更改它,它只适用于 overzicht-grid 网格?

【问题讨论】:

  • 将选择器更改为列。您可能需要查看呈现的 html 或使用 HtmlAttributes 来分配您可以定位的 css id 或类。
  • ok,但你能举个例子吗?谢谢

标签: c# asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc


【解决方案1】:

在你的 js 中尝试这样的事情:

@(Html.Kendo().Grid<SDB.Models.NettoVergelijking.Detail>()
            .Name("overzicht-grid1-details-#=Id#")
            .HtmlAttributes(new {@class = "detailGrid"})
            ... etc

var grid = $("#overzicht-grid").closest(".detailGrid").("kendoGrid");

grid.thead.kendoTooltip({
    filter: "tr td:nth-child(3)",
    content: function (e) {
        return "belastbaarheidcode " + e.target.html();
    }
});

这是一个在标题中显示工具提示的 dojo 示例:

http://dojo.telerik.com/AVitA

【讨论】:

  • 谢谢。但我不希望它出现在标题中。在每一行。但随后在细节网格上不是主网格
  • 把过滤器改成filter: "tr td:nth-child(3)"
  • 好吧,正如 Shai 提到的,您需要更改选择器。细节网格的问题是它没有固定的 Id 属性,所以我建议添加一个可以访问的标记 css 类。见编辑。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-01-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多