@using EnVisage.Code
@using EnVisage.Code.HtmlHelpers
@using EnVisage.Models
@model ScenarioTemplateCreationModel

@{
    var templatesStr = string.Empty;
    foreach (var item in EnVisage.Code.Utils.GetTemplateGroups())
    {
        if (!string.IsNullOrEmpty(templatesStr))
        {
            templatesStr += ",";
        }
        templatesStr += "'" + new HtmlString(HttpUtility.JavaScriptStringEncode(item)) + "'";
    }
}
<script type="text/javascript">

    var _templateDataChanged = false;
    function onTemplateDataChanged() {
        _templateDataChanged = true;
    }
    function resetTemplateDataChanged() {
        _templateDataChanged = false;
    }
    function isTemplateDataChanged() {
        return _templateDataChanged;
    }

    var Tmultik;
    init.push(function () {                    
        Tmultik = $("#@Html.ClientIdFor(model => model.TemplateGroupNames)").select2({
            placeholder: "Select template groups",
            tags: [@Html.Raw(templatesStr)],
                    tokenSeparators: [',', ';'],
                    onSelect: function (a, b) {
                    }
        });

        $('#createTemplateForm').find('input[type=checkbox],input[type=text],select,textarea').on("change", function() {
            if (typeof onTemplateDataChanged === 'function')
                onTemplateDataChanged();
        });
        $(document).ready(function () {
            $.validator.unobtrusive.parse($(this));

        });
    });


</script>

@using (Ajax.BeginForm("CreateTemplate", "Scenario", new AjaxOptions { HttpMethod = "Post", OnSuccess = "onCreateTemplateSuccess", OnFailure = "onCreateTemplateFailure", UpdateTargetId = "createTemplateModal", OnBegin = "return true;" }, new { @id = "createTemplateForm" }))
{
<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
	<h4 class="modal-title" >Create Template</h4>
</div>
<div class="modal-body" style="max-height:600px;overflow-y:auto;">
    @Html.ValidationSummary(false, "The Scenario Template could not be saved due to the following errors:")
				    
    @Html.HiddenFor(x=>x.Id)
    <div class="panel-body" style="border: 0;">
        <div class="row">
            <div class="form-group">
                @Html.LabelFor(model => model.TemplateName, new { @class = "col-sm-3 control-label" })
                <div class="col-sm-9">
                    <div class="input-group" style="width:100%;">
                        @Html.Raw(Html.TextBoxFor(model => model.TemplateName, new { @class = "form-control" }))
                    </div>
                    @Html.ValidationMessageFor(model => model.TemplateName)
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <label class="col-sm-3 control-label">Expenditure Categories</label>
                <div class="col-sm-9">
                    <div class="table-light table-responsive" style="overflow-y: auto;" id="expendituresTamplate">
                        <script type="text/javascript">
                            function onTChCheckExpCat(i) {
                                $("#templateExpCatChecked_" + i).val(document.getElementById("templateExpCatCheckedId_" + i).checked);
                            }
                        </script>
                        <table class="table table-striped dataTable" id="uom" style="margin-top: 0px !important;">
	                        <thead style="vertical-align:top;">
		                        <tr>
			                        <th style="width:30px;"></th>
			                        <th>Name</th>
		                        </tr>
	                        </thead>
                            <tbody>
                                @{
                                    var GroupName = string.Empty;
                                }
                                @if (Model != null)
                                {
                                    for (var i = 0; i < Model.Expenditures.Count; i++)
                                    {
                                        <tr>
                                            <td style="text-align: right;">
                                                <input type="hidden" value="@Model.Expenditures[i].Group" name="expCatGroup[@i]"/>
                                                <input type="hidden" value="@Model.Expenditures[i].Id" name="expCatId[@i]"/>
                                                <input type="hidden" value="@Model.Expenditures[i].Name" name="expCatName[@i]"/>
                                                @if (Model.Expenditures[i].Checked)
                                                {
                                                    <input type="checkbox" class="expenditueCb" value="@Model.Expenditures[i].Id" checked="checked" name="templateExpCatCheckedId[@i]" @* disabled*@ id="templateExpCatCheckedId_@i" onclick="onTChCheckExpCat(@i); "/>
                                                    <input type="hidden" value="true" name="templateExpCatChecked[@i]" id="templateExpCatChecked_@i"/>
						                        }
						                        else
						                        {
							                        <input type="checkbox" class="expenditueCb" value="@Model.Expenditures[i].Id" name="templateExpCatCheckedId[@i]" id="templateExpCatCheckedId_@i" onclick="onTChCheckExpCat(@i); " />
                                                    <input type="hidden" value="false" name="templateExpCatChecked[@i]" id="templateExpCatChecked_@i"/>
                                                }   
                                            </td>
                                            <td>@Model.Expenditures[i].Name</td>
                                        </tr>
                                    }
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                @Html.LabelFor(model => model.TemplateGroupNames, new { @class = "col-sm-2 control-label" })
                <div class="col-sm-10 select2-primary">
                    @Html.TextBoxFor(model => model.TemplateGroupNames, new { @class = "form-control" })
				    <i>(use comma or semicolon to split groups)</i>
                </div>
            </div>
        </div>
    </div>
	<button style="float:right;margin-right:10px;" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button style="float:right;margin-right:8px;" type="submit" class="btn btn-primary" id="btnNewTemplate">OK</button>
</div> 
   
}