Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Lakshmi priya
125
Iggrid with inline edit and Row edit dialog box for specified column
posted

Hi all,

I have a IgGird with some inline editable columns. Now I want to display a long text in the same grid. As the text column contains more length, I would like to display this column in a pop up window to feasible for read and edit the text value.

So I went to rowedit dialog box feature of the Iggird (https://www.igniteui.com/help/iggrid-updating-roweditdialog), but it affected the existing editable columns. Now the gird displays all the editable columns in a dialog/popup, so my existing features of the grid is affected.

Now my requirement is, I want to display only one editable column in the popup/dialog box and other editable columns should be in inline edit mode.

kindly help me for to resolve this issue ASAP.

Thanks in advance.

  • 23953
    Offline posted

    Hello Lakshmi,

     

    The easiest way is to use a custom dialog that will pop up only when the user clicks on the "User Comment" cell and will trigger a row edit when user clicks on other columns.

    Here is an example definition of the dialog:

    <div id="dialog" style="display:none">

<textarea id="titleValue"></textarea>

<input type="button" id="save" value="Save"/>

</div>
     

    The decision whether to open the custom dialog or inline editing you can do in the igGrid.cellClick event. Here is an example:

    cellClick: function (evt, ui) {

var colKey = ui.colKey, cellValue;

rowKey = ui.rowKey;

$("#grid").igGridUpdating("endEdit", false);

if (colKey === "Title") {

$("#dialog").igDialog({

state: "opened",

height: 160,

width: 220

});

$("#titleValue").val($("#grid").igGrid("getCellValue", rowKey, colKey));

return;

}

$("#grid").igGridUpdating("startEdit", rowKey, "Title");

}
     

    And the button "Save" click handler:

     

    $("#save").on("click", function (evt, ui) {

$("#grid").igGridUpdating("setCellValue", rowKey, "Title", $("#titleValue").val());

$("#dialog").igDialog("close");

});
    4428.igGridUpdating_RED.zip 

    I'm attaching a working sample for your reference.

     

    Best regards,
    Martin Pavlov
    Infragistics, Inc.