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

Error when retrieving dataItem

2 Answers 1441 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Aleksandar
Top achievements
Rank 1
Aleksandar asked on 23 Feb 2013, 09:55 PM
I have been trying to get this piece of code to work for a while now, and I have run out of ideas. I looked online and could not find anything helpful.

I have a grid defined which has a lists of persons. User can click on the person to add it to their contacts. I have a custom command which does a post to my Action.

This is probably going to end up being something simple that I am overlooking..

I am unable to get the dataItem of the Grid. Following is the error I receive:

Uncaught TypeError: Cannot read property '0' of undefined
y.extend.dataItem 
addContact
p.isFunction.f
p.event.dispatch 
g.handle.h
Following is my Javascript function:

function addContact(e) {
 
        debugger;
 
        e.preventDefault();
 
        var dataItem = this.dataItem($(e.currentTarget).closest("tr")); // <-- ERROR IS HERE
        var id = dataItem.Id
 
        var url = "@Url.Action("AddContact", "Contacts")";
 
        alert(url);
 
        $.ajax({
            url: url,
            type: 'POST',
            data: { contactID: id },
        });
    }


Grid:

@(Html.Kendo().Grid(ViewBag.Contacts as List<Contacts>)   
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.FirstName);
        columns.Bound(p => p.LastName);
        columns.Bound(p => p.ReleaseDate);
        columns.Command(command => command.Custom("Add").Click("addContact")).Width(80).HtmlAttributes(new { title = "Add Contact" });
    })
    .Groupable()
    .Pageable()
    .Sortable()
    .Scrollable(s => s.Height("auto"))
    .Filterable()
    .DataSource(dataSource => dataSource
    .Server()
    .PageSize(50))
)

Used scripts:

<script src="http://cdn.kendostatic.com/2012.3.1315/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
    <script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.aspnetmvc.min.js"></script>
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

I am not sure what is causing this, any help would be appreciated.

Thank you,
Aleks

2 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 26 Feb 2013, 02:35 PM
Hi Aleksandar,

 
From the provided information it seems that the grid currently is configured to use Server binding - please note that when server binding is used the data is rendered directly to the grid and no data is kept on the client side. To achieve the desired behavior I would suggest configure the grid to use Ajax binding instead. Please check the example below:

@(Html.Kendo().Grid(ViewBag.Contacts as List<Contacts>)  
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.FirstName);
        columns.Bound(p => p.LastName);
        columns.Bound(p => p.ReleaseDate);
        columns.Command(command => command.Custom("Add").Click("addContact")).Width(80).HtmlAttributes(new { title = "Add Contact" });
    })
    .Groupable()
    .Pageable()
    .Sortable()
    .Scrollable(s => s.Height("auto"))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(50)
    )
)

 Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Aleksandar
Top achievements
Rank 1
answered on 26 Feb 2013, 11:25 PM
Thank you Vladimir!

That solved it. 

Cant believe it was that simple. I thought it had to be Server binding if data is passed on the server, was thinking things would break if I switched binding to Ajax. 
Tags
Grid
Asked by
Aleksandar
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Aleksandar
Top achievements
Rank 1
Share this question
or