How to conditionally "hidden" a column

4 posts, 0 answers
  1. robert
    robert avatar
    25 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
    1285 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.
  3. Kejal
    Kejal avatar
    4 posts
    Member since:
    Jul 2015

    Posted 13 Jul 2018 in reply to Dimiter Topalov Link to this post

    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.

  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 17 Jul 2018 Link to this post

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