Grid within Form

[Chris]

This might be a slightly strange layout request - for my page to make sense I want to put a couple of grids half way up which means that I would need to embed the grids within the form component itself. Is this possible to do so?

Ideally also for ease / tidiness of coding I'd like to have the grids within partial views - can this be done?

[Mihaela]

Hello Chris,

The Telerik UI Form component does not provide a built-in Grid editor, however, you can integrate the Grids into a standard HTML form and submit their data to the server.

For example:

• Grid into a form:

@model MyModel

<form id="exampleForm" asp-controller="Home" asp-action="Index" method="post">

    <div class="row">
        <div class="col-12">
            @(Html.Kendo().Grid<OrderViewModel>()
                    .Name("grid")
                    ...
              )
        </div>
        <div class="col-12">
            <input type="submit" value="Submit" />
        </div>
    </div>
</form>

• Grid loaded through a partial View into the form:

@model MyModel

<form id="exampleForm" asp-controller="Home" asp-action="Index" method="post">

    <div class="row">
        <div class="col-12">
            @await Html.PartialAsync("_MyGrid.cshtml")
        </div>
        <div class="col-12">
            <input type="submit" value="Submit" />
        </div>
    </div>
</form>

To submit the Grid's data through the form:

• Make sure that the Name() of the Grid matches the name of the Model property that holds the Grid's data (the Model, which properties bind to the form editors). This way, you can retrieve the Grid records through the Model within the form submit Action:

//MyModel.cs
public  List<OrderViewModel> orders { get; set; }

//View
@model MyModel
<form id="exampleForm" asp-controller="Home" asp-action="Index" method="post">
  ...
  @(Html.Kendo().Grid<OrderViewModel>()
    .Name("orders")
    ...
    )
    ...
</form>

• Set the ClientTemplate() option to each Grid column in order to add the respective input element with "name" and "value" attributes.

.Columns(columns =>
{
   columns.Bound(p => p.Id).ClientTemplate("#= Id#" + "<input type='hidden' name='orders[#= index(data)#].Id' value='#= Id #' />");
  ...
})

• Get the index of the data item for the "name" attribute:

    function index(dataItem) {
        var data = $("#orders").data("kendoGrid").dataSource.data();
        return data.indexOf(dataItem);
    }

As a result, when the form is submitted, you can access all Grid records through the "MyModel" Model:

//HomeController.cs
[HttpPost]
public IActionResult Index(MyModel formData)
{
     ...
}

Here you could review a similar case where the Grid data items are manipulated on the client and submitted by using a form:

https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/GridPostWithForm

I hope that helps.

Regards,
Mihaela
Progress Telerik

[Chris]

Hi

Many thanks for such a comprehensive answer!

It's actually more just the positioning of the grids that would make more sense to my page layout if I could embed them in the form - I actually don't mind if the create / update operations are separate.

Can a grid be embedded within a form item template? If not I guess I have to not use the form component on this page and construct my own form? Will it be easy enough to style it the same as the form component output?

[Mihaela]

Hi Chris,

Thank you for your clarifications.

You can integrate the Grid into the Form component through the EditorTemplateView() option that accepts the name of the Razor View that contains the Grid. For example:

@(Html.Kendo().Form<MyViewModel>()
.Name("exampleForm")
...
.Items(items =>
{
	items.Add()
		.Field(f => f.Name).Label(l => l.Text("Grid:"))
		.EditorTemplateView(Html.Partial("_MyGrid"));
	...
})
)

//~/Views/Home/_MyGrid.cshtml

@{
    Layout = null;
}

@(Html.Kendo().Grid<GridViewModel>()
  .Name("grid")
  ...
)

Best,

Mihaela

[Chris]

Hi - this does not seem to work - it just renders a field, and none of the grid :

items.AddGroup()
            .Label("Grids")
            .Layout("grid")
            .Grid(g => g.Cols(2).Gutter(10))
                .Items(i =>
                {
                    i.Add()
                        .Field(f => f.AppId).Label(l => l.Text("Grid:"))
                           .EditorTemplateView(Html.Partial("_Phones", Model.CustomerId));

                });

The result :

[Mihaela]

Hi Chris,

Since I couldn't replicate the behavior you are experiencing, I am attaching a runnable Telerik UI for ASP.NET Core app that contains a Form with a Grid. Would you please modify it based on your setup to recreate the layout issue and send it back to me for review?

Thank you for your cooperation!

Best,

Mihaela

[Chris]

Hi - what I swapped the field/property that the Grid was related to for a dummy non mapped field that is also not used elsehwre in the form  it seems to work :

 

 

[Mihaela]

Thank you for your update, Chris.

It is important to define the fields to match the properties of the Model that binds to the Form. Otherwise, the editors will not be initialized.

Best,

Mihaela