How to conditionally "hidden" a column

2 posts, 0 answers
  1. robert
    robert avatar
    5 posts
    Member since:
    May 2009

    Posted 16 Dec 2016 Link to this post

    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>
           $(document).ready(function () {
                  $(".k-grid-edit", "#grid").hide();
           });
    </script>

    <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>
        </div>
    </script>
    <script>
           $(document).ready(function () {
                  $(".k-grid-edit", "#grid").hide();
           });
    </script>
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    528 posts

    Posted 20 Dec 2016 Link to this post

    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.
Back to Top