Kendo grid change event fires only once per row selection

Question

In a MVC4 project, I've got a kendo grid that fires an event when a row is selected.

<div id="datagrid">
@(Html.Kendo().Grid<SustIMS.Models.StretchModel>()
    .Name("datagrid_Stretches")
    .Columns(columns =>
    {
        columns.Bound(s => s.StretchCode).Title(ViewBag.lblCode).Width(80);
        columns.Bound(s => s.StretchMediumDescription).Title(ViewBag.lblDescription);
        ...
    })
    .Events(e => e.Change("onChange"))    <--------- here's the event
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(15)
        .Read(read => read.Action("GetStretches", "MasterData"))
    )
)
</div>

So, when I select a row, the onChange function is called:

function onChange() {
    var code = this.dataItem(this.select()).StretchCode;
    $.get('@Url.Content("getStretchCode")',
        { "code": code });
}

In my controller, the code is retrieved and some operations are done with it.

public void getStretchCode(string code)
{
    currentStretch.RoadComponentCode = code;
    ...
}

This works fine. The problem is, the event is fired every time I select a different row but if I select a row that was previously selected, the event isn't fired and I can't get the code of that row.

Any help?

Hi, can you please provide more details may be a sample jsbin of your code, because it fires each time. Please have a look at this link: http://dojo.telerik.com/@NitinMall/Axap — Nitin Mall, Jul 28 '14 at 14:36
I don't know, as you can see the grid is Razor HTML helper code. The grid doesn't show in jsbin — chiapa, Jul 28 '14 at 15:01
The event fires when the row selection __changes__. Selecting the same row that's already selected changes nothing, so no event is fired. — Brett, Jul 29 '14 at 15:01
@Brett, you must have misunderstood. Picture this: I select `row1` -> the event fires and gives me `id=1`; I select `row2` -> the event fires and gives me `id=2`; I select `row1` again -> the event isn't fired and the id remains `id=2`. It's not "selecting the same row that's already selected", as you said, but a row that has been selected before. Can you help? — chiapa, Jul 29 '14 at 15:05
@Brett, the grid is `.Selectable()` otherwise I couldn't select rows at all — chiapa, Jul 29 '14 at 15:29

Jaimin · Accepted Answer · 2014-07-30T10:56:27.460

2

Add .Selectable() in your grid so it allow you select previously row.

@(Html.Kendo().Grid<SustIMS.Models.StretchModel>()
    .Name("datagrid_Stretches")
    .Columns(columns =>
    {
        columns.Bound(s => s.StretchCode).Title(ViewBag.lblCode).Width(80);
        columns.Bound(s => s.StretchMediumDescription).Title(ViewBag.lblDescription);
        ...
    })
 .Selectable(selectable => selectable
            .Type(GridSelectionType.Row)  <--------- Add This
            )
    .Events(e => e.Change("onChange"))    
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(15)
        .Read(read => read.Action("GetStretches", "MasterData"))
    )
)

Script

function onChange() {
    var code = this.dataItem(this.select()).StretchCode;
    $.post('@Url.Content("getStretchCode")',
        { "code": code });
}

edited Jul 30 '14 at 10:56

answered Jul 30 '14 at 07:26

Jaimin

7,964
2
25
32

Isn't just `Selectable()` enough? **Edit**: I'm sorry but it didn't work, it still doesn't fire the event. I already had `Selectable()` without the `GridSelectionType` but neither of them works – chiapa Jul 30 '14 at 08:26
yes `.selectable()` is enough. I don't know why it's not working for you. – Jaimin Jul 30 '14 at 08:31
@chiapa see this Demo: http://jsbin.com/honavive/4/edit , it's working perfectly fine here. – Jaimin Jul 30 '14 at 08:49
Yes, it works there but I'm using Razor html helper and not javascript, maybe that's the problem? Or is the problem in my javascript `onChange()` function? Would you mind checking it? Try to alter your `onChange` function to show the alert box but with the selected row id – chiapa Jul 30 '14 at 08:55
@chiapa yes i know i am using Razor to. But for example i am using java script. it's working fine in my razor syntax. – Jaimin Jul 30 '14 at 09:10
@chiapa post you full Grid and Script function. So i see your code and let you know where is problem is any there. – Jaimin Jul 30 '14 at 09:27
@chiapa i already look into your question and i am working on that. – Jaimin Jul 30 '14 at 10:57

LittleDragon · Answer 2 · 2014-07-30T11:22:55.807

2

you should add Selectable() before add event like this

 .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple)
            .Type(GridSelectionType.Cell))
.Events(e => e.Change("onChange"))

edited Jul 30 '14 at 11:22

answered Jul 30 '14 at 11:01

LittleDragon

2,317
2
18
23

You mean `.Events(events => events.DataBound("onChange"))`? – chiapa Jul 30 '14 at 11:11
Thanks for your answer but unfortunately, it doesn't work. The issue remains – chiapa Jul 30 '14 at 11:29
did you add these code ? .Selectable(selectable => selectable .Mode(GridSelectionMode.Multiple) .Type(GridSelectionType.Cell)) – LittleDragon Jul 30 '14 at 11:32
we also use kendo grid but didint get problem like this we only use Selectable keyword – LittleDragon Jul 30 '14 at 11:39
ohh is this only problem with IE ? – LittleDragon Jul 30 '14 at 11:47
The problem was in the javascript function: by changing `$.get` to `$.post`, it now works fine. **edit**: no, the IE issue is in [another question](http://stackoverflow.com/questions/24883572/javascript-runtime-error-object-doesnt-support-property-or-method-in-interne) - I'm sorry, I posted that by accident! – chiapa Jul 30 '14 at 11:47
ohh you passing value with $.get – LittleDragon Jul 30 '14 at 11:48

Kendo grid change event fires only once per row selection

2 Answers2

Linked