This is a migrated thread and some comments may be shown as answers.

Custom Edit Popup template that contains another grid

3 Answers 625 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Francisco
Top achievements
Rank 1
Francisco asked on 22 Jun 2017, 11:00 PM

Is that possible to create a custom edit pop up that contains another grid inside?

My template has a dropdownlist. I would like to use the onchange event of that dropdownlist to display a grid with read only information, nothing fancy.

Is that possible?

Please let me know your comments.

Thanks in advanced.

3 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 23 Jun 2017, 02:21 PM
Hello Francisco,

It is possible to create a grid widget inside the custom popup edit using MVVM. In the following demo you can get more detailed information about Kendo MVVM Grid configuration and behavior:



I assembled a small sample which illustrates how to show a Kendo Grid inside popup editor template when a drop down is changed, check it out in the link below:



Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
n/a
Top achievements
Rank 1
answered on 27 Feb 2019, 05:18 PM

I need some help on this topic. I have a custom template with Grid and other form elements. How can I submit Grid along with the main form of  custom template.

Following is the code for Grid Custom Popup.

 

@model myPro.Models.RecurringPaymentModel
<script type="text/javascript">
    $("#EscalationType").change(function () {

        if ($("#EscalationType").val() == "Dollar") {
            $("#Escalation").data("kendoNumericTextBox").enable(true);
            $("#EscalationPercentage").data("kendoNumericTextBox").enable(true);
            $("#EscalationMonth").data("kendoDropDownList").enable(true);
            $("#EscalationDay").data("kendoNumericTextBox").enable(true);
            $("#MinIncrease").data("kendoNumericTextBox").enable(false);
            $("#MaxIncrease").data("kendoNumericTextBox").enable(false);
            $("#CostIndex").data("kendoDropDownList").enable(false);
            $("#IndexYear").data("kendoDropDownList").enable(false);
            $("#CPIArea").data("kendoDropDownList").enable(false);
            $("#IndexMonth").data("kendoDropDownList").enable(false);
            $("#IsCPICalculation").prop("disabled", true);
            $("#RecurringTermGrid").data("kendoGrid").setOptions({
                filterable: false,
                sortable: false,
                editable: false
            });
        }
        else if ($("#EscalationType").val() == "Index Based") {
            $("#Escalation").data("kendoNumericTextBox").enable(false);
            $("#EscalationPercentage").data("kendoNumericTextBox").enable(false);
            $("#EscalationMonth").data("kendoDropDownList").enable(false);
            $("#EscalationDay").data("kendoNumericTextBox").enable(false);
            $("#MinIncrease").data("kendoNumericTextBox").enable(true);
            $("#MaxIncrease").data("kendoNumericTextBox").enable(true);
            $("#CostIndex").data("kendoDropDownList").enable(true);
            $("#IndexYear").data("kendoDropDownList").enable(true);
            $("#CPIArea").data("kendoDropDownList").enable(true);
            $("#IndexMonth").data("kendoDropDownList").enable(true);
            $("#IsCPICalculation").prop("disabled", false);
            $("#RecurringTermGrid").data("kendoGrid").setOptions({
                filterable: false,
                sortable: false,
                editable: false
            });
        }
        else {
            $("#Escalation").data("kendoNumericTextBox").enable(false);
            $("#EscalationPercentage").data("kendoNumericTextBox").enable(false);
            $("#EscalationMonth").data("kendoDropDownList").enable(false);
            $("#EscalationDay").data("kendoNumericTextBox").enable(false);
            $("#MinIncrease").data("kendoNumericTextBox").enable(false);
            $("#MaxIncrease").data("kendoNumericTextBox").enable(false);
            $("#CostIndex").data("kendoDropDownList").enable(false);
            $("#IndexYear").data("kendoDropDownList").enable(false);
            $("#CPIArea").data("kendoDropDownList").enable(false);
            $("#IndexMonth").data("kendoDropDownList").enable(false);
            $("#RecurringTermGrid").data("kendoGrid").setOptions({
                filterable: true,
                sortable: true,
                editable: true,
                ToolBar: true
            });
          

        }
    })
</script>
<div id="content">
    @Html.HiddenFor(model => model.TaskID)
    @Html.HiddenFor(model => model.RecurringPaymentID)
    <div class="panel-group smart-accordion-default" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#C0">
                        <i class="fa fa-lg fa-angle-down pull-right"></i> <i class="fa fa-lg fa-angle-up pull-right"></i> Details
                    </a>
                </h4>
            </div>
            <div id="C0" class="panel-collapse collapse in">
                <div class="panel-body no-padding">
                    <div class="form-row col-sm-12">
                        <div class="form-group col-sm-3">
                            <label>Recurring Schedule Typee : </label>
                            @(Html.Kendo().DropDownListFor(model => model.RecurringScheduleType)
                                .DataTextField("LookupValue")
                                .DataValueField("LookupValue")
                                .HtmlAttributes(new { id = "RecurringScheduleType", style = "width:100%;" })
                                .DataSource(source =>
                                {
                                    source.Read(read =>
                                    {
                                        read.Action("_LookupType", "project", new { Lookup = "Amount Type" });
                                    })
                                    .ServerFiltering(true);
                                })
                            )<br /><span class="k-invalid-msg" data-for="RecurringScheduleType"></span>
                        </div>
                        <div class="form-group col-sm-9">
                            <label>Recurring Schedule Description : </label>
                            @(Html.Kendo().TextBoxFor(model => model.RecurringScheduleDes).HtmlAttributes(new { placeholder = "Recurring Schedule Description", style = "width: 100%" }))
                            <br /><span class="k-invalid-msg" data-for="RecurringScheduleDes"></span>
                        </div>
                    </div>
                    <div class="form-row col-sm-12">
                        <div class="form-group col-sm-3">
                            <label>Schedule Start Date : </label>
                            @(Html.Kendo().DatePickerFor(model => model.ScheduleStartDate).HtmlAttributes(new { style = "width: 100%", Placeholder = "Schedule Start Date", validationmessage = "Please Enter Schedule Start Date.", }))
                            <br /><span class="k-invalid-msg" data-for="ScheduleStartDate"></span>
                        </div>
                        <div class="form-group col-sm-3">
                            <label>Schedule Length (years) : </label>
                            @(Html.Kendo().IntegerTextBoxFor(model => model.ScheduleLength).HtmlAttributes(new { id = "ScheduleLength", placeholder = "Schedule Length", validationmessage = "Please Enter Schedule Length.", style = "width: 100%" }))
                            <br /> <span class="k-invalid-msg" data-for="ScheduleLength"></span>
                        </div>
                        <div class="form-group col-sm-3">
                            <label>Initial Rent Amount : </label>
                            @(Html.Kendo().TextBoxFor(model => model.InitialRentAmount).HtmlAttributes(new { placeholder = "Initial Rent Amount", validationmessage = "Please Enter Initial Rent Amount.", style = "width: 100%" }))
                            <br /><span class="k-invalid-msg" data-for="InitialRentAmount"></span>
                        </div>
                        <div class="form-group col-sm-3">
                            <label>Payment Frequency : </label>
                            @(Html.Kendo().DropDownListFor(model => model.PaymentFrequency)
                                        .DataTextField("LookupValue")
                                        .DataValueField("LookupValue")
                                        .HtmlAttributes(new { id = "PaymentFrequency", style = "width:100%;" })
                                        .DataSource(source =>
                                        {
                                            source.Read(read =>
                                            {
                                                read.Action("_LookupType", "project", new { Lookup = "Payment Frequency" });
                                            })
                                            .ServerFiltering(true);
                                        })
                            )<br /><span class="k-invalid-msg" data-for="PaymentFrequency"></span>
                        </div>
                    </div>
                    <div class="form-row col-sm-12">
                        <div class="form-group col-sm-3">
                            <label>Sales Tax : </label><span class="k-invalid-msg" data-for="SalesTax"></span><br />
                            @(Html.Kendo().TextBoxFor(model => model.SalesTax).HtmlAttributes(new { placeholder = "Sales Tax", validationmessage = "Please Enter Sales Tax.", style = "width: 100%" }))
                        </div>
                        <div class="form-group col-sm-3">
                            <label>Payment Due Day : </label><span class="k-invalid-msg" data-for="PaymentDueDay"></span><br />
                            @(Html.Kendo().IntegerTextBoxFor(model => model.PaymentDueDay).HtmlAttributes(new { placeholder = "Payment Due Day", validationmessage = "Please Enter Payment Due Day.", style = "width: 100%" }))
                        </div>
                        <div class="form-group col-sm-3">
                            <label>Escalation Type : </label><span class="k-invalid-msg" data-for="EscalationType"></span><br />
                            @(Html.Kendo().DropDownListFor(model => model.EscalationType)
                                    .DataTextField("LookupValue")
                                    .DataValueField("LookupValue")
                                    .HtmlAttributes(new { id = "EscalationType", style = "width:100%;" })
                                    .DataSource(source =>
                                    {
                                        source.Read(read =>
                                        {
                                            read.Action("_LookupType", "project", new { Lookup = "Amount Type" });
                                        })
                                        .ServerFiltering(true);
                                    })
                            )
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#C1">
                        <i class="fa fa-lg fa-angle-down pull-right"></i> <i class="fa fa-lg fa-angle-up pull-right"></i> Dollar
                    </a>
                </h4>
            </div>
            <div id="C1" class="panel-collapse collapse">
                <div class="panel-body no-padding">
                    <div class="form-row col-sm-12">
                        <div class="form-group col-sm-3">
                            <label>Escalation Amount: </label>
                            @(Html.Kendo().NumericTextBoxFor(model => model.Escalation).HtmlAttributes(new { @class = "form-control", placeholder = "Escalation", validationmessage = "Please Enter Escalation.", style = "width: 100%" }))
                            <br /><span class="k-invalid-msg" data-for="Escalation"></span>
                        </div>
                        <div class="form-group col-sm-3">
                            <label>Escalation Percentage: </label>
                            @(Html.Kendo().NumericTextBoxFor(model => model.EscalationPercentage).HtmlAttributes(new { @class = "form-control", placeholder = "Escalation Percentage", validationmessage = "Please Enter Escalation Percentage.", style = "width: 100%" }))
                            <br /><span class="k-invalid-msg" data-for="EscalationPercentage"></span>
                        </div>
                        <div class="form-group col-sm-3">
                            <label>Escalation Month : </label>
                            @(Html.Kendo().DropDownListFor(model => model.EscalationMonth)
                                        .DataTextField("LookupValue")
                                        .DataValueField("LookupValue")
                                        .HtmlAttributes(new { @class = "form-control", style = "width:100%;" })
                                        .DataSource(source =>
                                        {
                                            source.Read(read =>
                                            {
                                                read.Action("_LookupType", "project", new { Lookup = "Months" });
                                            })
                                            .ServerFiltering(true);
                                        })
                            )
                            <br /><span class="k-invalid-msg" data-for="EscalationMonth"></span>
                        </div>
                        <div class="form-group col-sm-3">
                            <label>Escalation Day : </label>
                            @(Html.Kendo().NumericTextBoxFor(model => model.EscalationDay).HtmlAttributes(new { @class = "form-control", placeholder = "Escalation Day", validationmessage = "Please Enter Escalation Day.", style = "width: 100%" }))
                            <br /><span class="k-invalid-msg" data-for="EscalationDay"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#C2" class="collapsed">
                        <i class="fa fa-lg fa-angle-down pull-right"></i> <i class="fa fa-lg fa-angle-up pull-right"></i>Index Based
                    </a>
                </h4>
            </div>
            <div id="C2" class="panel-collapse collapse">
                <div class="panel-body no-padding">
                    <div class="form-row col-sm-12">
                        <div class="form-group col-sm-3">
                            <label>Min % Increase : </label>
                            @(Html.Kendo().IntegerTextBoxFor(model => model.MinIncrease).HtmlAttributes(new { @class = "form-control", placeholder = "Min % Increase", validationmessage = "Please Enter Min % Increase.", style = "width: 100%" }))
                            <br /> <span class="k-invalid-msg" data-for="MinIncrease"></span>
                        </div>
                        <div class="form-group col-sm-3">
                            <label>Max % Increase : </label>
                            @(Html.Kendo().IntegerTextBoxFor(model => model.MaxIncrease).HtmlAttributes(new { @class = "form-control", placeholder = "Max % Increase", validationmessage = "Please Enter Max % Increase.", style = "width: 100%" }))
                            <br /><span class="k-invalid-msg" data-for="MaxIncrease"></span>
                        </div>
                        <div class="form-group col-sm-3">
                            <label>Cost Index : </label>
                            @(Html.Kendo().DropDownListFor(model => model.CostIndex)
                                                .DataTextField("LookupValue")
                                                .DataValueField("LookupValue")
                                                .HtmlAttributes(new { @class = "form-control", style = "width:100%;" })
                                                .DataSource(source =>
                                                {
                                                    source.Read(read =>
                                                    {
                                                        read.Action("_LookupType", "project", new { Lookup = "Cost Index" });
                                                    })
                                                    .ServerFiltering(true);
                                                })
                            )
                            <br /><span class="k-invalid-msg" data-for="CostIndex"></span>
                        </div>
                        <div class="form-group col-sm-3">
                            <label>Index Year : </label><span class="k-invalid-msg" data-for="BaseYear"></span><br />
                            @(Html.Kendo().DropDownListFor(model => model.IndexYear)
                                                .DataTextField("LookupValue")
                                                .DataValueField("LookupValue")
                                                .HtmlAttributes(new { @class = "form-control", style = "width:100%;" })
                                                .DataSource(source =>
                                                {
                                                    source.Read(read =>
                                                    {
                                                        read.Action("_LookupType", "project", new { Lookup = "Index Year" });
                                                    })
                                                    .ServerFiltering(true);
                                                })
                            )
                        </div>
                    </div>
                    <div class="form-row col-sm-12">
                        <div class="form-group col-sm-3">
                            <label>Use Negative Values in CPI Calculation : </label>
                            @(Html.Kendo().RadioButtonFor(model => model.IsCPICalculation).Label("Yes ").Value("Y").Checked(@Model.IsCPICalculation == "Y" ? true : false))
                            @(Html.Kendo().RadioButtonFor(model => model.IsCPICalculation).Label("No").Value("N").Checked(@Model.IsCPICalculation != "Y" ? true : false))
                            <br /><span class="k-invalid-msg" data-for="IsCPICalculation"></span>
                        </div>
                        <div class="form-group col-sm-4">
                            <label>CPI Area : </label>
                            @(Html.Kendo().DropDownListFor(model => model.CPIArea)
                                                .DataTextField("LookupValue")
                                                .DataValueField("LookupValue")
                                                .HtmlAttributes(new { @class = "form-control", style = "width:100%;" })
                                                .DataSource(source =>
                                                {
                                                    source.Read(read =>
                                                    {
                                                        read.Action("_LookupType", "project", new { Lookup = "CPI Area" });
                                                    })
                                                    .ServerFiltering(true);
                                                })
                            )<br /><span class="k-invalid-msg" data-for="CPIArea"></span>
                        </div>
                        <div class="form-group col-sm-3">
                            <label>Index Month : </label>
                            @(Html.Kendo().DropDownListFor(model => model.IndexMonth)
                                            .DataTextField("LookupValue")
                                            .DataValueField("LookupValue")
                                            .HtmlAttributes(new { @class = "form-control", style = "width:100%;" })
                                            .DataSource(source =>
                                            {
                                                source.Read(read =>
                                                {
                                                    read.Action("_LookupType", "project", new { Lookup = "Months" });
                                                })
                                                .ServerFiltering(true);
                                            })
                            )<br /><span class="k-invalid-msg" data-for="IndexMonth"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#C3" class="collapsed">
                        <i class="fa fa-lg fa-angle-down pull-right"></i> <i class="fa fa-lg fa-angle-up pull-right"></i>Percent
                    </a>
                </h4>
            </div>
            <div id="C3" class="panel-collapse collapse">
                <div class="panel-body no-padding">
                    <div class="form-row col-sm-12">
                        <div id="RecurringPaymentForm">
                            @(Html.Kendo().Grid<myPro.Models.RecurringTermModel>().Name("RecurringTermGrid")
                            .Columns(columns =>
                            {
                                columns.Bound(p => p.RecurringTermType).Title("Term Type");
                                columns.Bound(p => p.RecurringTermFromDate).Title("From Date");
                                columns.Bound(p => p.RecurringTermToDate).Title("To Date");
                                columns.Bound(p => p.RecurringTermAmount).Title("Amount");
                                columns.Command(command => command.Destroy()).Width(100);
                            })
                                    .ToolBar(toolbar => toolbar.Create())
                                    .Editable(editable => editable.Mode(GridEditMode.InCell))
                                .DataSource(
                                dataSource => dataSource
                                .Ajax()
                                .Batch(true)
                                .Model(model =>
                                {
                                    model.Id(p => p.RecurringTermID);
                                })
                                .Create(update => update.Action("_UpdateRecurringPayment", "Project", new { ID = Model.RecurringPaymentID }))
                                .Read(read => read.Action("_ReadRecurringPayment", "Project", new { ID = Model.RecurringPaymentID }))
                                .Update(update => update.Action("_UpdateRecurringPayment", "Project", new { ID = Model.RecurringPaymentID }))
                                .Destroy(update => update.Action("_DeleteRecurringPayment", "Project", new { ID = Model.RecurringPaymentID }))
                                )
                            .HtmlAttributes(new { style = "height: 250px;" })
                            .Pageable(p => p.PageSizes(new int[] { 10, 20, 30, 50 }))
                            .Sortable()
                            .Scrollable()
                            .Filterable()
                            .Editable()
                            )
                        </div>
                    </div>
                </div>
            </div>
        </div>
     </div>
</div>

0
Georgi
Telerik team
answered on 28 Feb 2019, 12:49 PM
Hi Raj,

Based on the provided information I assume that the requirement is to submit the grid within a form. Please correct me if I am wrong.

Generally speaking, the grid is not a form control - it does not have a value. However, you could submit the of the grid within a form by creating a hidden input template for each cell and binding that hidden input to the corresponding field of the current dataItem.

For better understanding please refer to the following sample which demonstrates the above approach:



Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Francisco
Top achievements
Rank 1
Answers by
Georgi
Telerik team
n/a
Top achievements
Rank 1
Share this question
or