I am trying to create my own columns with a checkbox in the header so the user can opt to select all items in a column with ease. The problem is the click event is not registered on the checkbox because it is wrapped in a hyperlink for sorting. Sorting is disabled for that column so the event should propagate but it does not.
$(".selector").igGrid({ autoCommit: true, autoGenerateColumns: false, renderCheckboxes: true, columns: [ { key: "Name", dataType: "string", headerText: "Full Name" }, { key: "IsActive", dataType: "bool", headerText: "<input type=checkbox /> Is Active?" } ], features: [ { name: "Sorting", columnSettings: [ { columnKey: "Name" }, { columnKey: "IsActive", allowSorting: false } ]} ], dataSource: data});
I found that the issue stems from the "_create" method in "infragistics.ui.grid.sorting.js" where it calls "self._handleSort" function. The if condition does not check the column header if sorting is enabled. If it did that then I wouldn't have this problem. Another work around is not to render the hyperlink if sorting is disabled, but there are certain scenarios where I would want to toggle sorting based on certain conditions.
I've attached a screenshot of my grid. The checkbox columns and Priority 'N' columns are dynamic based on the data. The user will manipulate the priorities using controls above the grid to add, delete or shift priorities. They want it in this view but I at the moment I cannot give the ability to mass select a column with sorting enabled.
Thanks,
Hi Daniel,
You can stop the propagation of the input’s click event and then call your custom logic. It will not trigger the sorting and you will be able to check it and uncheck it without disabling the sorting for that column. I attached a sample page that demonstrates my solution. Please review and let me know if it works for you.
I’m looking forward for your reply. Please let me know if you need any further assistance.
Kind regards,
Petko Zhekov
Software Engineer
When I accepted the answer I checked the attachment and it worked perfectly. When trying to apply it to my code, it still causes the columns to sort when I click on the checkbox.
In my grid columns labeled with 'P*' and 'A*' are dynamic.
It is bloated, but here is my grid configuration using Ignite UI 13.2.20132.1010:
$("#Grid").igGrid({ autoCommit: true, autoGenerateColumns: false, height: "400px", width: "100%", renderCheckboxes: true, columns: [ { key: "LocationNumber", dataType: "string", headerText: "PC #", width: "60px" }, { key: "CustomerNumber", dataType: "string", headerText: "Cust ID", width: "100px" }, { key: "AccountID", dataType: "number" }, { key: "AccountName", dataType: "string" }, { key: "AccountNumber", dataType: "string", headerText: "Account", width: "375px", template: "${AccountNumber} - ${AccountName}" }, { key: "CustomerType", dataType: "string", headerText: "Cust<br />Type", width: "60px" }, { key: "AccountType", dataType: "string", headerText: "Acct<br />Type", width: "60px" }, { key: "OutSideSalesNumber", dataType: "string", headerText: "OS #", width: "60px" }, { key: "Matrices", dataType: "string" },{ key: "A1", dataType: "string", headerText: " ", width: "35px" }, { key: "P1", dataType: "string", headerText: "<input type='checkbox' data-priority='1' />Priority 1", width: "90px", unbound: true, formula: function (data, grid) { var value = data["Matrices"].split(",")[0]; if (value) { return "<input type='radio' data-value='" + value + "' data-checked='false' data-priority='1' name='A" + data['AccountID'] + "' /> " + value; } return "";}}, { key: "A2", dataType: "string", headerText: " ", width: "35px" }, { key: "P2", dataType: "string", headerText: "<input type='checkbox' data-priority='2' />Priority 2", width: "90px", unbound: true, formula: function (data, grid) { var value = data["Matrices"].split(",")[1]; if (value) { return "<input type='radio' data-value='" + value + "' data-checked='false' data-priority='2' name='A" + data['AccountID'] + "' /> " + value; } return "";}}, { key: "A3", dataType: "string", headerText: " ", width: "35px" }, { key: "P3", dataType: "string", headerText: "<input type='checkbox' data-priority='3' />Priority 3", width: "90px", unbound: true, formula: function (data, grid) { var value = data["Matrices"].split(",")[2]; if (value) { return "<input type='radio' data-value='" + value + "' data-checked='false' data-priority='3' name='A" + data['AccountID'] + "' /> " + value; } return "";}}, { key: "A4", dataType: "string", headerText: " ", width: "35px" }, { key: "P4", dataType: "string", headerText: "<input type='checkbox' data-priority='4' />Priority 4", width: "90px", unbound: true, formula: function (data, grid) { var value = data["Matrices"].split(",")[3]; if (value) { return "<input type='radio' data-value='" + value + "' data-checked='false' data-priority='4' name='A" + data['AccountID'] + "' /> " + value; } return "";}}], features: [{ name: "Filtering", columnSettings: [ { columnKey: "LocationNumber", allowFiltering: false }, { columnKey: "CustomerNumber" }, { columnKey: "AccountID" }, { columnKey: "AccountName", allowFiltering: false }, { columnKey: "AccountNumber" }, { columnKey: "CustomerType" }, { columnKey: "AccountType" }, { columnKey: "OutSideSalesNumber" }, { columnKey: "Matrices", allowFiltering: false }, { columnKey: "A1", allowFiltering: false }, { columnKey: "P1" }, { columnKey: "A2", allowFiltering: false }, { columnKey: "P2" }, { columnKey: "A3", allowFiltering: false }, { columnKey: "P3" }, { columnKey: "A4", allowFiltering: false }, { columnKey: "P4" }]}, { name: "Hiding", columnSettings: [ { columnKey: "LocationNumber", allowHiding: false }, { columnKey: "CustomerNumber", allowHiding: false }, { columnKey: "AccountID", allowHiding: false, hidden: true }, { columnKey: "AccountName", allowHiding: false, hidden: true }, { columnKey: "AccountNumber", allowHiding: false }, { columnKey: "CustomerType", allowHiding: false }, { columnKey: "AccountType", allowHiding: false }, { columnKey: "OutSideSalesNumber", allowHiding: false }, { columnKey: "Matrices", allowHiding: false, hidden: true }, { columnKey: "A1", allowHiding: false }, { columnKey: "P1", allowHiding: false }, { columnKey: "A2", allowHiding: false }, { columnKey: "P2", allowHiding: false }, { columnKey: "A3", allowHiding: false }, { columnKey: "P3", allowHiding: false }, { columnKey: "A4", allowHiding: false }, { columnKey: "P4", allowHiding: false }]}, { name: "Paging", type: "local", pageSize: "100", prevPageLabelText: "Previous", nextPageLabelText: "Next" }, { name: "Sorting", columnSettings: [ { columnKey: "LocationNumber" }, { columnKey: "CustomerNumber" }, { columnKey: "AccountID" }, { columnKey: "AccountName" }, { columnKey: "AccountNumber" }, { columnKey: "CustomerType" }, { columnKey: "AccountType" }, { columnKey: "OutSideSalesNumber" }, { columnKey: "Matrices" }, { columnKey: "A1", allowSorting: false }, { columnKey: "P1" }, { columnKey: "A2", allowSorting: false }, { columnKey: "P2" }, { columnKey: "A3", allowSorting: false }, { columnKey: "P3" }, { columnKey: "A4", allowSorting: false }, { columnKey: "P4" }]}, { name: "Updating", enableAddRow: false, editMode: "None", enableDeleteRow: false, showDoneCancelButtons: false }], dataSource: data});
When I try your example it works. I changed the Infragistics.core.js and Infragistics.lob.js to point to our codebase. After doing that, it stopped working.
Infragistics.Web.ClientUI Combo 13.2.20132.1010 (fails)Copyright (c) 2011-2013 Infragistics Inc.
vs (latest)
Infragistics.Web.ClientUI Combo 13.2.20132.2012 (works)Copyright (c) 2011-2013 Infragistics Inc.
Until we get the new bits. How can I get this to work for 1010 version?
Could you give me more specific information about the error you have? I tried it with version 1010 and it worked. If you send me a working sample that I can debug it will be even better.