Home Binding model to a grid and posting back selection
Reply: 1

Binding model to a grid and posting back selection

user1267983
1#
user1267983 Published in 2017-12-07 22:13:50Z

I'm attempting to bind a model to a grid and get back selections. I'm able to pass the model in and display the data I expect along with checkboxes for the selection. However when I try to pass the model back to the controller I just seem to get back the same model initially passed into the view without any selection changes.

View:

@model ExViewModel

@(Html.Kendo().Grid(Model.Classes)
.Name("grid")
.Columns(columns =>
{
    columns.Bound(c => c.IsChecked).ClientTemplate("<input type='checkbox' #= IsChecked ? checked='checked':'' # class='chkbx' />" + "<input type='hidden' name='id' value='#= IsChecked#' />").Width(50);
    columns.Bound(c => c.Name).Width(175);
    columns.Bound(c => c.Details).Width(175);
})
.Scrollable().Groupable().Sortable().Filterable()
.DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
           )
)

@using (Html.BeginForm("CallNext", "Home", FormMethod.Post))
{
    <input hidden="hidden" id="model_output" name="model_output" value="@(Json.Encode(Model))" />
    <input id="btnSubmit" class="btn btn-primary" type="submit" value="Next >" />
}

<script>
    $(function () {
        $('#grid').on('click', '.chkbx', function () {
            var checked = $(this).is(':checked');
            var grid = $('#grid').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set('IsChecked', checked);
        })
    })
</script>

Controller:

[HttpPost]
public ActionResult CallNext(string model_output)
{ 
 . . . 
}

Using the above, the model_output I get back in the controller has all the default values for the IsChecked flag for Classes. I'm not sure what I'm overlooking - I've looked though a few examples online but I'm afraid I don't have much experience with Kendo, so I'm unsure as to what's going wrong. Any advice is greatly appreciated.

Richard
2#
Richard Reply to 2017-12-10 16:26:00Z

Can you confirm that the click handler is running ? I would presume yes.

The form posts the original model because the value="@(Json.Encode(Model))" is constructed at page render time not at page view runtime.

Try changing the submit button to perform a grid saveChanges

$('#grid').data("kendoGrid").saveChanges().

saveChanges calls the data source sync.

You could also use tool bars, they do even more of the plumbing for you. See the demos for more info.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.336394 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO