iggridupdating - 在键入时更新网格单元格值

时间:2013-06-18 13:44:39

标签: infragistics ignite-ui iggrid

我正在使用Infragistics的igGrid来处理我公司的Web应用程序上的数据。我们希望将网格用作用户数据交互的“可编辑网格”(添加/编辑/删除/查看记录)。

我想要播放的场景是当用户将有效的项目名称输入到新行中的一个单元格中时,下一个单元格将自动填充该项目的相应描述。到目前为止,我无法自动更新。

1 个答案:

答案 0 :(得分:3)

我相信the official "Editing Combo Editor" sample将为您提供您正在寻找的答案:)

如其说明中所述,更改“产品名称”列会自动填写“价格”列。 注意:您需要先选择“类别名称”,但

为了获得理想的结果,您需要实施两个步骤:

  1. 在igGrid的上下文中挂钩到igCombo的“Selection Changed”事件,因为igCombo实例将成为igGrid DOM的子节点:

    $(document).delegate("#grid1", "iggridrendered", function (evt, ui) {
    var updating = $("#grid1").data("igGridUpdating");
    var editor = updating.editorForKey("ProductID");
    if (editor) {
        $(document).delegate("#comboProductID", "igcomboselectionchanged", comboSelectionChanged);
    }
    else {
        var colSettings = updating.options.columnSettings;
        colSettings[2].editorOptions.selectionChanged = comboSelectionChanged;
    }});
    
  2. 编写一个事件处理程序,它将更新所需列的编辑器字段(在本例中为Price):

    function comboSelectionChanged(evt,ui){ var items = ui.items || []; if(items.length === 1){     var item = items [0];     var editor = $(“#grid1”)。igGridUpdating(“editorForKey”,“Price”);     $(编辑).igEditor(“value”,products [item.index] .Price); } }

  3. 这些步骤取自Sample的HTML代码视图(位于网格下方)。 如果您想更好地查看该代码视图片段,我已将其放在一个独立的JSFiddle中:http://jsfiddle.net/BorislavTraykov/4uJBD/

    如果解决方案无法解决问题,请详细说明您要实现的方案。