{"id":395,"date":"2012-08-13T08:16:00","date_gmt":"2012-08-13T08:16:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=395"},"modified":"2025-02-26T08:30:44","modified_gmt":"2025-02-26T08:30:44","slug":"jquery-grid-checkbox-column","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/jquery-grid-checkbox-column","title":{"rendered":"jQuery Grid Checkbox Column Alternatives"},"content":{"rendered":"\n

The checkbox column (introduced with the last release, see this post on Using Checkbox Columns with the Infragistics jQuery Grid) was created to provide a \u2018shortcut\u2019 for transforming columns with Boolean values into checkboxes and mostly became reality due to the great interest in such functionality from customers (and after all it does make perfect sense).<\/p>\n\n\n\n

\"jQuery<\/figure>\n\n\n\n

Of course, this isn\u2019t a perfect world and creating defaults that can fit everyone\u2019s needs is probably a lost cause. If you take a look at the introductory blog above, it is indeed saving tons of time \u2013 setting a single property is all it takes. That\u2019s good and all, but as it can even be seen in the comments there and on our forums there is a limitation \u2013 the checkbox column works just great, but it goes all shy when some templating is involved.<\/p>\n\n\n\n

The Problem<\/h2>\n\n\n\n

In the Grid API reference<\/a> under \u2018renderCheckboxes\u2019 it says \u201cThat option is not available when jQueryTemplating is used.\u201d That\u2019s just a slight bit misleading and is most certainly going to get updated, since this does, in fact, include our own Templating Engine<\/a>. So in essence the above should be read as \u2018That option is not available when Templating is used\u2019. That is because, by design, the Checkbox column feature is suppressed in such cases, as a row template may have its own rendering for the column.<\/p>\n\n\n\n

That may or may not be an intuitive explanation as to why it will not be available with column template as well, but once you think about it \u2013 the grid renders rows, it has a default template to do that \u2013 a row template. You defining a column simply ends up being included somewhere along the way in that row template, instead of the default. That is why, templating in general will disable this feature.<\/p>\n\n\n\n

But not to worry, there are options as always. I stumbled upon this and since customer feedback pointed this out for us (Keep it up, we like constructive feedback!) in this blog I\u2019ll share my experience with coming up for alternative ways  to have such functionality.<\/p>\n\n\n\n

The Solution<\/h2>\n\n\n\n

Template Checkbox<\/h3>\n\n\n\n

Odd enough the problem is also main part of the solutions as it is the easiest way to alter the UI representation of your data and is also very flexible to be tweaked to your liking. Using this to add checkboxes in not all new (\"Forums<\/a>) and as mentioned the feature itself is meant to be a shortcut for that.<\/p>\n\n\n\n

A fair warning:<\/strong>  I’m sharing my experience and because of that I\u2019ll go through two different approaches I took. Before diving in using one, make sure you have seen and considered both.<\/p>\n\n\n\n

So the first approach is to use a plain HTML input of type checkbox tag and assign it our value. This is the approach you can see in both forum posts linked above as well. You can apply the template to your row template (if you are already using one) or simple assign it to a single column. For demonstration purposes I\u2019ll use the Employees table from AdventureWorks (\"AdventureWorks<\/a>) for the Salaried flag column and here is how a grid configuration would look like:<\/p>\n\n\n\n

$(\"#grid\").igGrid({\n    primaryKey: \"BusinessEntityID\",\n    height: 550,\n    dataSource: \"@Url.Action(\"Employees\")\",\n    autoGenerateColumns: false,\n    columns: [\n        { key: \"BusinessEntityID\", width: \"50px\", headerText: \"ID\", dataType: \"number\" , template: \"<a style=\\'font-size:20px;\\' href=\\'http:\/\/msdn.microsoft.com\/en-us\/library\/ms124432(v=sql.100).aspx\\'>${BusinessEntityID}<\/a>'},\n        { key: \"LoginID\", width: \"250px\", headerText: \"Login ID\", dataType: \"string\" },\n        { key: \"JobTitle\", width: \"220px\" , headerText: \"Job Title\", dataType: \"string\" },\n        { key: \"SalariedFlag\", width: \"120px\", headerText: \"SalariedFlag\", dataType: \"bool\", template: \"<input type=\\\"checkbox\\\" {{if ${SalariedFlag} === \\\"true\\\"}} checked=\\\"checked\\\" {{\/if}} disabled=\\\"disabled\\\" style=\\'display: block; margin-left: auto; margin-right: auto;\\'>'}\n    ],\n    features: [\n        { name: \"Filtering\", mode: \"advanced\", type: \"local\" },\n        { name: \"Sorting\", type: \"local\" }]\n});<\/pre>\n\n\n\n
Do note that the first column also has a template \u2013 a link to the very same table\u2019s description on MSDN \u2013 and, as it is visible, that does not stop the checkboxes from appearing in addition to working just fine with features such as sorting and filtering:<\/p>\n\n\n\n
\"A<\/figure>\n\n\n\n
Enhancements<\/h3>\n\n\n\n
The above template is but a mere rendering tweak and doesn\u2019t come with an interaction package. One other fair point made by customers is that the default interaction can be improved as Checkbox column requires 3 clicks to update \u2013 which is how row editing with selection behaves \u2013 1 click to select, another to enter edit and third to change the value. Event though this wasn\u2019t the original issue, since you are now in control of the checkboxes, why not improve things a bit?<\/p>\n\n\n\n
The first step is to remove the disabled part, of course. Then you would need to handle user interaction with the checkbox \u2013 so add something along the lines of:<\/p>\n\n\n\n
data-rowid=\\\"${BusinessEntityID}\\\" onchange=\\\"checkboxChanged(event);\\\"<\/pre>\n\n\n\n
to the template. For enabled checkbox inputs onchange and click events are basically interchangeable, so pick one, but the name of the parameter passed to the handle *must* <\/strong>be \u2018event\u2019. The \u2018data-\u2018 attribute is the easiest way to store information for the checkbox location \u2013 the grid does the same thing with rows elements if you take a closer look and it\u2019s much easier to store it at creation as you then have access to the separate row data entry and will hardly add any overhead. Now just how easy it is with the Updating API to put that template to use:<\/p>\n\n\n\n
function checkboxChanged(evt) {\n    \/\/ get rowID where change occured:\n    var rowId = $(evt.currentTarget).data().rowid;\n    $(\"#grid\").igGridUpdating(\"updateRow\", rowId, { \"SalariedFlag\": evt.currentTarget.checked });\n}<\/pre>\n\n\n\n
Using the jQuery data()<\/a> method gives us that row Id in a snap and the passed event can tell us the state of the checkbox to assign to that column value. Do note that this requires Updating to be loaded as a resource and added to the grid features(\"NetAdvantage\u00ae<\/a>). And that leads to some issues that may arise<\/p>\n\n\n\n
When Updating Enters the Scene..<\/h3>\n\n\n\n
It\u2019s fairly reasonable to assume, since editing the checkboxes and Updating are already involved, that the grid is supposed to provide the full editing experience. However, once edit mode activated the edited cell\/row UI is separate one, which means that if you don\u2019t implement a provider yourself you will get the default combo-style editor:<\/p>\n\n\n\n
\"What<\/figure>\n\n\n\n
Now that may or may not be a problem for you (it will work just fine and checkboxes will update once you exit edit mode), but the sake of consistent experience it would be nice if the editor could be a checkbox as well..preferably the same one. At this point you have quite a few options, really, I\u2019ll just provide a few examples how I think this can be made better and usable.<\/p>\n\n\n\n
One little trick <\/strong>to try is setting that very same column as read-only. You already have a control that sets the value of the cell regardless of edit state and therefore you can go ahead and set that very same column as read only! What that would do is prevent the cell from getting its UI replaced by editor and in row mode it will remain unchanged<\/strong>. That means no combo like above and the very same checkbox with the same event handler still there ready for action. One tweak required though \u2013 since the Update Row method is not meant to be called from within edit session it will update the UI. All good? Nope. The issue is that in the case where you have the grid with the above setup and attempt updating a row when editing is activated \u2013 then awkward behavior is guaranteed. The UI is updated, but<\/strong> the editing is still active<\/strong> even though the grid looks like it exited that one and since there are not buttons or other elements that handle the editing of the editing session.. well it\u2019s stuck. I see a few options here, things like ending the editing (method is available of course) before calling the update row, but that immediately exits on checkbox change and that is probably not what the user would be expecting to happen. Then again you can disable the checkboxes while editing, but that\u2019s not the way to go when editing is active.<\/p>\n\n\n\n
What you can do is save the change directly to the data source transaction logs, after all the checkbox will take care of its UI, but it might require additional work (data dirty event, rebinding) to work properly with other features. You can also simply restart the editing on the very same row for the user:<\/p>\n\n\n\n
function checkboxChanged(evt) {\n    \/\/ get rowID where change occured:\n    var rowId = $(evt.currentTarget).data().rowid;\n    \/\/ if editing is active - update just the cell, otherwise use row update\n    if($(\"#grid\").igGridUpdating(\"isEditing\")){\n        $(\"#grid\").igGridUpdating(\"endEdit\");\n        $(\"#grid\").igGridUpdating(\"setCellValue\", rowId, \"SalariedFlag\", evt.currentTarget.checked);\n         \n        \/\/optionally can start the editing on the same row again\n        \/\/need row index:\n        var rows = $(\"#grid\").igGrid(\"rows\");\n        var rowIndex;\n        \/\/var context = this;\n        $.each(rows, function (index, row) {\n            if ($(row).data().id == rowId) {\n                rowIndex = index;\n            }\n        });\n        \/\/make sure you let the calling code exit before attempting start edit,\n        \/\/ a few milliseconds should be enough\n        setTimeout(function () { $(\"#grid\").igGridUpdating(\"startEdit\", rowIndex, 1); }, 2);\n    }\n    else {\n        $(\"#grid\").igGridUpdating(\"updateRow\", rowId, { \"SalariedFlag\": evt.currentTarget.checked });\n    }\n}<\/pre>\n\n\n\n
Above snippet shows getting the row index from the ID and starting editing on that row with a small delay (event handler is called within anonymous function elsewhere). Ending and starting editing causes the change of UI, which in turn causes a slight flicker, but with some desire and CSS tweaking that can be changed.<\/p>\n\n\n\n
Do note that you can explore the possibility of creating custom editor provider for even better experience and I will show some about that in the next part.<\/p>\n\n\n\n
No Boolean? No problem!<\/h3>\n\n\n\n
If you noticed so far there\u2019s a really weak connection between the actual value and the representation \u2013 our logic dictates both representation and interaction result. SO nothing is really stopping you to use more than just Boolean \u2013 strings, numbers, null values \u2013 all quite plausible. Perhaps explore more than two states of the checkbox as well. Let\u2019s have AdventureWorks\u2019 SpecialOffers table where a MaxQty property for each offer states a maximum OR \u2018NULL\u2019. I want to not just display that data, I want to display an result of assessment of that instead. Might not be the best example, but I will have a column that will instead show if the offer has a maximum at all:<\/strong><\/p>\n\n\n\n
$.ig.loader(function () {\n    $(\"#grid\").igGrid({\n        primaryKey: \"SpecialOfferID\",\n        height: 550,\n        dataSource: \"@Url.Action(\"SpecialOffersData\")\",\n        autoGenerateColumns: false,\n        columns: [\n            { key: \"SpecialOfferID\", width: \"100px\", headerText: \"ID\", dataType: \"number\" , template: \"<a style=\\'font-size:20px;\\' href=\\'http:\/\/msdn.microsoft.com\/en-us\/library\/ms124455(v=sql.100)\\'>${SpecialOfferID}<\/a>'},\n            { key: \"Description\", width: \"250px\", headerText: \"Description\", dataType: \"string\" },\n            { key: \"Type\", width: \"220px\" , headerText: \"Type\", dataType: \"string\" },\n            { key: \"MaxQty\", width: \"150px\", headerText: \"Has MaxQty\", dataType: \"string\", template: \"<input type=\\\"checkbox\\\" {{if parseInt(${MaxQty}) }} checked=\\\"checked\\\" {{\/if}} data-rowid=\\\"${SpecialOfferID}\\\"  data-test=\\\"${MaxQty}\\\" onchange=\\\"checkboxChanged(event);\\\" style=\\'display: block; margin-left: auto; margin-right: auto;\\'>'}\n        ],\n        features: [\n            { name: \"Filtering\", mode: \"advanced\", type: \"local\" },\n            { name: \"Sorting\", type: \"local\" },\n            { name: \"Updating\"}]\n    });\n});<\/pre>\n\n\n\n
Note the checkbox is being checked only if the value is not one of the \u2018false\u2019 equivalents (parsing returns NaN for example when it fails). Also you can set the values in much the same way \u2013 add null for  false and default\/calculated value for true:<\/p>\n\n\n\n
function checkboxChanged(evt) {\n    \/\/ get rowID where change occured:\n    var rowId = $(evt.currentTarget).data().rowid;\n    var newValue = evt.currentTarget.checked ? 10 : null;\n    $(\"#grid\").igGridUpdating(\"updateRow\", rowId, { \"MaxQty\": newValue });\n}<\/pre>\n\n\n\n
The results (both from SQL Management Studio and the running app with the jQuery Grid):<\/p>\n\n\n\n
\"It's<\/figure>\n\n\n\n
And again the mentioned Updating tricks can be implemented for this in an identical manner.<\/p>\n\n\n\n
Moving On<\/h2>\n\n\n\n
Here\u2019s a quick comparison between the DIY template vs. the default Checkbox column:<\/p>\n\n\n\n
PROS<\/h4>\n\n\n\n