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

[Solved] Action Links do not show in column

8 Answers 136 Views

Grid

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

This question is locked. New answers and comments are not allowed.

william asked on 25 Jul 2011, 11:52 AM

Hi All,

I have Actionlink buttons on a number of grids that work fine. However, I have one form where the actioninks will not show and the only real difference I can see between this form and the others, is that it is rendered on a Telerik Tabcontrol. Can anyone see my problem.

Here is the markup from the Tab Control form:

@model GRID.ViewModels.ComputerBreakDownSectionViewModel

@{

ViewBag.Title = "Edit";

}

@Html.Hidden("policyZoneID", ViewData["policyZoneID"])

@Html.Hidden("sectionID", ViewData["sectionID"])

@Html.Hidden("tabIndex", ViewData["tabIndex"])

@{Html.RenderPartial("PolicyHeader", ViewData["policy"]);}

<div class="frame details">

<h2>

Edit Computer Breakdown Section</h2>

@using (Html.BeginForm())

{

<div>

@Html.ValidationSummary()

</div>

@{Html.Telerik().TabStrip()

.Name("ComputerBreakdownTabStrip")

.Effects(fx => fx.Expand()

.Opacity()

.OpenDuration(150)

.CloseDuration(150))

.Items(tabstrip =>

{

tabstrip.Add()

.Text("Section")

.Content(Html.Partial("CreateEditPartial", ViewData["ComputerBreakdownSection"]).ToHtmlString());

tabstrip.Add()

.Text("Risks")

.Content(Html.Partial("RiskIndex", Model.ComputerBreakdownRisks, new ViewDataDictionary { { "policyZoneID", ViewData["policyZoneID"] }, { "sectionID", ViewData["sectionID"] } }).ToHtmlString());

})

.SelectedIndex(ViewData["tabIndex"] != null ? Convert.ToInt32(ViewData["tabIndex"].ToString()) : 0)

.Render();

}

</div>

<script type="text/javascript">

$("#saveButton").button({ icons: { primary: "ui-icon-check"} });

$("#cancelLink").button({ icons: { primary: "ui-icon-close"} });

$("#risksLink").button({ icons: { primary: "ui-icon-zoomin"} });

$(".editLink").button({ icons: { primary: "ui-icon-pencil"} });

$(".deleteLink").button({ icons: { primary: "ui-icon-close"} });

$(".addRisk").button({ icons: { primary: "ui-icon-plus"} });

</script>

}

</div>

and here is my markup from the Risks tab:

@model GRID.ViewModels.ComputerBreakDownSectionViewModel

@{

ViewBag.Title = "Index";

}

@Html.Hidden("policyZoneID", ViewData["policyZoneID"])

@Html.Hidden("sectionID", ViewData["sectionID"])

<h2>

Risks</h2>

@(Html.Telerik().Grid<GRID.ViewModels.ComputerBreakdownRiskViewModel>()

.Name("computerRisksGrid")

.Sortable()

.DataKeys(keys => keys.Add(r => r.ComputerBreakdownRiskID))

.ToolBar(commands => commands.Custom().ButtonType(GridButtonType.ImageAndText).Text("Add New Risk").HtmlAttributes(new { @class = "addRisk" }).Action("Create", "ComputerBreakdownRisk", new { policyZoneID = ViewData["policyZoneID"], sectionID = ViewData["sectionID"] }))

.DataBinding(dataBinding =>

{

dataBinding.Ajax()

.Select("_RisksIndex", "ComputerBreakdownSection", new { policyZoneID = ViewData["policyZoneID"], sectionID = ViewData["sectionID"] });

})

.Columns(columns =>

{

columns.Template(@<text>

@Html.ActionLink(" ", "Edit", "ComputerBreakdownRisk", new { riskID = @item.ComputerBreakdownRiskID, policyZoneID = ViewData["policyZoneID"], sectionID = ViewData["sectionID"] }, new { @class = "editLink" })

@Html.ActionLink("  ", "Delete", "ComputerBreakdownRisk", new { riskID = @item.ComputerBreakdownRiskID, policyZoneID = ViewData["policyZoneID"], sectionID = ViewData["sectionID"] }, new { @class = "deleteLink" })

</text>).Title("Commands");

columns.Bound(r => r.Description);

columns.Bound(r => r.IndemnityPeriod);

columns.Bound(r => r.ManuallyRated);

})

.RowAction(row =>

{

if (row.IsAlternate) { row.HtmlAttributes["style"] = "background:aliceblue;"; }

})

.Pageable()

)

8 Answers, 1 is accepted

answered on 25 Jul 2011, 01:49 PM

but my other forms work fine in the way that I have shown.

Taking your advice, If I add the following bound column to my .Columns collection :

columns.Bound(r => r.ComputerBreakdownRiskID)

.ClientTemplate("<text>ffff </text>").Title("my Id");

I would expect a column on the end of the grid with a title 'my Id' and all cell values of ffff However, I do not even get the extra column appearing.

I can also find NO documentation on the parameters that are being expected by the ClientTemplate method.

If I simply replace my template column to be:

columns.Bound(r => r.ComputerBreakdownRiskID)

.ClientTemplate(@<text>

@Html.ActionLink(" ", "Edit", "ComputerBreakdownRisk", new { riskID = "<#= ComputerBreakdownRiskID #>", policyZoneID = ViewData["policyZoneID"], sectionID = ViewData["sectionID"] }, new { @class = "editLink" })

@Html.ActionLink(" ", "Delete", "ComputerBreakdownRisk", new { riskID = "<#= ComputerBreakdownRiskID #>", policyZoneID = ViewData["policyZoneID"], sectionID = ViewData["sectionID"] }, new { @class = "deleteLink" })

</text>).Title("Commands");

Then I receive a Lambda error at runtime.

answered on 26 Jul 2011, 09:26 AM

Ok,

I've had some success, but only if I hard code.

If I set my client template as the following with script of:

columns.Bound(r => r.ComputerBreakdownRiskID).ClientTemplate("" + @Html.ActionLink(" ", "Edit", "ComputerBreakdownRisk", new { riskID = "<#= ComputerBreakdownRiskID #>", policyZoneID = ViewData["policyZoneID"], sectionID = ViewData["sectionID"] }, new { @class = "editLink" }) ).Title("Commands");

<script type="text/javascript">

$(".editLink").button({ icons: { primary: "ui-icon-pencil"} }).height(18).width(24);

$(".deleteLink").button({ icons: { primary: "ui-icon-close"} }).height(18).width(24);

....

the editLink class seems to be ignored and so when I run the code, nothing appears in the column.

If I hard code the following (which is what would normally get added if the class was picked up).

columns.Bound(r => r.ComputerBreakdownRiskID).ClientTemplate("" + @Html.ActionLink(" ", "Edit", "ComputerBreakdownRisk", new { riskID = "<#= ComputerBreakdownRiskID #>", policyZoneID = ViewData["policyZoneID"], sectionID = ViewData["sectionID"] }, new { @class = "editLink ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary",  @role = "button",  @style = "height: 18px; width: 24px;" })).Title("Commands");

gives me my expected button without the icon, but pressing it does take me to my expected controller action. If I have to go this way and the script class does not get picked up, then how do I attach the icon.

Accepted