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

Adding anchor tag to rows in a grid

5 Answers 70 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.
Lucas
Top achievements
Rank 1
Lucas asked on 22 Mar 2012, 02:52 AM
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

5 Answers, 1 is accepted

Sort by
0
Dadv
Top achievements
Rank 1
answered on 22 Mar 2012, 02:27 PM
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.
0
Lucas
Top achievements
Rank 1
answered on 22 Mar 2012, 02:57 PM
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!
0
Dadv
Top achievements
Rank 1
answered on 22 Mar 2012, 04:23 PM
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);
0
Lucas
Top achievements
Rank 1
answered on 23 Mar 2012, 01:24 PM
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
0
Dadv
Top achievements
Rank 1
answered on 23 Mar 2012, 02:30 PM
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.
Tags
Grid
Asked by
Lucas
Top achievements
Rank 1
Answers by
Dadv
Top achievements
Rank 1
Lucas
Top achievements
Rank 1
Share this question
or