Hi,
I am using igGrid and i have a column like refer attached image and below is the requirements:
1. Check status - when clicking check status link, then sorting should happen
2. Image 'I' icon - when clicking image then some information will be display as tool tip
My problem is:
When i clicking 'I' icon image in ipad, toot tip is displaying and same time sorting happens.
I don't want sorting when clicking 'I' icon image
This is not working in the devices such ipad but same working fine in desktop browses like IE, Chrome etc
Please help me in this regards
Regards.
Ashok
Hi infragistics,
Any updates on this?
Regards,
Hi Ashok,
Thank you for posting in our forums!
I will need a little more information. Provide the following details for me so I may better assist you with this issue.
1. What code you are using to create the 'i' icon in the header?2. What code are you using to handle clicking the 'i' icon?
Looking forward to hearing from you.
Below code for creating columns in igGrid
$( "#ExportPaymentsgrid" ).igGrid( { autoGenerateColumns: false, renderCheckboxes: true, width: "100%", rowsRendered: function (evt, ui) { gridRendered(evt, ui); }, columns: [ { headerText: "Activity" + Divider + "Date", key: "ActivityDate", width: DateWidth, dataType: "date", format: "MM/dd/yy" }, { headerText: "Activity" + Divider + "ID", key: "ActivityIdentity", width: ActivityNoWidth, dataType: "string" }, { headerText: "Invoice Id", key: "PaymentID", dataType: "string", width: InvoiceIDWidth, hidden: BoolValue, template: $( "#EditInvPopup" ).html() }, { headerText: "Payment" + Divider + "Type", width: PaymentTypeWidth, key: "CheckType", dataType: "string" }, { headerText: "Payment" + Divider + "Amount", key: "PaymentAmount", dataType: "decimal", width: PaymentAmountWidth, format: "##0.00", template: $("#PaymentAmountPopup").html() }, { headerText: "Invoice" + Divider + "Status", key: "InvoiceStatus", width: InvoiceStatusWidth, dataType: "string", hidden: BoolValue }, { headerText: "Mail" + Divider + "Date", key: "CheckDateDisplay", width: CheckDateWidth, dataType: "date", format: "MM/dd/yy" }, { headerText: "Check" + Divider + "Number", key: "CheckNumber", width: CheckNumberWidth, dataType: "string" }, { headerText: "Expense" + Divider + "Status", key: "ExpenseStatus", width: ExpenseStatusWidth, dataType: "string", hidden: ExpenseBoolValue }, { headerText: $("#CheckStatusIcon").html(), key: "CheckStatus", width: CheckStatusWidth, dataType: "string" }, { key: "CityState", dataType: "string", hidden: true }, { key: "WithHoldingAmount", dataType: "decimal", format: "currency", hidden: true }, { key: "WithHoldingBy", dataType: "string", hidden: true }, { key: "ApprovedBy", dataType: "string", hidden: true }, { key: "Comments", dataType: "string", hidden: true }, { key: "ExpenseKey", dataType: "string", hidden: true }, { key: "ConsultantTypeId", dataType: "Number", hidden: true }, { key: "IsPRFaculty", dataType: "Number", hidden: true }, { key: "PaymentNumber", dataType: "Number", hidden: true }, { key: "Reissue", dataType: "Number", hidden: true }, ], dataSource: result.data, responseDataKey: "result", features: [ { name: "Responsive",
enableVerticalRendering: false, columnSettings: [ { columnKey: "activityDate", classes: "ui-hidden-phone" } ], responsiveModes: { customPhone: { minWidth: 0, maxWidth: 600 }, // alternative mode customAlt: { minWidth: 601, maxWidth: Number.MAX_VALUE } } }, { name: "Sorting", type: "local" } ]
} ); } );
Below code for script for binding column check status
script id="CheckStatusIcon" type="text/template">
Check Statusimg class='imgicon' src='../../Content/themes/base/images/compound.png' id='infoIconImg' width="16" height="16" />
Below code for tool tip of i icon
var bodytext = 'test'
$("img#infoIconImg").tooltip({ content: bodytext, tooltipClass: "checkstatustooltip", position: { my: positionfortooltip, at: "left top", using: function (position, feedback) { $(this).css(position); } }, show: false, hide: false });
when i clicked 'i' icon in ipad, sorting should not happen but currently sorting happen.
Sorting should happen only when clicking check status link.
Thank you for the sample code. Since I am still unsure of how you are handling the click event for the tooltip, I have put together a sample that used event.stopPropagation() to prevent the column from being sorted if the user clicks on the icon.
I have attached my sample to this case for demonstration. If you have any further questions or concerns with this, please let me know.
Your solution is working fine. Thanks for that
Please see attached image and asking some question
Why arrow mark is moved to top?
Why column sorting colour is applied when clicking on image?
Is there any solution to avoid both?