Image in Edit mode is hiding | Infragistics Forums

1300

Image in Edit mode is hiding

Shahin Kohan posted over 11 years ago

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

Parents

23953

Offline Martin Pavlov posted over 11 years ago

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 Pavlov
Infragistics, Inc.
Cancel
Reply

Cancel
1300

Offline Shahin Kohan posted over 11 years ago in reply to Martin Pavlov

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.

Thanks

Pradeep
Cancel
Reply

Cancel
23953

Verified Answer
Offline Martin Pavlov posted over 11 years ago in reply to Shahin Kohan

Hello Pradeep,

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
}
]
}

Hope this helps,
Martin Pavlov
Infragistics, Inc.
Cancel
Reply

Reject Answer

Cancel
1300

Offline Shahin Kohan posted over 11 years ago in reply to Martin Pavlov

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.

Thanks

Pradeep
Cancel
Reply

Cancel
8421

Jason D. posted over 11 years ago in reply to Shahin Kohan

Hello Pradeep,

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?

igGridImageEditMode.zip
Cancel
Reply

Cancel

Reply

1300

Offline Shahin Kohan posted over 11 years ago in reply to Jason D.

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.

Thanks

Pradeep
Cancel
Reply

Cancel

Children

18204

Offline [Infragistics] Michael H. posted over 11 years ago in reply to [Infragistics] Michael H.

Hi Pradeep,

Please let us know if you have any further questions or concerns with this issue and we will be glad to help.
Cancel
Reply

Cancel
18204

Verified Answer
Offline [Infragistics] Michael H. posted over 11 years ago in reply to Shahin Kohan

Hello Pradeep,

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.
Cancel
Reply

Reject Answer

Cancel