Here is my situation:
I have a kendo dropdown list box and a numeric text box in a view. When the user clicks a button, i want to display a kendo grid in a popup window.
All i need to do is figure out how to pass the values from the dropdown and textbox to my mvc controller.
Here is the definition of the dropdown and text box:
Here is the button definition that will display the pop up window:
Here is the definition for my grid inside the pop up window's div:
Here is the javascript/jquery from my view :
Kinda under the gun on this one as far as time is concerned. Any help would be most appreciated.
I have a kendo dropdown list box and a numeric text box in a view. When the user clicks a button, i want to display a kendo grid in a popup window.
All i need to do is figure out how to pass the values from the dropdown and textbox to my mvc controller.
Here is the definition of the dropdown and text box:
@Html.Kendo().DropDownListFor(x => x.TrainList).BindTo(Model.TrainList).HtmlAttributes(new { style = "width:150px" }).DataTextField("CNX_AUT").DataValueField("Id").Name("trainList").Value("Id").Text("CNX_AUT")
@Html.Kendo().NumericTextBoxFor(x => x.BeltScaleWeight).Name("beltScaleWeight").HtmlAttributes(new { style = "width:150px" })
<
button
class
=
"k-button"
id
=
"applyToCars"
style
=
"width:150px"
>Apply To Cars</
button
>
Here is the definition for my grid inside the pop up window's div:
<
div
id
=
"GridWindow"
>
<
br
/>
<
br
/>
@(Html.Kendo().Grid<
CNX.Domain.Entities.EDIRailcar
>()
.Name("RailCarGrid")
.Columns(columns =>
{
columns.Bound(o => o.Id).Visible(false);
columns.Bound(o => o.EDI_417_TRAIN_GUID).Visible(false);
columns.Bound(o => o.EQUIPMENT_INITIAL);
columns.Bound(o => o.EQUIPMENT_NUMBER);
columns.Bound(o => o.WEIGHT);
columns.Bound(o => o.TARE_WEIGHT);
columns.Bound(o => o.AS_RECEIVED_WEIGHT);
columns.Bound(o => o.Pile);
columns.Bound(o => o.Class);
columns.Bound(o => o.STATUS);
})
.DataSource(dataSource => dataSource.Ajax()
.PageSize(10)
.Read(read => read.Action("ApplyWeights", "MenuWeight")
.Type(HttpVerbs.Post))
.Model(model => model.Id(o => o.Id)))
.Pageable()
.Sortable()
.Filterable()
)
</
div
>
Here is the javascript/jquery from my view :
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
var win = $("#GridWindow").kendoWindow({
actions: ["Maximize", "Minimize", "Close"],
draggable: true,
height: "500px",
width: "500px",
modal: true,
resizable: true,
visible: false,
position: { top: 100, left: 100 }
}).data("kendoWindow");
});
$("#applyToCars").click(function () {
var selectedTrain = $("#trainList").data("kendoDropDownList");
var weightValue = $("#beltScaleWeight").data("kendoNumericTextBox");
var win = $("#GridWindow").data("kendoWindow");
var grid = $("#RailCarGrid").data("kendoGrid");
/*How do i pass the values they selected to the controller? */
grid.dataSource.fetch();
win.title('Railcar weights for ' + selectedTrain.text() );
win.center();
win.open();
});
</
script
>
Kinda under the gun on this one as far as time is concerned. Any help would be most appreciated.