seanpg
seanpg

Reputation: 41

igGrid anchor becomes unreachable when row is edittable

This is my first post, if I have done anything wrong/suboptimally please let me know.

I have an igGrid that is passed generated html code to make one column an tag. This works great if the row is not edittable. I also have a column in the same row that I would like to be able to edit. If I allow editting on the row the tag is no longer functional, as any click on the row enters the row into editting mode. Is there any way to allow editting only on one column? I have disabled editting for the columns that I don't want editted but a click on any of them still enters the entire row into editting mode, with only the allowed column being edittable.

a sample row could look like:

Filename = "<a href='path/Permit/DownloadFile?permitFileID=23'>filename.txt</a>"

Note = "file notes"

Email = "[email protected]"

AddedTime = "2013/05/14"

PermitFileID = "23"

I want to be able to edit the notes column and still be able to click the filename column.

Here is my code:

$(document).ready(function()
{
 $('#attachedFilesGrid').igGrid(
 {
   columns:
   [
     { headerText:"File Name", key: "FileName", dataType: "text"},
     { headerText:"Notes", key:"Note", dataType:"text"},
     { headerText:"Uploaded By", key:"Email", dataType:"text"},
     { headerText:"Date", key:"AddedTime", dataType:"date", format: "yyyy/MM/dd"},
     { headerText:"ID", key:"PermitFileID", dataType:"number"},
  ],
  width:'700px',
  dataSource: fileList,
  autoCommit:true,
  primaryKey:"PermitFileID",
  features:
[{
   name:"Updating",
   enableDeleteRow:true,
   rowDeleting:function(evt, ui)
   {
      $.post(BASEURL + "Permit/deleteFile", { "permitFileID": ui.rowID});
   },
  editRowEnded:function(evt, ui)
  {
     note = $("#attachedFilesGrid").igGrid( "getCellText", ui.rowID, "Note");
     $.post(BASEURL + "Permit/updatePermitFileNotes", { "permitFileID": ui.rowID, "note": note });
  },
  enableAddRow:false,
  editMode:"row",
  columnSettings: [
    { columnKey:"FileName", editorOptions: { disabled: true} },
    { columnKey:"Note", editorOptions: { disabled: false} },
    { columnKey:"Email", editorOptions: { disabled: true} },
    { columnKey:"AddedTime", editorOptions: { disabled: true} },
    { columnKey:"PermitFileID", editorOptions: { disabled: true} },
     ]
},

Upvotes: 1

Views: 559

Answers (1)

seanpg
seanpg

Reputation: 41

I got this figured out, editMode needed to be "cell" and the columnSettings set up thusly:

$('#attachedFilesGrid').igGrid(
        {
            columns:
            [
                { headerText: "File Name", key: "FileName", dataType: "text"},
                { headerText: "Notes", key:"Note",  dataType:"text"},
                { headerText: "Uploaded By", key:"Email", dataType:"text" },
                { headerText: "Date", key:"AddedTime", dataType:"date", format: "yyyy/MM/dd" },
                { headerText: "ID", key:"PermitFileID", dataType:"number"},
            ],
            width: '700px',
            dataSource: fileList,
            autoCommit: true,
            primaryKey: "PermitFileID",
            features:
            [{
                name: "Updating",
                enableDeleteRow: true,
                rowDeleting: function (evt, ui)
                {
                   $.post(BASEURL + "Permit/deleteFile", { "permitFileID": ui.rowID});
                },
              editCellEnded: function (evt, ui)
                {
                   note = $("#attachedFilesGrid").igGrid( "getCellText", ui.rowID, "Note");
                   $.post(BASEURL + "Permit/updatePermitFileNotes", { "permitFileID": ui.rowID, "note": note });
                },
                enableAddRow: false,
                editMode: "cell",
                columnSettings: [
                        { columnKey: "FileName", readOnly: true },
                        { columnKey: "Note",  editorOptions: {disabled: false}},
                        { columnKey: "Email", readOnly: true },
                        { columnKey: "AddedTime", readOnly: true },
                        { columnKey: "PermitFileID", readOnly: true },
                       ]
                },
                {
                name: "Hiding",
                columnSettings: [
                    { columnKey: "FileName", allowHiding: false },
                    { columnKey: "Note", allowHiding: false },
                    { columnKey: "Email", allowHiding: false },
                    { columnKey: "AddedTime", allowHiding: false },
                    {columnKey: "PermitFileID", allowHiding: false, hidden: true}
                    ]
            }],
        });
         getFiles();

Upvotes: 3

Related Questions