{"id":396,"date":"2012-08-13T15:40:00","date_gmt":"2012-08-13T15:40:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=396"},"modified":"2025-02-25T13:33:48","modified_gmt":"2025-02-25T13:33:48","slug":"jquery-grid-checkbox","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/jquery-grid-checkbox","title":{"rendered":"jQuery Grid Checkbox Column Alternatives &#8211; Part II"},"content":{"rendered":"\n<p>This is the second part covering the topic of jQuery Grid checkbox column alternatives and\/or custom implementations. As I explained, however, defaults are never good enough for every scenario out there and the community brought up the limitation it has regarding coexistence with column and row templates. While there are valid reasons for that, there are also plenty of cases where\u00a0 you want to go:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/media.infragistics.com\/community\/Release\/12.1\/jQuery\/Checkbox-Columns-Alternatives\/jquery-grid-checkbox-column-alternative.png\" alt=\"jQuery Grid checkbox column alternative using template to enchance funtionality and match experience.\" title=\"jQuery Grid checkbox column alternative using template to enchance funtionality and match experience.\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Well, you are not seeing wrong \u2013 it does look essentially the same. It\u2019s very simple really. Say, if an application has been using the checkboxes so far and (as it always happens) an idea emerges to add some additional functionality over existing\/new column that requires using a template. So it\u2019s reasonable to want keep the same UI as before, right?<\/p>\n\n\n\n<p>Furthermore, as you may remember from the first blog, I don\u2019t quite enjoy the looks on the default checkbox and god forbid the user is running some other OS\u2026 Now these checkboxes look just fantastic, so let\u2019s see how we can use those instead.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"the-checkbox-column-feature-to-the-rescue\">The Checkbox Column Feature to the Rescue!<\/h2>\n\n\n\n<p>Not seeing wrong again \u2013 what I realized while creating the input templates is that the default feature itself is one as well! The feature being there, the <strong>styles and other useful bits are there for us to put together as we see fit.<\/strong> With that said, the first and the easiest thing to reuse is the checkbox column template and its styles.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The template<\/h3>\n\n\n\n<p>That template uses styled <a title=\"w3schools.com: HTML span Tag\" href=\"http:\/\/www.w3schools.com\/tags\/tag_span.asp\" target=\"_blank\" rel=\"noopener noreferrer\">HTML Span<\/a> tags along with CSS to create that UI element, which means it is completely open for styling and independent of OS or browser implementation. Here\u2019s how a template like that would look like:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var checkboxTemplate=\"&lt;span style=\\'width:100%;display:inline-block;overflow:hidden;text-align:center;\\'>' +\n\"&lt;span class=\\\"ui-state-default ui-corner-all ui-igcheckbox-small\\\">\"+\"&lt;span class=\\\"ui-icon ui-icon-check ui-igcheckbox-small-{{if ${SalariedFlag} === \\\"true\\\"}}on{{else}}off{{\/if}}\\\"\/>\"+\"&lt;\/span>&lt;\/span>\";<\/pre>\n\n\n\n<p>Now the structure for the spans:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The outermost Span acts as a cell container spreading itself in the space available and allowing for the inner ones to be nicely centered. Optional.<\/li>\n\n\n\n<li>The middle one acts as the checkbox border. Required.<\/li>\n\n\n\n<li>The innermost is the empty\/tick filling. The \u201cui-igcheckbox-small-off\/on\u201d are the respective styles. Note that the \u2018off\u2019 style overrides the \u2018on\u2019, so you can essentially have \u2018on\u2019 by default and add\/remove \u2018off\u2019 as appropriate (that is exactly how it will be done later on). Also if you have noticed the \u2018small\u2019 component, there\u2019s also a \u2018normal\u2019 version you can see in the <a title=\"Row Selectors with Checkboxes - NetAdvantage for jQuery Grid samples\" href=\"https:\/\/www.igniteui.com\/grid\/row-selectors\" target=\"_blank\" rel=\"noopener noreferrer\">Row Selectors feature<\/a>. Required.<\/li>\n<\/ul>\n\n\n\n<p>The result from this are not surprising (we were after those anyway). The best part is that you get the same look as before(if you have been using the feature), you get an UI control that looks much better than the default and even bleds with the style of other controls. Moreover, it does not only fit in style, it matches the style of the <a title=\"Row Selectors with Checkboxes - NetAdvantage for jQuery Grid samples\" href=\"https:\/\/www.igniteui.com\/grid\/row-selectors\" target=\"_blank\" rel=\"noopener noreferrer\">Row Selectors<\/a> (which I view as essential is both are used) and it matches the theme, since the looks come from the CSS and it comes from the theme. A sample grid definition using the above:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$.ig.loader(function () {\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: \"&lt;a href=\\\"http:\/\/msdn.microsoft.com\/en-us\/library\/ms124432(v=sql.100).aspx\\\">${BusinessEntityID}&lt;\/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: checkboxTemplate },\n            { key: \"CurrentFlag\", width: \"100px\",headerText: \"Current Flag\", dataType: \"bool\" , template: \"&lt;span style=\\'width:100%;display:inline-block;overflow:hidden;text-align:center;\\'>&lt;span class=\\'ui-state-default ui-corner-all ui-igcheckbox-normal\\'>&lt;span class=\\'ui-icon ui-icon-check ui-igcheckbox-normal-on{{if ${CurrentFlag} === \\'true\\'}} {{else}} ui-igcheckbox-normal-off{{\/if}}\\'\/>&lt;\/span>&lt;\/span>'}\n             ],\n        features: [\n            { name: \"Filtering\", mode: \"advanced\", type: \"local\" },\n            { name: \"Sorting\", type: \"local\" },\n            { name: \"Updating\", editMode: 'none'}]\n    });\n});<\/pre>\n\n\n\n<p>The resulting grid with both small (default) checkboxes on the \u2018Salaried\u2019 column and \u2018normal\u2019 on the \u201cCurrent Flag\u201d:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/media.infragistics.com\/community\/Release\/12.1\/jQuery\/Checkbox-Columns-Alternatives\/checkbox-column-default-template.png\" alt=\"Checkbox columns using the default feature's template.\" title=\"Checkbox columns using the default feature's template.\"\/><\/figure>\n\n\n\n<p>And, yes, they go Metro or Modern UI (guess that is how it will be called now) if you apply the \u2018metro\u2019 theme:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/media.infragistics.com\/community\/Release\/12.1\/jQuery\/Checkbox-Columns-Alternatives\/checkbox-column-default-template-modern-metro.png\" alt=\"Checkbox columns using the default feature's template with metro \/ modern theme applied.\" title=\"Checkbox columns using the default feature's template with metro \/ modern theme applied.\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>As you can see since the values are Boolean the columns have no trouble with other Grid features.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">One-click inline value updates<\/h3>\n\n\n\n<p>Of course, just like the previous solution you can hook up to the click event to handle user interaction without entering editing mode. Like before, using the <a title=\"INFRAGISTICS NETADVANTAGE JQUERY API REFERENCE - Updating\" href=\"http:\/\/help.infragistics.com\/jQuery\/2012.1\/ui.iggridupdating#methods\" target=\"_blank\" rel=\"noopener noreferrer\">Updating API<\/a> will require the feature itself to be loaded and initialized with the grid (<a title=\"NetAdvantage\u00ae jQuery Online Help : igGrid Updating\" href=\"https:\/\/www.igniteui.com\/help\/iggrid-updating#enabling_updating\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/users.infragistics.com\/dpetev\/external_link.PNG\" alt=\"NetAdvantage\u00ae jQuery Online Help : igGrid Updating\" width=\"15\"><\/a>). This time, however we have two columns this time. The options are two \u2013 duplicate the event handler for each column or simply pass on the column key to the function and use that instead of static value:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var checkboxTemplate = \"&lt;span style=\\'width:100%;display:inline-block;overflow:hidden;text-align:center;\\'>' +\n    \"&lt;span class=\\\"ui-state-default ui-corner-all ui-igcheckbox-small\\\">\" +\n    \"&lt;span class=\\\"ui-icon ui-icon-check ui-igcheckbox-small-{{if ${SalariedFlag} === \\\"true\\\"}}on{{else}}off{{\/if}}\\\"\" +\n    \" data-rowid=\\\"${BusinessEntityID}\\\"  onclick=\\\"checkboxChanged(event, 'SalariedFlag');\\\"\/>&lt;\/span>&lt;\/span>\";<\/pre>\n\n\n\n<p>The \u2018data-\u2018 attribute will be used to keep track of the row key and the column is passed to the handler. Some minor tweaks regarding the different availability of properties for browser support and the final snippet looks like this:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function checkboxChanged(evt, colId) {\n    \/\/ for IE &lt; 9 currentTarget is srcElement\n    var element = evt.currentTarget || evt.srcElement;\n    \/\/ get rowID where change occured:\n    var rowId = $(element).data().rowid;\n    var newValue;\n    \/\/IE doesn't have classList so check and use Name instead\n    if (element.classList){\n        newValue = element.classList.contains(\"ui-igcheckbox-small-on\") ? false : true;\n    }\n    else{\n        newValue = element.className.indexOf(\"ui-igcheckbox-small-on\") >= 0 ? false : true;\n    }\n    $(\"#grid\").igGridUpdating(\"setCellValue\", rowId, colId, newValue);\n}<\/pre>\n\n\n\n<p>The idea is very simple \u2013 if click has occurred it means the value should change and it should be the opposite of what it was right now \u2013 so we check if \u2018on\u2019 style is applied. Note, that I mentioned \u2018off\u2019 is the overwriting one, however in this case updating the cell value with an Updating method causes the UI to update and therefore the template is reapplied and the \u2018on\u2019 style won\u2019t be there if the value is false.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Editing action<\/h3>\n\n\n\n<p>There\u2019s one more <strong>awesome part of the Checkbox column feature that can be reused<\/strong>. In the first blog I mentioned you can define your own Editor Provider. If you look up the <a title=\"INFRAGISTICS NETADVANTAGE JQUERY API REFERENCE\" href=\"https:\/\/www.igniteui.com\/help\/api\/2013.2\/ui.iggridupdating\" rel=\"noopener\">Grid Updating API reference<\/a> you can see a \u2018columnSetting\u2019 that allows to set an Editor Provider and it \u201cshould extend $.ig.EditorProviderDefault or it should have definitions of all its methods\u201d. Now that can take some coding, but guess what \u2013 the Checkbox column already has one defined! So this is how you use it:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$.ig.loader(function () {\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: \"&lt;a style=\\'font-size:20px;\\' href=\\'http:\/\/msdn.microsoft.com\/en-us\/library\/ms124432(v=sql.100).aspx\\'>${BusinessEntityID}&lt;\/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: \"150px\", headerText: \"SalariedFlag\", dataType: \"bool\", template: checkboxTemplate}\n        ],\n        features: [\n            { name: \"Filtering\", mode: \"advanced\", type: \"local\" },\n            { name: \"Sorting\", type: \"local\" },\n            { name: \"Updating\", columnSettings: [{ columnKey: \"SalariedFlag\", editorProvider: new $.ig.CustomEditorProviderCheckbox()} ]}]\n    });\n});<\/pre>\n\n\n\n<p>At line 16 \u2013 simple and very effective. Now when you enter edit mode you get a proper (and consistent) experience. And it\u2019s really that simple:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/media.infragistics.com\/community\/Release\/12.1\/jQuery\/Checkbox-Columns-Alternatives\/checkbox-column-editor.png\" alt=\"The editor created by the checkbox provider.\" title=\"The editor created by the checkbox provider.\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Editor provider<\/h3>\n\n\n\n<p>The default provider shown above doesn\u2019t quite meet the requirements? Then we\u2019ll use a custom one and throw in some non-Boolean values in the mix for a good measure. As explained, you have a whole bunch of Editor provider for the needs of updating along with a default one that is recommended for customization. In our case, however, we can extend the checkbox provider instead and <strong>only implement the differences.<\/strong> Let me explain the basics of a provider \u2013 it\u2019s a class with a few essential methods \u2013 one for creating an editor (this one gets called by <a title=\"igGrid Updating : Infragistics(R) NetAdvantage(R) jQuery\" href=\"https:\/\/www.igniteui.com\/help\/iggrid-updating\" target=\"_blank\" rel=\"noopener noreferrer\">Updating<\/a> when edit mode gets activated and returns the actual editing element), one for getting and one for setting values. Then you have focus, size and validation managing, but those are implemented or don\u2019t concern our type of provider. This is the basic flow of method execution to give you an idea why each method does what it does:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/media.infragistics.com\/community\/Release\/12.1\/jQuery\/Checkbox-Columns-Alternatives\/checkbox-editor-provider-flow.png\" alt=\"Generalized flow of events and resulting method calls for the Updating editors.\" title=\"Generalized flow of events and resulting method calls for the Updating editors.\"\/><\/figure>\n\n\n\n<p>For example, if again you need to support values different than Boolean, you can use your template as usual and override the get and set value methods of the provider to have a nice checkbox editor as well \u2013 <strong>no read-only and no flicker.<\/strong> Plus it\u2019s even quite easy to implement as well. For the case from the last blog and any other case of random \u2018acceptable\u2019 values and false equivalents means we don\u2019t need to modify the setValue method as..well numbers and strings will evaluate as true and null-s will evaluate as false and it\u2019ll work just fine to display the value in the editor. So it\u2019s just the get and it\u2019s almost amusingly easy:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$.ig.CustomEditorProviderCheckbox = $.ig.CustomEditorProviderCheckbox || $.ig.EditorProviderCheckbox.extend({\n    getValue: function () {\n        return this.value ? 10 : null;\n    }\n});<\/pre>\n\n\n\n<p>Now say that those values won\u2019t evaluate as expected (even though they currently do), you will have to also override the setValue and call the super-class\u2019 method with the desired output:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$.ig.CustomEditorProviderCheckbox = $.ig.CustomEditorProviderCheckbox || $.ig.EditorProviderCheckbox.extend({\n    getValue: function () {\n        return this.value ? 10 : null;\n    },\n    setValue: function (val, updating) {\n      val = parseInt(val) ? true : false;\n      this._super(val, updating);\n    }\n});<\/pre>\n\n\n\n<p>And if all that is not enough you can always go further \u2013 change the UI rendered for the Editor in the create method, change the way&nbsp; interaction affects the value in the set method and so on. But that\u2019s a whole separate topic or more like a topic per type of provider as most of them have their special requirements and implementations.<\/p>\n\n\n\n<p>The rest is pretty clear \u2013 same template style as in the \u2018Editing Action\u2019 part only with parseInt instead like in the previous blog. And again, using the column settings for Updating you set the provider of the desired column to be a new \u2018$.ig.CustomEditorProviderCheckbox()\u2019.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comparison<\/h3>\n\n\n\n<h5 class=\"wp-block-heading\">PROS<\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Will work with other templates.<\/li>\n\n\n\n<li>Easy to implement &#8211; 1 line for simple scenarios or one more to set the provider.<\/li>\n\n\n\n<li>Consistent looks \u2013 fits with the rest of the grid parts and matches theme.<\/li>\n\n\n\n<li>Excellent editing by reusing the default checkbox editor provider.<\/li>\n\n\n\n<li>Again not limited to just Boolean values.<\/li>\n\n\n\n<li>Also not limited to a bi-state checkbox, an tri-state checkbox can be potentially implemented(<a title=\"JSFiddle showing a simple 3-state checkbox implementation.\" href=\"http:\/\/jsfiddle.net\/98BMK\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" width=\"15\" src=\"https:\/\/users.infragistics.com\/dpetev\/external_link.PNG\" alt=\"JSFiddle showing a simple 3-state checkbox implementation.\"><\/a>)<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">CONS<\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Can require some code to implement with non-Boolean values, although as shown even there you can spare yourself most of the work.<\/li>\n\n\n\n<li>Does require a little work to add that \u2018single-click update\u2019 functionality. I could argue it\u2019s well worth it.<\/li>\n\n\n\n<li>Nothing else I can see, really.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>I hope this has been educational and occasionally useful. I also hope that it\u2019s been made clear that defaults are not your only option and not only is it easy to create custom solutions but also recycling parts of available ones makes it that much better. The way the data is represented is completely arbitrary from the actual values and not only the good old forms elements or the modified ones with consistent looks can be used \u2013 at this point you can replace the checkbox with slider\/toggle button and you can use similar approach to modify any other type of data representation. Because, in the end, the jQuery Grid and its features have proven to be very customizable and in most cases always have the right property, method or event to help a developer create awesome experiences!<\/p>\n\n\n\n<p><em><a title=\"ASP.NET MVC project demonstrating different features discussed above - both jQuery only and MVC grid setup.\" href=\"https:\/\/media.infragistics.com\/community\/Release\/12.1\/jQuery\/Checkbox-Columns-Alternatives\/CheckboxAlternatives2.zip\">Demo project is available for download<\/a>. As always, you can follow us on Twitter <\/em><a title=\"That would be me!\" href=\"https:\/\/twitter.com\/DamyanPetev\" rel=\"noopener\"><em>@DamyanPetev<\/em><\/a><em> and <\/em><a title=\"Infragistics on Twitter\" href=\"https:\/\/twitter.com\/infragistics\" target=\"_blank\" rel=\"noopener noreferrer\"><em>@Infragistics<\/em><\/a><em> and stay in touch on <\/em><a title=\"Infragistics on Facebook\" href=\"http:\/\/www.facebook.com\/infragistics\" target=\"_blank\" rel=\"noopener noreferrer\"><em>Facebook<\/em><\/a><em>, <\/em><a title=\"Infragistics on Google+\" href=\"https:\/\/plus.google.com\/110651137371189140377\" target=\"_blank\" rel=\"noopener noreferrer\"><em>Google+<\/em><\/a><em> and <\/em><a title=\"Infragistics on LinkedIn\" href=\"http:\/\/www.linkedin.com\/company\/16069\" target=\"_blank\" rel=\"noopener noreferrer\"><em>LinkedIn<\/em><\/a><em>!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A quick recap: the Checkbox column is a feature that provides default setup to turn Boolean values in the jQuery grid into checkboxes.<\/p>\n","protected":false},"author":68,"featured_media":2370,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,17],"tags":[],"class_list":["post-396","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-how-to"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=396"}],"version-history":[{"count":8,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/396\/revisions"}],"predecessor-version":[{"id":2172,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/396\/revisions\/2172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2370"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}