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

[Solved] Ajax Binding, Hidden Column

8 Answers 291 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.

8 Answers, 1 is accepted

answered on 05 Nov 2010, 08:17 AM

Hello MarcSimkin,

In your case I would recommend to not use hidden columns. In ajax binding the data item is available on the client-side so there is no need to have a hidden column for the primary key. You can get the dataItem for a particular row by using the following code:

var tr = grid.$tbody.find('tr:eq(0)');
var dataItem = grid.dataItem(tr);

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 05 Nov 2010, 03:33 PM

Hi Atanas:

Thank you for the clarification, which leads to this question, how do I tell the grid to now auto generate the columns? I have included my code below. The issue here is that teh ProviderUserKey is a really a Guid, which doesn't need to be displayed to the user.

Here is the grid defination code from the view:

<% Html.Telerik().Grid(Model)

.Name("usersGrid")

.DataKeys(keys => { keys.Add(member => member.ProviderUserKey); })

.Columns(columns =>

{

columns.Bound(member => member.ProviderUserKey).Hidden();

columns.Bound(member => member.UserName);

columns.Bound(member => member.Email);

columns.Bound(member => member.IsApproved);

columns.Bound(member => member.CreationDate);

columns.Bound(member => member.LastLoginDate);

columns.Bound(member => member.LastActivityDate);

})

.DataBinding(bindings => bindings.Ajax().Select("GetUserSearchResultsPage", "Users"))

.EnableCustomBinding(true)

.Pageable(pageable => pageable.Enabled(true)

.Total(0)

.PageSize(20)

.Position(GridPagerPosition.Both)

.Style(GridPagerStyles.NextPreviousAndNumeric | GridPagerStyles.PageInput))

.Sortable(sortable => sortable.Enabled(true)

.SortMode(GridSortMode.MultipleColumn))

.Filterable(filterable => filterable.Enabled(true))

.Scrollable(scrollable => scrollable.Enabled(true).Height(1000))

.Render();

%>

The data structure that is being passed to the grid via Ajax is defined as:

public class Member : INotifyPropertyChanged

{

public Member();

[XmlElement(Order = 3)]

public DateTime CreationDate { get; set; }

[XmlElement(Order = 2)]

public string Email { get; set; }

[XmlElement(Order = 6)]

public bool IsApproved { get; set; }

[XmlElement(Order = 4)]

public DateTime LastActivityDate { get; set; }

[XmlElement(Order = 5)]

public DateTime LastLoginDate { get; set; }

[XmlElement(Order = 0)]

public string ProviderUserKey { get; set; }

[XmlElement(Order = 1)]

public string UserName { get; set; }

public event PropertyChangedEventHandler PropertyChanged;

protected void RaisePropertyChanged(string propertyName);

}

I use the following code to retrieve the data needed for the grid:

[GridAction(EnableCustomBinding = true)]

public ActionResult GetUserSearchResultsPage(string userName, string emailAddr, bool newsletterOnly, int pageSize, int pageNumber)

{

int totalRecords = 0;

Member[] userList = null;

if (newsletterOnly)

userList = GetNewsletterUsers(emailAddr, pageSize, pageNumber, out totalRecords);

else

userList = GetMAPUsers(userName, emailAddr, pageSize, pageNumber, out totalRecords);

return View(new GridModel { Data = userList, Total = totalRecords });

}

Accepted

answered on 05 Nov 2010, 03:55 PM

Hi MarcSimkin,

If you don't want a column for the guid - then just don't define one. Delete the following line:

columns.Bound(member => member.ProviderUserKey).Hidden();

You also need to bind the grid entirely on the client-side - change this

<% Html.Telerik().Grid(Model)
to this
<% Html.Telerik().Grid<Member>()

Then the grid will make an ajax request once loaded and you could use the dataItem function.

Alternatively you can try making the hidden column to be the last one.

Regards,

Atanas Korchev
the Telerik team

answered on 13 Jan 2011, 01:12 AM

Here is a more complete code snippet...

var grid = jQuery('#<gridnamegoeshere>).data('tGrid');

var tr = grid.$tbody.find('tr:eq(0)');

var dataItem = grid.dataItem(tr);

var dataElement = dataItem['<nameofelement>'];

You can simplify this a bit...

var dataItem = jQuery('#<gridnamegoeshere>).data('tGrid').dataItem(e.row);

var dataElement = dataItem['<nameofelement>'];

Still having to do that every time, rather annoys me. I would have exepcted the data to be present in the event. So I modified the source of telerik.grid.js a bit. To the "$t.grid.prototype" I changed the rowClick function as follows:

rowClick: function (e) {

var $target = $(e.target);

if (!$target.is(':button,a,:input')) {

e.stopPropagation();

var $row = $target.closest('tr')

.addClass('t-state-selected')

.siblings()

.removeClass('t-state-selected')

.end();

$t.trigger(this.element, 'rowSelect', { row: $row[0], dataItem: this.data[0], grid: this });

}

},

Now you can access the row's data in your rowSelect function through the event args, i.e.

e.dataItem['<nameoftheelement>']

Or you can also find the grid easily:

e.grid

Edited: found a cleaner solution.

answered on 19 Apr 2011, 10:41 PM

Controls Version: 2011.1.315

I just want to add my experience because it's been driving me nuts all day. I was also binding hidden columns like the original poster. Everything worked fine until I deployed the website to our test environment. None of the text columns would render using Internet Explorer 8 (after the ajax callback to get the data rows or after inserting a new row). The columns rendered correctly on Firefox but on IE8. I applied the corrections mentioned by Atanas in his reply and the datagrid columns rendered correctly in IE8.