Hi
I am using Jquery iggrid in my application and i have placed an "edit Image button" in it for opening the row data in a jquery poup but when ever i am double click on the row the inline editmode is appearing and the Image column is coming in edit mode, which i don't required .
I have to make the Image column as non-editable so i try to make the column as read-only and disable also but no good.
Here is the sample code
$("#gridigGrid({ height: height, primaryKey: "PkID", columns: [ { headerText: "Address", key: "Address", dataType: "string", width: "220px", formatter: formatAddress }, { headerText: "Edit", key: "Valuation", dataType: "image", width: "50px", display: "none", template: "<img alt='Img' title='title' id='delete-${PkID}' src='/Images/Preview.png' style='padding-left: 10px;' onclick='return PopupOpen(${PkID})' ></img>" }, ], autoGenerateColumns: false, dataType: "JSON", dataSource: data features: [ { name: "Updating", enableAddRow: false, editMode: "row", enableDeleteRow: false, columnSettings: [ { columnKey: "Address", editorOptions: { type: "string", disabled: true, display: "none" } }, { columnKey: "Valuation", editorOptions: { type: "string", disabled: true, display: "none" } }, ] } ] }));
Thanks
Pradeep
Hello Pradeep,
igGrid Updating is listening for key and mouse events in order to enter edit mode. By default updating enters edit mode on "click,f2,enter". The result is that when you click on the image the grid will enter edit mode, because it listens for click events.
You have 2 options to deal with this:
1.Customize when updating enters edit mode with the igGridUpdating.startEditTriggers option. For example if you want to disable entering edit mode use the following code:
startEditTriggers: ""
2. Cancel the click event bubbling by calling event.stopPropagation() in the PopupOpen function.
Hope this helps,Martin PavlovInfragistics, Inc.
Hi Martin,
Thanks for your reply. As you are suggesting to use startEditTriggers: "" or event.stopPropagation() , but if i use the startEditTriggers: "" then the the grid become uneditable. but i have to use both inline editing and the Image column should be read only.
Try to set the readOnly property to true in the updating column settings.
Here is an example code:
{ name: "Updating", columnSettings: [ { columnKey: "Valuation", readOnly: true } ]}
Hello Martin,
Have you check the above response.
there i set the readOnly property to true in the updating column settings. but its not working.
Please Check it once.
I put together a small sample using the code you provided and I was unable to reproduce the behavior you are describing. When I enter edit mode for a row the image column does not enter edit mode and the image is still visible.
I ran this test using the latest version of Ignite UI 2013 Vol. 1. Are you able to reproduce this behavior with the attached sample?
Hi Pradeep,
Please let us know if you have any further questions or concerns with this issue and we will be glad to help.
I am glad to hear the previous issue has been resolved. You can configure the grid to enter edit mode by the GridUpdating's startEditTriggers option.
You can set this property to the following to enable only double clicks to enter edit mode:
startEditTriggers: "dblclick",
You can find more information on this option in our documentation here: http://help.infragistics.com/jQuery/2013.1/ui.iggridupdating#options
If you have any further questions with this, please let us know and we will be glad to help.
Hello Jason,
I have tried the sample code and its working fine and i changed the column setting to
{ headerText: "Preview", key: "Version", dataType: "image", width: "50px", display: "none", template: "<img alt='Img' title='Property' id='delete-${PKID}' src='/Images/Preview.png' style='padding-left: 10px;' onclick='return PopupOpen(${PKID})' ></img>" },
and set the updating column to
{ columnKey: "Version",readOnly:true },
and its working fine now.
Mean while i have another issue.
I have to show the grid in edit mode when i double click in it, but if the row is already selected then by single click also it is displaying in Edit mode.