1

我正在使用Ignite UI 网格。当特定编辑器专注于新行插入或更新时，我必须打开一个对话框。编辑模式是“行”。

我能够打开对话框，我为此使用了editCellStarted事件并将编辑器绑定到焦点事件。代码如下：

             $("#Grid").igGrid({
                       primaryKey: "keyCode",                           
                       autoCommit: true,
                       columns: _getColumnsResult,                           
                       features: [
                        {
                            name: 'Updating',                               
                            columnSettings: updateColSettings,                                
                            editMode: 'row',                                
                            editCellStarted: function (evt, ui) {
                              if(ui.columnKey=="Demo")
                             { 
                               $("#" + ui.columnkey + " input").bind('focus', { id: ui.columnIndex}, function (e) {                                          
                                $("dialog1").dialog();                                            
                               });                                  
                             }                                                                   
                            },          
                        }, //Updating feature ended                  
                        {
                            name: "Sorting",
                            type: "local",
                        },
                        {
                            name: "Selection",
                            mode: "row",
                            rowSelectionChanged: function (evt, ui) { Selectedrow = ui.row.index }
                        }]
                    });

问题： 单击添加新时，如果该特定列是第一列，则焦点转到对话框并返回到编辑器。焦点不会保留在对话框中。

但如果该列不是第一列，则代码工作正常。

请帮助完成此任务。提前致谢。

这是它的小提琴。

4

2 回答 2

1

我不能在这里测试，如果你能提供一个 jsFiddle 作为例子会很好，但可能是其他东西绑定到那个将焦点返回到行的事件，你可以尝试更改 if 子句中的代码加上：

$("#" + ui.columnkey + " input").bind('focus', { id: ui.columnIndex}, function (e) {                                          
    e.stopPropagation();
    $("dialog1").dialog();
});

停止触发任何其他处理程序的焦点事件。

否则，您将不得不找出导致焦点回到该行的原因。

编辑

好的，所以看起来焦点实际上首先到达那里（在对话框事件触发之前），不确定为什么对话框不保持焦点 - 也许它是异步的并且那里存在时间问题，但你可以通过修复它强制焦点到对话框。我在您的输入中添加了一个 ID，然后在事件处理程序中使用了它：

$("#" + ui.columnKey + " input").bind('focus', function (e) {
    $("#dialog").dialog();
    $("#dia_inputbox").focus();
});

在这里工作小提琴

此外，我原以为您不需要绑定到focus，而是直接在处理程序中弹出对话框editCellStarted- 这有效，但您无法将焦点移回，如果您停止传播，则单元格不会编辑适当地。我也试过了editCellStarting。上面的解决方案有效，但感觉有点像黑客，应该有一种更干净的方法，但我不确定它是什么。

于 2013-12-05T07:44:05.483 回答
1

作为替代方案，由于您提供了编辑器选项，如果仅在一个字段上需要此对话框，则可能会处理一些编辑器事件？像这样：

//...
 {
    columnKey: "Name",
    editorOptions: {
        id: "Name",
        type: 0,
        focus: function (evt) {
            $("#dialog").dialog().children("input").focus();
        }
    }
}
//...

小提琴

在所有编辑器上处理焦点事件（并删除它）会使它们无法编辑，从而违背了它们的目的。如果这就是你所追求的，它几乎感觉就像使用行编辑模板（是的，你仍然可以使用编辑器事件在那里弹出一个对话框）。如果您让我更深入地了解对话背后的想法究竟是什么，我也许可以提供更多方法来做到这一点:)

于 2013-12-10T09:21:32.743 回答