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

1300

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

Hello Martin,

I have set the readOnly property to true in the updating column settings, still when i double click on the grid the Image column are coming in edit mode.

Here is the code .

$("#gridSample").igGrid({
            primaryKey: "PKID",
            columns: [
                 { headerText: "ID", key: "PKID", dataType: "number" },
               { headerText: "Purchase Price", key: "PPrice", dataType: "number", formatter: formatCurrency, width: "150px" },
               { headerText: "Edit", key: "Valuation", 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 PropertyPopupOpen(${PKID})' ></img>" },
                  ],
                   autoGenerateColumns: false,

            dataType: "JSON",

            dataSource: DataSource,
           features: [
            {
                name: "Summaries",
                showHeaderButton: false,
                showDropDownButton: false,
                compactRenderingMode: false,
                columnSettings: [
                    {
                        columnKey: "PPrice", allowSummaries: true,
                        summaryOperands:
                                    [
                                        { "rowDisplayLabel": "Sum", "type": "SUM", "active": true }
                                    ],
                    },

                     { columnKey: "PKID", allowSummaries: false },
                     { columnKey: "Valuation", allowSummaries: false }
                ]
            },
        {
            name: 'Selection',
            mode: 'row'
        },
        {
            name: 'Resizing'
        },
        {
            name: "Updating",
            enableAddRow: false,
            editMode: "row",
            enableDeleteRow: false,
            columnSettings: [
            {
           columnKey: "Valuation",
           readOnly: true
           },

            ]

        }
            ],
        });

Is anything going wrong here, I am unable to find it.

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

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

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
10240

[Infragistics] Troy Rodda posted over 11 years ago

Hi Pradeep,

This is to let you know that I have received your inquiry and will be looking into this matter for you. I will follow-up with you on this thread on or before Tuesday.

Thanks,
Cancel
Reply

Cancel