Can i use model binding on a grid?

[Ross]

I have an asp.net core razor page app im trying to make an edit page I would like to add a Telerik grid to bind to a list of objects that I have declared as a bind property. The Grid is displaying great but when the form posts back I want the grid to modelbind to the list and pass back in the new records, changed records, and delated actions done in the grid.  This is not happening and if I use the bind property or pass the parameter on the onpost I can't get the grid values passed back.

   In the code behind

 

  public class HowToUseSteps

    {

        public int Id { get; set; }

        public string Steptext { get; set; }

    }

 

 

  [BindProperty]

        public  List<HowToUseSteps> _Steps { get; set; }

 

in the cshtml

<form method="post">

              @(Html.Kendo().Grid(Model._Steps)

              .Name("HowToUseSteps")

              .Editable(editable => editable.Mode(GridEditMode.InCell))

              .Columns(columns =>

              {

                  columns.Bound(column => column.Id).Title("Id").Width(100);

                  columns.Bound(column => column.Steptext).Title("Step");

                  columns.Command(command => command.Destroy()).Width(150);

              }

           )

                .ToolBar(toolbar =>

                {

                    toolbar.Create();

                    toolbar.Save();

                })

                    .DataSource(dataSource => dataSource

        .Ajax()

        .PageSize(20)

        .ServerOperation(true)

     )

    <button type="submit" class="btn btn-success">Save</button>

</form>

I know i can call separate on change on delete events on the grid. but i was hoping to use databinding on a postback instead.  any help would be appricated. 

Thanks

Ross

[Aleksandar]

Hello Ross,

I see you have posted the same question as a support case. I am pasting here the response, for the benefit of the community:

The observed behavior is expected. Allow me to elaborate. The Grid is not a form element so simply adding it to a form will not post the data to the server. If you desire to post the Grid and it's dataItems to the server you can take advantage of the templates functionality of the Grid. Create hidden elements based on the different row models which will be submitted to the server. There are some limitations you should keep in mind:

• All items in the Grid will be submitted no matter if they are updated or not.
• Only the items from the current page are submitted.
• Server operations must be disabled—ServerOperation(false).

With that said you can create the hidden input for a column the following way:

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

                  columns.Bound(p => p.ProductID).Hidden().ClientTemplate("#= ProductID #" +
                    "<input type='hidden' name='Products[#= index(data)#].ProductID' value='#= ProductID #' />"
                  );

                  columns.Command(command => command.Destroy()).Width(100);
              })

Check this ASP.NET MVC application we have, that demonstrates how the Grid can be posted with a form, keeping the above in mind. This is indeed not a RazorPage application, but the approach is the same.

If the above is not matching your requirements I can suggest checking these StackOverflow posts that demonstrate how you can submit Grid data with a Form:

• Post Kendo grid data on form submit
• Submit form with Kendo MVC Grid and other elements

I hope the above clarifies why the Grid is not submitted as part of the form and provides guidance on how to achieve the desired result.

Regards,
Aleksandar
Progress Telerik