How do I access item values when binding a column?

[Javier]

I'm new to asp.net mvc as well as kendoui so this question may seem trivial (for both kendo and mvc).  But any help/explanation would be greatly appreciated.

I'm building a grid using the kendo ui mvc helper.  And there are many situations where I want to access item data.  I've figured out how to access it when created a template for a given cell as seen below.  

As you can, I've created a function to create a data attribute, and I would like to read that attribute from the database rather than hardcoding it.  Here is the code that I currently have.

    @functions
    {
        public static Dictionary<string, object> BuildGroupNameAttributes(string value)
        {
            var attributes = new Dictionary<string, object> { { "data-groupname", value } };
            return attributes;
        }
    }
    <div id="dotComDiv">
        @(Html.Kendo().Grid(Model)
              .Name("DotComGrid")
              
              .Columns(columns =>
              {                  
                  columns.Bound(p => p.GrossDemand.ThisYear).Title("TY").HeaderHtmlAttributes(BuildGroupNameAttributes("Gross Demand"));
                  columns.Bound(p => p.GrossDemand.ThisYear).Title("TY").HeaderHtmlAttributes(BuildGroupNameAttributes("Gross Demand")).Template(@<text>@string.Format("{0:0,0}", @item.GrossDemand.ThisYear)</text>);
   
              }).Scrollable(src => src.Height(500))
    
    
              )
    </div>

The line that I can't seem to work out is

    columns.Bound(p => p.GrossDemand.ThisYear).Title("TY").HeaderHtmlAttributes(BuildGroupNameAttributes("Gross Demand"));

Instead of hardcoding "Gross Demand" I want to read that from the bound item.  So like,


    columns.Bound(p => p.GrossDemand.ThisYear).Title("TY").HeaderHtmlAttributes(BuildGroupNameAttributes(@item.GroupName));

However, I can't access the item object like this.  But if you look at the template above, I'm able to access `@item` if it's wrapped in `@<text>`

Why is that, and how can I pass the item value to the function?

Thanks!

[Vladimir Iliev]

Hi Javier,

Basically current behavior is expected as the "item" is available only for templates that are executed for all items, however the "HeaderHtmlAttributes" is executed only once to generate the attributes for the column header. Could you please provide more detailed information about what exactly you are trying to achieve? That way we will be able to advise you further how to proceed.

Regards,
Vladimir Iliev
Telerik

[Javier]

Is it possible to do this with the HTMLAttributes?  I want to set a data-??? value to a dynamic value so I can manipulate it later in js.

[Vladimir Iliev]

Hi Javier,

Please find the answers of your questions below:

1) As you can, I've created a function to create a data attribute, and I would like to read that attribute from the database rather than hardcoding it. - You can load that attribute from the DataBase on the server and pass it to the view using ViewBag.

2) Is it possible to do this with the HTMLAttributes - I'm not sure that I understand correctly what are you trying to achieve - could you please provide more details about the desired behavior?

Kind Regards,
Vladimir Iliev
Telerik

[Javier]

Okay, so let's say I'm binding the grid to a generic list of objects.  The objects have several properties including "name", "dob", "id".

I don't wan the "id" to display as part of the grid.  So, for each row, I want to add the id as an attribute to the cell. 

So that the table will look like

<table>
<tr>
<td data-id='1'>John</td>
<td data-id='2'>Jack</td>
<td data-id='3'>Jane</td>
<td data-id='4'>Joe</td>
<tr>

The viewbag won't work here, because I want row specific data.

Also, I've purchased a license.  So, I'll be responding from this thread from a different account.  (Buddy).

[Vladimir Iliev]

Hi Javier,

Please note that the rows of the Grid contains by default "data-uid" attribute which can be used to get the underlying model from the dataSource. Please check the example below:

var grid = $("#grid").data("kendoGrid");
var firstRow = grid.content.find("tr:first");
var rowUid = firstRow .attr("data-uid");
grid.dataSource.getByUid(rowUid);

Also if you need to add the model ID to the Grid rows as well you can use the DataBound event of the Grid - please check the example below:

function onDataBound(e) {
    var grid = this;
    grid.content.find("tr").each(function() {
        var row = $(this);
        var dataItem = grid.dataItem(row);
        row.attr("data-id", dataItem.id);
    })
}

Regards,
Vladimir Iliev
Telerik

[Jonathan Travis]

Thank you for the help.

Your solution is a step in the right direction.  But I just used "ID" for clarification.

Just to be clear.  There is absolutely no way to do this with the HTMLAttributes property.  Correct?
If it is not possible, do you think it will ever be possible?  I'm used to asp.net grids where I can access all the properties of a bound row.  Not just one.

[Vladimir Iliev]

Hi Buddy,

Please note that you can define your custom ClientRowTemplate (for rows rendered on the client side) or RowTemplate (for rows rendered on the server side) - that way you will have full control over the outputed Html. 

Regards,
Vladimir Iliev
Telerik