Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
2225
Adding columns in addition to the data
posted

I have a grid that is consuming data from a DataSourceUrl. This data is from an EF model.  I have all the columns I want to display defined and everything is populating correctly. If, now, I wanted to add an additional column that had an Html.ActionLink() pointing to another view and passing in the ID of the record. This would be to a view containing more details regarding that record.

So, that said, how would you recommend doing this? Is it possible to do in the view while defining columns to add the new column, and then use a RowTemplate? Is there a better way?

I'm using  C#, MVC3 w/ Razor Engine.

Thanks,
Tony

 

  • 24671
    posted

    Hi Tony,

    The jQuery grid doesn't support unbound columns in this sense, out of the box, but i can give you a solution with some custom code. Even if it had unbound columns, for the scenario that you're describing you'd still need some custom logic.

    So here are the steps:

    1) Enable jQuery templating by setting JQueryTemplating(true) , assuming you are configuring the grid in the MVC View

    2) Set a RowTemplate, so let's say you have 4 columns, ProductID, ProductName, ListPrice and ModifiedDate. In your template there will be an extra column for the action links:

    JQueryTemplating(true).RowTemplate("<tr><td>${ProductID}</td><td>${Name}</td><td>${ModifiedDate}</td><td>${ListPrice}</td><td><a href='#' onclick='getDetails(event);'> do something extra</a></td></tr>")

    3) In your columns collection, add an extra column (When you point it to the business object property, that can be any property from the object, preferrably a dummy/empty one, since you are not going to use the data values associated with it anyway. you can also link it to the primary key column if you aren't using indexes, so that you can easily get the primary key value instead of the row index):

        column.For(x => x.SomeProperty).HeaderText("custom column").Width("100px");

    4)  Define the getDetails function from the row template in step 2:

            function getDetails(e) {
                var event = e ? e : window.event;
                var row = $(event.target).closest("tr").index();
                //return url. If current URL is http://mysite/SomeControllerAction, it will become http://mysite/SomeControllerAction/<rowid>
                location.href = location.href + "/" + row;
            }

    So basically when you click on the first row, this will result in this:

    http://mysite/SomeControllerAction/0

    if you click on the second, it will result in:

    http://mysite/SomeControllerAction/1

    and so on.I've also attached a screenshot with how the grid looks like with the extra unbound column.

    Hope it helps. Thanks,

    Angel