以粗体突出显示选定的 TELERIK MVC GRID 行文本

发布于 2024-11-18 18:58:09 字数 3315 浏览 3 评论 0原文

我有一个 Telerik MVC 网格,其中有一列为“选择”、“编辑”,我使用 Format Property 来显示指向我的 ActionMethods 的链接。现在,当有人单击“选择”/“编辑”链接时,我想以粗体显示所选行文本?

如何使用 JQuery/Javascript 来实现这一点?尝试使用 RowAction 但无法解决这个问题,因为我使用 Format Property 和 Ajax.ActionLink 来选择和编辑 ActionLink。

    <% Html.Telerik().Grid(Model.GetLegends)
                    .Name("PaymentScheduleLegendGrid")

                    .ToolBar(toolBar => toolBar.Template(() =>
                                  { 
                            %>
                                 <label style="height:10px; float:left;padding-right:230px;" >Legend</label>

                                  <%= Ajax.ActionLink("Add", "AddLegend", "PaymentSchedule", new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "addlegend", HttpMethod = "Get" }, new { Style="text-decoration:underline;" })%>

                                 <% 
                        })).HtmlAttributes("style='background:none grey'")
                    .DataKeys(dataKeys => dataKeys.Add(m => m.LegendId))                        
                    .Columns(columns =>
                        {

                           // columns.Bound(m => m.Legend_color).ClientTemplate("<div><div style='float:right;text-align:left;width:80%'><#= legend_name #></div>" + "<div style='padding:3px;background-color:<#= legend_color #>;width:20px;height:15px'></div></div>").Title("Legend");
                            columns.Bound(m => m.LegendColor).Format(Html.ColorBlock("{0}").ToHtmlString()).Encoded(false).Title("");
                            columns.Bound(m => m.LegendId).Hidden(true).HeaderHtmlAttributes(new { @class = "newBack" }); ;
                            columns.Bound(m => m.LegendName).Title("");
                            columns.Bound(m => m.LegendId).Title("").Format(Ajax.ActionLink("Select", "Select", "PaymentSchedule", new { Id = "{0}" }, new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "AddPaymentSchedule", HttpMethod = "Get" }, new { Style = "text-decoration:underline;" }).ToHtmlString().Replace("{", "{{").Replace("}", "}}")).Encoded(false).Width(60);
                            columns.Bound(m => m.LegendId).Title("").Format(Ajax.ActionLink("Edit", "EditLegend", "PaymentSchedule", new { Id = "{0}" }, new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "addlegend", HttpMethod = "Get" }, new { Style = "text-decoration:underline;" }).ToHtmlString().Replace("{", "{{").Replace("}", "}}")).Encoded(false).Width(60);                             
                        })
                     //   .RowAction(row => row.Selected = row.HtmlAttributes.Add("style", "background:#321211;"))
                        .Sortable()
                        .Selectable().HtmlAttributes("style=font:bold")
                        .DataBinding(databinding => databinding
                        .Ajax().Select("AjaxIndex", "Legend"))
                        .Pageable(pager => pager.PageSize(5))
                        .Render();                 
 %>         

这是我的代码,当用户单击“选择/编辑 ActionLink ...”时,选定的 LegendName 应以粗体突出显示。当我使用 Selectable 属性时,我将所选行突出显示(所选行的新背景颜色不满足我的要求)。除此之外,我还有一个要求,我想将工具栏的背景颜色更改为灰色。你能帮我吗

I have a Telerik MVC Grid where I have a column as " select " , " edit" forwhich I have used Format Property to show Links to my ActionMethods . Now I want to show the selected Row text in Bold when someone clicks on " Select" / " Edit " link ?

How to achieve this using JQuery / Javascript ? Tried using RowAction but couldnt sort out this as I am using Format Property and Ajax.ActionLink for Select and Edit ActionLinks.

    <% Html.Telerik().Grid(Model.GetLegends)
                    .Name("PaymentScheduleLegendGrid")

                    .ToolBar(toolBar => toolBar.Template(() =>
                                  { 
                            %>
                                 <label style="height:10px; float:left;padding-right:230px;" >Legend</label>

                                  <%= Ajax.ActionLink("Add", "AddLegend", "PaymentSchedule", new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "addlegend", HttpMethod = "Get" }, new { Style="text-decoration:underline;" })%>

                                 <% 
                        })).HtmlAttributes("style='background:none grey'")
                    .DataKeys(dataKeys => dataKeys.Add(m => m.LegendId))                        
                    .Columns(columns =>
                        {

                           // columns.Bound(m => m.Legend_color).ClientTemplate("<div><div style='float:right;text-align:left;width:80%'><#= legend_name #></div>" + "<div style='padding:3px;background-color:<#= legend_color #>;width:20px;height:15px'></div></div>").Title("Legend");
                            columns.Bound(m => m.LegendColor).Format(Html.ColorBlock("{0}").ToHtmlString()).Encoded(false).Title("");
                            columns.Bound(m => m.LegendId).Hidden(true).HeaderHtmlAttributes(new { @class = "newBack" }); ;
                            columns.Bound(m => m.LegendName).Title("");
                            columns.Bound(m => m.LegendId).Title("").Format(Ajax.ActionLink("Select", "Select", "PaymentSchedule", new { Id = "{0}" }, new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "AddPaymentSchedule", HttpMethod = "Get" }, new { Style = "text-decoration:underline;" }).ToHtmlString().Replace("{", "{{").Replace("}", "}}")).Encoded(false).Width(60);
                            columns.Bound(m => m.LegendId).Title("").Format(Ajax.ActionLink("Edit", "EditLegend", "PaymentSchedule", new { Id = "{0}" }, new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "addlegend", HttpMethod = "Get" }, new { Style = "text-decoration:underline;" }).ToHtmlString().Replace("{", "{{").Replace("}", "}}")).Encoded(false).Width(60);                             
                        })
                     //   .RowAction(row => row.Selected = row.HtmlAttributes.Add("style", "background:#321211;"))
                        .Sortable()
                        .Selectable().HtmlAttributes("style=font:bold")
                        .DataBinding(databinding => databinding
                        .Ajax().Select("AjaxIndex", "Legend"))
                        .Pageable(pager => pager.PageSize(5))
                        .Render();                 
 %>         

This is my code and When user clicks on Select / Edit ActionLink ... Selected LegendName should be highlighted in bold . When I use Selectable property I am getting the selected row as highlighted ( new Background color for selected row which doesnt satisfy my requirement). Besides that I have one more requirement , I want to change the background color of my toolbar to GREY . Can you please help me

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

昇り龍 2024-11-25 18:58:09

为了对某些表格行应用某些样式,您需要使用 CSS。对于服务器端绑定,您可以使用 RowAction 中的 HtmlAttributes。但是我不知道(正如您没有描述的那样)如何确定是否在 RowAction 方法中选择了一行。如果您想要更具体的答案,我建议您附加一个正在运行的项目,该项目显示您在 Telerik 论坛中打开的论坛线程中的整个场景。

如果你想在客户端执行此操作,可以使用 jQuery:

<%: Html.Telerik().Grid().ClientEvents(e => e.OnLoad("onLoad")) %>

<script>
function onLoad() {
   $(this).delegate("tr a", "click", function(e){
       $(this).closest("tr").addClass("t-state-selected") // add the css class
                            .siblings()
                            .removeClass("t-state-selected") // remove css class from other rows
   });
}
</script>

In order to apply certain style for certain table row you need to use CSS. For server side binding you can use the HtmlAttributes from RowAction. However I don't know (as you haven't described) how to determine if a row is selected inside the RowAction method. If you want a more concrete answer I suggest you attach a running project which shows the entire scenario in the forum thread which you opened in the Telerik forums.

If you want to do that client-side you can use jQuery:

<%: Html.Telerik().Grid().ClientEvents(e => e.OnLoad("onLoad")) %>

<script>
function onLoad() {
   $(this).delegate("tr a", "click", function(e){
       $(this).closest("tr").addClass("t-state-selected") // add the css class
                            .siblings()
                            .removeClass("t-state-selected") // remove css class from other rows
   });
}
</script>
后知后觉 2024-11-25 18:58:09
    So far I have done this .

<style type="text/css"> 
#PaymentScheduleLegendGrid table thead 
{ 

}
.newBack
{
background:none grey;
}
.newBoldtext
{
 font-weight:bold;
 color:red;
 }
 </style>
<script type="text/javascript">
   function onLoad() {

    $(this).delegate("tr a", "click", function (e) {
        $(this).closest("tr").addClass("newBoldtext"); // or any other CSS class
    });
   }
</script>

<div>
 <% Html.Telerik().Grid(Model.GetLegends)
                    .Name("PaymentScheduleLegendGrid")                       
                    .ToolBar(toolBar => toolBar.Template(() =>
                                  { 
                            %>
                                 <label style="height:10px; float:left;padding-right:230px;" >Legend</label>

                                  <%= Ajax.ActionLink("Add", "AddLegend", "PaymentSchedule", new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "addlegend", HttpMethod = "Get" }, new { Style="text-decoration:underline;" })%>

                                 <% 
                        })).HtmlAttributes("style='background:none grey'")
                    .DataKeys(dataKeys => dataKeys.Add(m => m.LegendId))
                      .ClientEvents(e => e.OnLoad("onLoad"))                      
                    .Columns(columns =>
                        {


                            columns.Bound(m => m.LegendColor).Format(Html.ColorBlock("{0}").ToHtmlString()).Encoded(false).Title("");
                            columns.Bound(m => m.LegendId).Hidden(true).HeaderHtmlAttributes(new { @class = "newBack" }); ;
                            columns.Bound(m => m.LegendName).Title("test");

                            columns.Bound(m => m.LegendId).Title("")
                                .Format(Ajax.ActionLink("Select", "Select", "PaymentSchedule",
                                                         new { Id = "{0}"}
                                                        , new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "AddPaymentSchedule", HttpMethod = "Get" }
                                                        , new { name = "SelectRow", Style = "text-decoration:underline;" }

                                                         ).ToHtmlString().Replace("{", "{{").Replace("}", "}}")).Encoded(false).Width(60);

                            columns.Bound(m => m.LegendId).Title("").Format(Ajax.ActionLink("Edit", "EditLegend", "PaymentSchedule", new { Id = "{0}" }, new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "addlegend", HttpMethod = "Get" }, new { Style = "text-decoration:underline;" }).ToHtmlString().Replace("{", "{{").Replace("}", "}}")).Encoded(false).Width(60);                             
                        })

                        .Sortable()
                        .Selectable().HtmlAttributes("style=font:bold")
                        .DataBinding(databinding => databinding
                        .Ajax().Select("AjaxIndex", "Legend"))
                        .Pageable(pager => pager.PageSize(10))
                        .Render();                 
 %>         

    So far I have done this .

<style type="text/css"> 
#PaymentScheduleLegendGrid table thead 
{ 

}
.newBack
{
background:none grey;
}
.newBoldtext
{
 font-weight:bold;
 color:red;
 }
 </style>
<script type="text/javascript">
   function onLoad() {

    $(this).delegate("tr a", "click", function (e) {
        $(this).closest("tr").addClass("newBoldtext"); // or any other CSS class
    });
   }
</script>

<div>
 <% Html.Telerik().Grid(Model.GetLegends)
                    .Name("PaymentScheduleLegendGrid")                       
                    .ToolBar(toolBar => toolBar.Template(() =>
                                  { 
                            %>
                                 <label style="height:10px; float:left;padding-right:230px;" >Legend</label>

                                  <%= Ajax.ActionLink("Add", "AddLegend", "PaymentSchedule", new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "addlegend", HttpMethod = "Get" }, new { Style="text-decoration:underline;" })%>

                                 <% 
                        })).HtmlAttributes("style='background:none grey'")
                    .DataKeys(dataKeys => dataKeys.Add(m => m.LegendId))
                      .ClientEvents(e => e.OnLoad("onLoad"))                      
                    .Columns(columns =>
                        {


                            columns.Bound(m => m.LegendColor).Format(Html.ColorBlock("{0}").ToHtmlString()).Encoded(false).Title("");
                            columns.Bound(m => m.LegendId).Hidden(true).HeaderHtmlAttributes(new { @class = "newBack" }); ;
                            columns.Bound(m => m.LegendName).Title("test");

                            columns.Bound(m => m.LegendId).Title("")
                                .Format(Ajax.ActionLink("Select", "Select", "PaymentSchedule",
                                                         new { Id = "{0}"}
                                                        , new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "AddPaymentSchedule", HttpMethod = "Get" }
                                                        , new { name = "SelectRow", Style = "text-decoration:underline;" }

                                                         ).ToHtmlString().Replace("{", "{{").Replace("}", "}}")).Encoded(false).Width(60);

                            columns.Bound(m => m.LegendId).Title("").Format(Ajax.ActionLink("Edit", "EditLegend", "PaymentSchedule", new { Id = "{0}" }, new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "addlegend", HttpMethod = "Get" }, new { Style = "text-decoration:underline;" }).ToHtmlString().Replace("{", "{{").Replace("}", "}}")).Encoded(false).Width(60);                             
                        })

                        .Sortable()
                        .Selectable().HtmlAttributes("style=font:bold")
                        .DataBinding(databinding => databinding
                        .Ajax().Select("AjaxIndex", "Legend"))
                        .Pageable(pager => pager.PageSize(10))
                        .Render();                 
 %>         

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文