kendo ui grid - row selection with command button's click

Question

I've a grid with row selection enabled and a command button (with click event).

"Usually" when I press the button, the respective row is selected and then the button's click event is fired. This is the correct behaviour that I want! But "sometimes" the selection of the row doesn't occur, only the button's click event is fired.

I can't reproduce all the code on fiddle but I'll give you the details below

[kendo used version: Kendo UI Complete v2013.1.319]

var Master = {};
Master._height = null;
Master._resSolDataSource = null;
Master._followUpDataSource = null;
Master._filter = {};
Master.SelectedDocument = {};
Master.followUpWindow = null;

Master.init = function () {

    Master._resSolDataSource = new kendo.data.DataSource({
      .........
      ....
    });


    //Inizialize the adminGrid
    $("#adminGrid").kendoGrid({
        autoBind: false,
        dataSource: Master._resSolDataSource,
        selectable: true,
        pageable: true,
        change: Master.onRowChange,  
        heigt: 300,
        columns: [{
            field: "Id",
            hidden: true   
        }, {
            field: "Piva",
            title: "Partiva IVA"
        }, {
            field: "RagioneSociale",
            title: "Ragione Sociale"
        }, {
            field: "Data",
            format: "{0:dd/MM/yyyy}"
        }, {
            field: "Diniego",
            title: "Diniego"
        }, {
            field: "AnnoRiferimento",
            title: "Anno di riferimento"
        }, {
            field: "MeseRiferimento",
            title: "Mese di riferimento"
        }, {
            field: "Stato"
        }, {
            command: [
                {
                    name: "download",
                    click: Master.download
                }
            ],
            title: " ",
            width: 180
        }]
    });

    //double click has the same behaviour of the button click
    $("#adminGrid").delegate("tbody>tr[role=row]", "dblclick", Master.download);

    $("#btnSearch").click(function () {
        .....
        ....
        //load data
        Master._resSolDataSource.read();
    });
}

//richiamato ogni volta che si clicca su una riga (se la griglia è selectable: true)
Master.onRowChange = function () {

    var model = this.dataItem(this.select());

    Master.SelectedDocument = {};
    Master.SelectedDocument.IdDocument = model.Id;
    Master.SelectedDocument.Stato = model.Stato;
    Master.SelectedDocument.AnnoRiferimento = model.AnnoRiferimento;
    Master.SelectedDocument.MeseRiferimento = model.MeseRiferimento;
    Master.SelectedDocument.Piva = model.Piva;
}


//this is called by the button's click
Master.download = function (e) {

    //e.preventDefault();

    var selDoc = {};

    selDoc.IdDocument = Master.SelectedDocument.IdDocument;
    selDoc.status = Master.SelectedDocument.Stato;
    selDoc.AnnoRiferimento = Master.SelectedDocument.AnnoRiferimento;
    selDoc.MeseRiferimento = Master.SelectedDocument.MeseRiferimento;
    selDoc.Piva = Master.SelectedDocument.Piva;

    $.ajax({
        type: "POST",
        url: 'PdfManager/Index',
        data: JSON.stringify(selDoc),
        contentType: "application/json; charset=utf-8",
        //dataType: "text",
        dataType: "html",
        success: function (event) {
            var win = window.open();
            win.document.write(event);
        }
    });
}

1) at the first I thought that it was a "timing problem". I thought that "sometimes" the selection takes more time to be selected, so the button's click event occurs first. In order to fix this i've tried to wrap all the code of the button's click event by

setTimeout(function(){
    ....
    //click event code
},1000);

but also with this the problem randomly persists.

2) I've tried to use e.preventDefault(); at the beginning of the button's click event to avoid that something in the button markup interferes, but this doesn't work as well.

Can you suggest me any links, resouces, video, courses to learn debugging javascript framework like kendo, to watch step by step what happens internally when I click a button(in my case to understand in what cases the row is not selected). It's difficult to debug an application like this if one doesn't have this knowledge.

Vojtiik Vojtiik · Accepted Answer · 2014-04-02T11:55:33

When you click the custom command (button), the onChange event doesn't fire, therefore you have nothing in the Master.SelectedDocument and the selection is not occurring. Do the selection from within Master.download function.

Try following code:

Master.download = function (e) {
    e.preventDefault();

// get the row with the button    
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

// get the values to your payload object
var selDoc = {};
    selDoc.IdDocument = dataItem.IdDocument;
    selDoc.status = dataItem.Stato;
    selDoc.AnnoRiferimento = dataItem.AnnoRiferimento;
    selDoc.MeseRiferimento = dataItem.MeseRiferimento;
    selDoc.Piva = dataItem.Piva;

 $.ajax({
        type: "POST",
        url: 'PdfManager/Index',
        data: JSON.stringify(selDoc),
        contentType: "application/json; charset=utf-8",
        //dataType: "text",
        dataType: "html",
        success: function (event) {
            var win = window.open();
            win.document.write(event);
        }
    });
}

This approach does ignore the onchange event, if you need to use the onchange for other purposes it still need to be changed.

You can highlight manually from the custom command :

$(e.currentTarget).closest("tr").addClass('highligted')

OR see if this would work :

 grid.select( $(e.currentTarget).closest("tr"));

kendo ui grid - row selection with command button's click

2 Answers