JSFiddle - React, Tailwind, and code Playground

by Barry Carter

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-kendo/0.10.0/knockout-kendo.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class='row'>
  <div class="col" data-bind='kendoGrid: {
                selectable: true,
                data: users,
                change: vm.onChange, 
                columns: [
                    {"field": "id", "title": "id"},
                    {"field": "name", "title": "name"}, 
                    {"command":[{"text": "Test", "click": vm.removeItem}]}
                ]}' 
            data-role="grid">              
  </div>
    <div class="col"  data-bind='kendoGrid: {
                selectable: true,
                data: teams,
                change: vm.onChange, 
                columns: [
                    {"field": "id", "title": "id"},
                    {"field": "name", "title": "name"}, 
                    {"command":[{"text": "Test", "click": vm.removeItem}]}
                ]}' 
            data-role="grid">              
  </div>
</div>

    <div data-bind="foreach: campaigns">
      <div>
        <span data-bind="text: name"></span>
        
      </div>
    </div>

JavaScript

var users = [
	{ id: 1, name: 'user 1', teamId: 3 },
  { id: 2, name: 'user 2', teamId: 2 },
  { id: 3, name: 'user 3', teamId: 2 },
  { id: 4, name: 'user 4', teamId: 1 },
];

var teams = [
	{ id: 1, name: 'team 1', campaignId: 3 },
  { id: 2, name: 'team 2', campaignId: 2 },
  { id: 3, name: 'team 3', campaignId: 2 },
  { id: 4, name: 'team 4', campaignId: 1 },
];

var campaigns = [
	{ id: 1, name: 'campaign 1' },
  { id: 2, name: 'campaign 2' },
  { id: 3, name: 'campaign 3' },
  { id: 4, name: 'campaign 4' },
];

var ViewModel = function(c, t, u) {
	var self = this;
  
  this.campaigns = ko.mapping.fromJS(c);
  this.teams = ko.mapping.fromJS(t);
  this.users = ko.mapping.fromJS(u);
  
  this.teamsForCampaign = function(camp) {
  	return ko.computed(function() {
  		self.teams();
      return ko.utils.arrayFilter(self.teams(), function(item) {
        	return (item.campaignId() === camp.id());
        });
	  });
  }
  
  
  this.onChange = function(e) {
    //alert("The Grid has changed");
  };
};

window.vm = new ViewModel(campaigns, teams, users)
ko.applyBindings(vm);