剑道UI网格--通过命令按钮的点击来选择行。

Question

我有一个启用了行选择的网格和一个命令按钮（带点击事件）。

"通常 "当我按下按钮时，相应的行被选中，然后按钮的点击事件被触发。这是我想要的正确行为！但是 "有时 "行的选择并没有发生，只有按钮的点击事件被触发。

我无法在fiddle上重现所有的代码，但我会在下面给你详细的说明

[剑道使用版本：剑道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）一开始我以为是 "时间问题"。我认为 "有时 "选择需要更多的时间，所以按钮的点击事件首先发生。为了解决这个问题，我试着将按钮的点击事件的所有代码用以下方法包起来。

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

但也用这个问题随机存在。

2) 我尝试使用 e.preventDefault(); 在按钮的点击事件的开始部分，以避免按钮标记中的某些东西干扰，但这并不奏效。

你能给我建议任何链接，资源，视频，课程来学习调试javascript框架，如kendo，一步一步地观察当我点击一个按钮时内部发生了什么（在我的情况下，了解在什么情况下行没有被选中）。如果没有这方面的知识，就很难调试这样的应用程序。

Answer 1

当你点击自定义命令(按钮)时，你会看到 onChange 事件没有发生，因此你在该事件中没有任何东西。Master.SelectedDocument 而选择没有发生。从内部进行选择 Master.download 函数。

试试下面的代码。

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);
        }
    });
}

这种方法确实忽略了 onchange 事件，如果你需要使用 onchange 为了其他目的，它仍然需要改变。

你可以从自定义命令中手动突出显示。

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

或者看看这是否可行:

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

Answer 2

点击按钮 "有时 "事件会发生，有时不会(我已经用浏览器的开发工具调试过了--IEFirefox)...我不明白为什么。

总之，按照你的建议，我把选择的内容输入到了

Master.download = function (e) {

    e.preventDefault();

    var model = this.dataItem($(e.currentTarget).closest("tr"));
    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;
    ......  

而且实际上工作得很好(GREAT!!!)，在某种意义上，我得到了正确的数据行，所以我可以正确地做其他事情。

但该行没有被 "高亮 "的问题仍然存在（因为正如你所说，我的变化事件没有发生）。

现在，我可以 "程序化 "地选择行，以便引发onchange事件 "总是"=。