[Solved] Adding anchor tag to rows in a grid

[Lucas]

I am trying to add a hyperlink to a row for a particular column in a grid. I have the hyper link being added, but I am having trouble passing another item in my model via the hyperlink.

@model IEnumerable<McK.BI.BusinessLayer.ViewModels.HighlightListing>

<div id="result">
    @(Html.Telerik().Grid(Model)
        .Name("Grid")
        .HtmlAttributes(new { style = "border: 0;" })
        .Columns(columns =>
        {
            columns.Bound(h => h.IsStateNew).Title("New");
            columns.Bound(h => h.AlertStatus).Title("Status");
            columns.Bound(h => h.State);
            columns.Bound(h => h.Type).Title("Type");
            columns.Bound(h => h.Name).Format(Html.ActionLink("{0}", "Open", "Work", new { workindex = 3, OtherParms = item.Id }, null).ToString()).Encoded(false);
            columns.Bound(h => h.EntityName).Title("Entity");
            columns.Bound(h => h.DescriptionState).Title("Desc");
            columns.Bound(h => h.LastChangeDate).Format("{0:MM/dd/yyyy}").Width(120).Title("Modified");
        })
            .Scrollable()
            .Resizable(resizing => resizing.Columns(true))
    )
</div>

<script type="text/javascript">
    function loadEditForm(element, e) {
        // avoid navigating by calling preventDefault - http://api.jquery.com/event.preventDefault/
        new $.Event(e).preventDefault();

        // use the jQuery load method (http://api.jquery.com/load/) to request the partial view

        // #result is the DIV where the partial view will be loaded
        $('#result').load(element.href);
    }
</script>

The section that says item.Id is where I am trying to pass an id to the javascript function rather than the name that is currently in the column. How do I accomplish this?

Thanks for your help

[Dadv]

Hi,

I'm not sure what you want to do... do you want that when you click a link in the grid the ajax result replace the grid by the partial view?

If true then read this

You can use the in-built ajax function of MVC (AjaxOptions)

or you could try to modify you own code :

columns.Bound(h => h.Name).Format(Ajax.ActionLink("{0}", "Open", "Work", new { workindex = 3, OtherParms = item.Id },
new AjaxOptions {HttpMethod="Get", InsertionMode= InsertionMode.Replace, UpdateTargetId="result" }).ToHtmlString()).Encoded(false);

     

You don't need any javascript function, juste add the unobstructive Microsoft javascript files.

[Lucas]

Hi Dadv,

Thanks for the quick reply. 

In the end I do want replace the content where the grid is with a partial view. I chose to use the javascript method because it is what I am use to. 

Anyways, what I am looking for is I want a link in the Name column of the grid. When the user clicks on the name, I want to call my controller which will go off and gather a bunch of information and return me a partial view. 

In order for the controller to go and get me this information, I will need to pass a couple of variables from the model. I will need to pass the id of the item and the type of item they clicked on. So from the Telerik examples I figured out how to first use server side binding to bind the results to the grid. 

So here is what I would like to do... It doesnt work. I am sure I just dont have the syntax right...

columns.Bound(h => h.Name).Format(Html.ActionLink("{0}", "Open", "Work", new { ObjectType = h.Type, ObjectId = h.Id }, null).ToString()).Encoded(false); 

Does that make sense?

Thanks again for your help with this!

[Dadv]

In this case you probably need to use template (look at this)

columns.Template(
@Html.ActionLink(item.Name, "Open", "Work", 
new { ObjectType = item.Type, ObjectId = item.Id }, null).ToHtmlString()).Encoded(false);
but i steal thinking you don't need extra javascript function, use Ajax.ActionLink instead.... 

columns.Template(

@Ajax.ActionLink(item.name, "Open", "Work",

new { ObjectType = item.Type, ObjectId = item.Id }, new AjaxOptions {HttpMethod="Get", InsertionMode= InsertionMode.Replace, UpdateTargetId="result" }
).ToHtmlString()).Encoded(false);

[Lucas]

Hello Dadv,

Thank you for your help. I think I have figured it out. The only way I can get this to work is to do something like this:

<div id="result">
    @(Html.Telerik().Grid(Model)
        .Name("Grid")
        .HtmlAttributes(new { style = "border: 0;" })
        .Columns(columns =>
        {
            columns.Bound(h => h.IsStateNew).Title("New");
            columns.Bound(h => h.AlertStatus).Title("Status");
            columns.Bound(h => h.State);
            columns.Bound(h => h.Type).Title("Type");
            columns.Template(
                 @<div>
                    @Html.ActionLink(item.Name, "HighlightGet", "Highlight",
                            new { id = item.Id }, new {onclick="loadEditForm(" + item.Id + ", event)"})
                </div>
            ).Title("Name");

             columns.Bound(h => h.EntityName).Title("Entity");
             columns.Bound(h => h.DescriptionState).Title("Desc");
             columns.Bound(h => h.LastChangeDate).Format("{0:MM/dd/yyyy}").Width(120).Title("Modified");
        })
                .Scrollable()
                .Resizable(resizing => resizing.Columns(true))
        )
</div>

I have to wrap the template in a @<div> tags in order for the item.id and item.name to work together in one column. Is there any other way to do this? Also, is this not possible without a column template?

Thanks

[Dadv]

Well i don't think you need specially a div, you probably could warp it in a @<text></text>

and again i'm not really sure you need your extra javascript function to have the #result replaced by a partialview... AjaxOptions is a built in functionality.

You can use Bound Template too :

columns.Bound(b=>b.Id).Template(item=>

                 @<text>

                    @Html.ActionLink(item.Name, "HighlightGet", "Highlight",

                            new { id = item.Id }, new {onclick="loadEditForm(" + item.Id + ", event)"}) // What is the event value?

                </text>

            ).Title("Name");

but it's near the same..


You could use row template too.