<input type="text" id="txtBox" style="width:300px;" />

<div id="fixturesBindable" style="padding:0 !Important;">
<table>
<thead>
<tr>
                        <th>Col1</th>
                        <th>Col2</th>
</tr>
</thead>
        
<tbody data-template="row-template" data-bind="source: Fixtures"></tbody>
</table>

<select id="a_teamsdropdown" data-role="dropdownlist" data-text-field="TeamFullName" data-value-field="Id" data-bind="source: Teams" style="width:200px;"></select>
<select id="a_oppteamsdropdown" data-role="dropdownlist" data-text-field="TeamFullName" data-value-field="Id" data-bind="source: 
OpponentTeams" style="width:200px;"></select>

<button type="button" data-bind="click: addFixture">Add Fixture</button>

<script id="row-template" type="text/x-kendo-template">
<tr>
<td><input type="hidden" id="team"  data-bind="attr: { name: TeamModelName, value: TeamId }" /></td>
<td><input type="hidden" id="oppteam" data-bind="attr: { name: OppModelName, value: OppTeamId }" /></td>
</tr>
</script>

</div>


<script>
$(document).ready(function () {
        var viewModel = kendo.observable({
            Teams: <%= Model.Teams %>,
            OpponentTeams: [],
            Fixtures: [],
            addFixture: function (e) {
                var Fixtures = this.get("Fixtures");
                var teamId = $("#a_teamsdropdown").val();
                var teamName = $("#a_teamsdropdown>option:selected").text();
                var oppteamId = $("#a_oppteamsdropdown").val();
                var oppteamName = $("#a_oppteamsdropdown>option:selected").text();

                    this.get("Fixtures").push({
                        TeamFullName: teamName,
                        TeamId: teamId,
                        OppTeamFullName: oppteamName,
                        OppTeamId: oppteamId,
                        OrderIndex: this.get("Fixtures").length,
                        TeamModelName: 'Fixtures[' + this.get("Fixtures").length + '].TeamId',
                        OppModelName: 'Fixtures[' + this.get("Fixtures").length + '].OpponentTeamId'
                    });
            },
            resetFixture: function(){
                var Fixtures = this.get("Fixtures");
                $.each(Fixtures, function (key, fixture) {
                    Fixtures.splice(0, 1);
                });
            }
        });

opponents = $("#txtBox").kendoAutoComplete({
            minLength: 3,
            dataTextField: "Name",
            filter: "contains",
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/url/Ajax",
                        type: "POST",
                        data: function () { return { searchText: $("#txtBox").val()} 
                        },
                        complete: function (data) {
                            opponents.list.width(400);
                        }
                    }
                },
                pageSize: 10,
                serverPaging: true,
                serverSorting: true,
                schema: {
                    total: "count",
                    data: "data",
                    model: {
                        id: "Id",
                        fields: {
                            Id: { editable: false }
                        }
                    }
                }
            }),
            change: function () {
                this.dataSource.read();
            },
            select: function (e) {
                $.each(opponents.dataSource.data(), function (index, value) {
                    if (e.item.text() == value.Name) {
                        selectedOpponent = value;
                        $('#Fixture_OpponentTeam_Id').val(selectedOpponent.Id);
                        $('#OpponentName').val(selectedOpponent.Name);
                        $.ajax({
                            url: 'GetOpponentTeams',
                            data: { schoolId: selectedOpponent.Id, seasonId: seasonId, sportId: sportsId },
                            type: 'GET',
                            success: function (data) {
                                viewModel.OpponentTeams = data;
                                kendo.bind($("#fixturesBindable"), viewModel);
                            },
                            error: function (xhr, ajaxOptions, thrownError) {
                                //alert('Error during process: \n' + xhr.responseText);
                                alert(thrownError);
                            }
                        });
                        return;
                    }
                });
            }

        }).data("kendoAutoComplete");
</script>

Html.Kendo().Grid<SelectedProjects>()
                 .Name("StaticViewGrid")
                 .HtmlAttributes(new { @style = "display:inline-block;" })
                 .Columns(columns =>
                 {
                     columns.Bound(o => o.Selected);
                     columns.Bound(o => o.SystemID);
                     columns.Bound(o => o.ProjectName);
                     columns.Bound(o => o.Environment);
                     columns.Bound(o => o.SitEntryDate).Format("{0:d}");
                     columns.Bound(o => o.SitExitDate).Format("{0:d}");
                     columns.Bound(o => o.ProductionInstallDate).Format("{0:d}");
                 })
                 .ToolBar(toolbar => toolbar.Save())
                 .Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.InCell))
                 .Filterable()
                 .Sortable()
                 .DataSource(dataSource => dataSource
                     .Ajax()
                     .Batch(true)
                     .ServerOperation(false)
                     .Model(model =>
                     {
                         model.Id(o => o.EngagementID);
                         model.Field(o => o.Selected).Editable(true);
                         model.Field(o => o.SystemID).Editable(false);
                         model.Field(o => o.ProjectName).Editable(false);
                         model.Field(o => o.Environment).Editable(false);
                         model.Field(o => o.SitEntryDate).Editable(false);
                         model.Field(o => o.SitExitDate).Editable(false);
                         model.Field(o => o.ProductionInstallDate).Editable(false);
                     })
                     .Read(read => read.Action("SelectedEngagementItemData", "Amethyst"))
                     .Update(update => update.Action("SelectedEngagementItems_Update", "Amethyst"))
                 )

    public partial class SelectedProjects
    {
         public Guid EngagementViewID { get; set; }
         public string EngagementViewName { get; set; }
         public bool Selected { get; set; }
         public int EngagementID { get; set; }
         public Nullable<int> SystemID { get; set; }
         public string ProjectName { get; set; }
         public string Environment { get; set; }
         public Nullable<DateTime> SitEntryDate { get; set; }
         public Nullable<DateTime> SitExitDate { get; set; }
         public Nullable<DateTime> ProductionInstallDate { get; set; }
    }