How to conditionally "hidden" a column

1 Answer 14275 Views

Grid

robert asked on 16 Dec 2016, 08:59 PM

Hello i'm trying to figure out a way to conditionally "hide" a column using an "#if" statement, if a user is NOT a SuperUser and i'm trying this "#if" approach because i know that the 'template' : '#if(isAppAdmin == true) statement works fine. Or another approach that would work would be if there's a way to "hide" the 'edit' command button if a user is NOT a SuperUser, thanks for any suggestions or pointers!

{

                                    'title' : 'Is Admin',
                                    'field' : 'isAppAdmin',
                                    'width' : '90px',
                                    'hidden' : '#if(isSuperUser == false) {# true # } else {# false #}#',
                                    'template' : '#if(isAppAdmin == true) {# yes # } else {# no #}#'
                                },

<script type="text/x-kendo-template" id="admin-template">

<div class="admin-container">

<label></label><input data-role="combobox"

class="k-combobox"

data-placeholder="Select user..."

data-text-field="userName"

data-value-field="userId"

data-filter="startswith"

data-bind="value: selUser,source: userDs"

style="width:300px;" />

<a>

<img data-bind="click: onAddNew, attr: {src: addNewImgUrl}" style="vertical-align:middle;" />

<span>Add new</span>

</a>

</div>

<hr class="hr-style" />

<div style="margin:5px;">

<div id="gridAppUsers" data-role="grid"

data-columns="[

{

'title' : 'User ID',

'field' : 'userId',

'width' : '130px'

},

{

'title' : 'Name',

'field' : 'userName',

'width' : '150px'

},

{

'title': 'Position',

'field': 'position'

},

{

'title' : 'Email',

'field' : 'email',

'width' : '170px'

},

{

'title' : 'Phone',

'field' : 'phoneNumber',

'width' : '120px'

},

{

'title' : 'Is App User',

'field' : 'isAppUser',

'width' : '90px',

'template' : '#if(isAppUser == true) {# yes # } else {# no #}#'

},

{

'title' : 'Is Admin',

'field' : 'isAppAdmin',

'width' : '90px',

'hidden' : '#if(isSuperUser == false) {# true # } else {# false #}#',

'template' : '#if(isAppAdmin == true) {# yes # } else {# no #}#'

},

{

'title' : 'Is Super User',

'field' : 'isSuperUser',

'width' : '90px',

'template' : '#if(isSuperUser == true) {# yes # } else {# no #}#'

},

{ 'command' : ['edit', 'destroy'], 'title': ' ', 'width': '180px' }

]"

data-editable="inline"

data-sortable="true"

data-scrollable="true"

data-selectable="single, row"

data-bind="source: appUserDs , events: { save: onSave, remove: onDelete }">

</div>

</script>

<script>

$(document).ready(function () {

$(".k-grid-edit", "#grid").hide();

});

</script>

1 Answer, 1 is accepted

answered on 20 Dec 2016, 07:28 AM

Hello Robert,

The recommended way to render different column content, based on some data item property, is via the columns.template configuration (like you have described). It can be configured as a string, function that returns a string, and exposes the current data item as an argument, and as a call to the kendo.template() method providing the respective template as an argument:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template

The columns.hidden option is not suitable for the discussed scenario, as it accepts only boolean values, and is typically used to hide/show a given column, based on some global variable (or hardcoded true/false value), and cannot be used with a property that varies among items that are rendered in the Grid (i.e. a column cannot be hidden for one Grid row, and not hidden - for another).

The conditional statements in the templates can also be simplified via the ternary operator where appropriate, e.g.:

http://dojo.telerik.com/uVAJoT

I hope this helps, but if I am missing something, please describe the scenario, and desired functionality in further details, so I can provide more to-the-point suggestions, if such are available. Thank you in advance.

Regards,
Dimiter Topalov
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Kejal

commented on 13 Jul 2018, 10:39 AM

Hi,

We have this exact requirement that you mentioned where we want to hide or show a column based on a global property. So we have a window where we have two modes, ReadOnly and Edit. Initially the user is in read only mode. In this mode, we do not want to show the columns having the command buttons, Edit and Delete. And when the user clicks on Edit, we want to show this column. Again, when the user clicks on Save, we enter the readOnly mode and we want to hide the column. I am unable to find any property or event to set the hidden property of column dynamically. Can you advise me on this issue.

Thank you.

Tsvetina

commented on 17 Jul 2018, 08:53 AM

Hello Kejal,

You can use the Grid hideColumn and showColumn methods to dynamically show and hide an entire column. Here is an example, where you can see an implementation like the one that you describe:
https://dojo.telerik.com/AkoGOYOy

Regards,
Tsvetina
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.