kreta/KretaWeb/Areas/OsztalyCsoport/Views/OraSorszamozasHalmaz/Edit.cshtml

@using Kreta.Enums.ManualEnums
@using Kreta.Resources
@using Kreta.Web.Areas.OsztalyCsoport.Models
@using Kreta.Web.Helpers.Grid

@model OraSorszamozasHalmazModel

@{
    const string formName = "OraSorszamozasHalmazForm";
    const string gridName = "OsszerendelesekGrid";
    const string osztalyCsoportValaszto = "OsztalyCsoportValaszto";
    const string tantargyValaszto = "TantargyValaszto";
    const string addOsszerendelesToList = "AddOsszerendelesToList";
    const string osszerendelesValaszto = "OsszerendelesValaszto";
    const string sorszamText = "SorszamText";
}

<div class="container-fluid orasorszamModal">
    @using (Html.KretaForm(formName))
    {
        @Html.HiddenFor(x => x.ID)
        @Html.KretaValidationSummary()

        <div class="row">
            @Html.KretaTextBoxFor(x => x.Nev).RenderWithName(2, 6)
            @Html.KretaCheckBoxFor(x => x.KozosOraSorszamozasElteroTanarnal).RenderWithName(3, 1)
        </div>
        <div class="row equal">
            <fieldset class="col-xs-4">
                <legend>@OraSorszamozasHalmazResource.UjOsszerendeles</legend>
                @Html.KretaComboBox(osztalyCsoportValaszto, Url.HttpRouteUrl(Constants.RouteKey.ActionApi,
         new { controller = Constants.ApiControllers.ComboBoxHelperApi, action = "GetOsztalyCsoportListByEvfolyam" }), useGroup: true, onChangeFunction: "OraSorszamozasHalmazHelper.changeOsztalyCsoport(e)").RenderWithName(OraSorszamozasHalmazResource.OsztalyCsoport, 4, 8)
                @Html.KretaComboBox(tantargyValaszto, Url.HttpRouteUrl(Constants.RouteKey.ActionApi,
         new { controller = Constants.ApiControllers.ComboBoxHelperApi, action = "GetTantargy" }), onChangeFunction: "OraSorszamozasHalmazHelper.changeTantargy(e)").RenderWithName(OraSorszamozasHalmazResource.Tantargy, 4, 8)
                @Html.KretaButton(addOsszerendelesToList, OraSorszamozasHalmazResource.OsszerendelesHozzaadasa, enabled: false, clickEventName: "OraSorszamozasHalmazHelper.addOsszerendelesToList")
            </fieldset>
            <fieldset class="col-xs-4">
                <legend>@OraSorszamozasHalmazResource.JelenlegiOsztalyCsoportTantargyOsszerendelesek</legend>
                @(
         Html.KretaGrid<OraSorszamozasHalmazOsszerendelesModel>(
             dataSource: Model.Osszerendelesek,
             name: gridName
         )
         .Columns(columns =>
         {
             columns.Bound(c => c.OsztalyCsoportId).SetDisplayProperty("OsztalyCsoport").Width("50%");
             columns.Bound(c => c.TantargyId).SetDisplayProperty("Tantargy").Width("50%");
         })
        .RowFunction(Html, new List<RowFunction>
                    {
                        new RowFunction
                        {
                            Name = CommonResource.Torles,
                            ClientAction = "OraSorszamozasHalmazHelper.deleteOsszerendeles",
                            IconEnum = GridRowFunctionIconEnum.Torles,
                        },
                    })
                )
            </fieldset>
            <fieldset class="col-xs-4">
                <legend>@OraSorszamozasHalmazResource.SorszamozasKezdoErtekenekBeallitasa</legend>
                <div class="row">
                    <div class="col-xs-6">
                        @Html.KretaRadioButtonListFor(x => x.Tipus, Model.TipusList, onChangeFunction: "OraSorszamozasHalmazHelper.changeTipus()")
                    </div>
                    <div class="col-xs-6">
                        <ul class="noUlLiButton k-widget" style="border-style: none">
                            <li style="height: 50px;"></li>
                            <li>@Html.KretaNumericFor(x => x.Kezdoertek, new Dictionary<string, object> { { "style", "width: 100%;" } }).Min(1).Max(1000)</li>
                        </ul>
                    </div>
                    <div class="col-xs-12">
                        <input id="@osszerendelesValaszto" data-value-primitive="True" style="width: 100%;"/>
                        <span id="@sorszamText"  />
                    </div>
                </div>
            </fieldset>
        </div>
    }
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var element = $("#@osszerendelesValaszto");

        element.kendoComboBox({
            dataTextField: "Text",
            dataValueField: "Text",
            dataSource: OraSorszamozasHalmazHelper.getDataForValaszto(),
            filter: "contains",
            autoWidth: true,
            change: OraSorszamozasHalmazHelper.changeValaszto,
        });

        element.ready(function () {
            OraSorszamozasHalmazHelper.changeTipus();

            KretaComboBoxHelper.getKendoComboBoxData("@osszerendelesValaszto").select(function (item) {
                return item.ID == "@Model.OraSorszamozasHalmazOsszerendelesId";
            });
        });
    });
</script>

<style>
    fieldset {
        border-left: 1px solid #aab7c4;
    }

    legend {
        font-size: 13px;
        font-weight: 600;
        color: #5c6a79;
    }

    .equal {
        display: flex;
        flex-wrap: wrap;
    }

    .orasorszamModal .row:nth-of-type(2n) {
        background-color: #eceff2;
    }
</style>