CODEWITHSUNDEEP
angularjsangular-ui-grid
simple user
simple user

Reputation: 383

How to Hide and Show UI Grid with Columns based on input

I am using Angular UI Grid. I want to show UI Grid based on checkbox input. I am able to hide and show grid based on checkbox but never able to show columns in UI Grid.

HTML Code

<table>
   <tr>
    <td valign="top">
         <label>Recursive</label>
    </td>
   </tr>
   <tr>
    <td valign="top">
          <input type="checkbox" ng-model="eventadd.md_eventrecursive"
                 ng-true-value="true" ng-false-value="false">
    </td>
   </tr>
</table>
<br/>
<div ng-show="eventadd.md_eventrecursive">
   <div ui-grid="gridRecursiveEvent" class="gridSmallStyle"></div>
</div>

JS Code

$scope.gridRecursiveEvent = {
    columnDefs: [
        {
            field: 'Name', displayName: 'Name'
        },
        {
            field: 'Id', displayName: 'Id',
        },
    ],
}

When Recursive event is checked then it showing Grid but with no Columns

enter image description here

Need your help.

Upvotes: 0

Views: 940

Answers (1)

Remko
Remko

Reputation: 359

Please refer to this page.

Problem is the grid is not rendered at first (since it is hidden). Checking the checkbox does not render the ui-grid.

See documentation for possible workarounds that suit your wishes.

Upvotes: 1

Related Questions