CODEWITHSUNDEEP
twitter-bootstrapangulartwitter-bootstrap-3
kayasa
kayasa

Reputation: 2085

Bootstrap to display dynamic checkboxes in 3 columns

I am using Bootstrap 3 in my Angular 4 app to create a form. In the form, I need to render checkboxes on the basis of data returned from a web service call. So, I need to iterate over the data and render a checkbox for every value received.

The display for these checkboxes is bit messed up as in the screenshot below - Checkbox display

Is there a way to display these checkboxes in 3 columns. Something like this (looks much cleaner) Target Display

My current code is as below

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <form [formGroup]="myForm">

        <div class="row">
          ...
        </div>
        <div class="row">
          ...
        </div>
        <div class="row">
          <div class="col-xs-8">
            <div class="form-group">
              <label for="options" class="col-xs-4">Options</label>
              <div class="checkbox"  formGroupName="options" *ngFor="let option of options">
               <div class="col-xs-4">
                <input id="{{option}}" formControlName="{{option}}" type="checkbox" 
                         [checked]=false> {{option}}
               </div>
              </div>
            </div>
          </div>
          <div class="col-xs-4">
            <div class="form-group">
              <label for="name" class="col-xs-4">Name</label>
              <div class="col-xs-8">
                <input type="text" id="name" formControlName="name" class="form-control input-sm">
              </div>
            </div>
          </div>
        </div>
        <div class="row">
        ...
        </div>
      </form>
    </div>
  </div>
</div>

I have come across some other threads on stack overflow that have examples with static checkboxes (Twitter Bootstrap - checkbox columns / columns within form). But I am not able to make out how to apply it to dynamically generated checkboxes.

Upvotes: 0

Views: 2967

Answers (1)

Slava Utesinov
Slava Utesinov

Reputation: 13498

You can use linq-es2015 library this way:

import { asEnumerable } from 'linq-es2015';

//somewhere in component
var groups = asEnumerable(this.options)
    .Select((option, index) => { return { option, index }; })
    .GroupBy(
              x => Math.floor(x.index / 3),
              x => x.option,
              (key, options) => asEnumerable(options).ToArray()
            )
    .ToArray();

//template's fragment
<div class="col-xs-8">
  <div class="row">
    <div class="col-xs-4">
        <label for="options" class="col-xs-4">Options</label>
    </div>            
    <div class="col-xs-8">
      <div class="row" *ngFor="let group of groups">
        <div class="col-xs-4" *ngFor="let option of group">
          <input id="{{option}}" formControlName="{{option}}" type="checkbox" [checked]=false/> {{option}}
        </div>      
      </div>              
    </div>            
  </div>
</div>

Upvotes: 1

Related Questions