Hi Ashok,

The arrow appears at the top in my sample due to the styling that is applied.  I was also trying to mimic your header based on the screenshots and I added a
tag in the header's template.  Looking at your screenshots, you have the arrow appearing next to the 'i' icon.  This is based on the styling and my solutions should not affect your application's styling.

As for the style being applied to the header, this is applied through a mousedown event.  You can prevent this by handling a mousedown event on your image and cancelling the event.  The following code can be used for this:

$("img#infoIconImg").on("mousedown", function(evt) {
    return false;
});

I have modified my sample with the above suggestion and attached it to this post.

If you need any further assistance with this, please let me know.

Hi infragistics,

Any updates on this?

Regards,

Ashok

Hi, 

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?

Regards,

Ashok

Hi Ashok,

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.

Hi,

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
Status
img 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.

Regards,

Ashok