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
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
Rank 1
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>
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