This is a migrated thread and some comments may be shown as answers.

Basic Databinding Scenario Confusion

2 Answers 94 Views

Grid

This is a migrated thread and some comments may be shown as answers.

James asked on 15 Feb 2013, 09:42 AM

Hi All,

I'm trying to get a very simple data binding scenario working and I've fallen flat so far. I'm basing it on the KendoMVCWrappers demo code. My cshtml snippet looks like:

@Html.Kendo().Grid(Model.SystemUsersViewModels).Name("SystemUserGrid").Columns(columns =>
    {
        columns.Bound(user => user.UserName);
        columns.Bound(user => user.Email);
        columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= IsApproved ? checked='checked':'' # class='approvalChkbx' />");
        columns.Bound(user => user.IsLockedOut).ClientTemplate("<input type='checkbox' #= IsLockedOut ? checked='checked' : '' # />");
        columns.Bound(user => user.LastLoginDate);
        columns.Bound(user => user.Created);
    }
).Editable(ed=>ed.Mode(GridEditMode.InCell)).Pageable().Sortable().Scrollable().Filterable().DataSource(datasource => datasource.Ajax().ServerOperation(false))

<script type="text/javascript">
    $(function () {
        $('#SystemUserGrid').on('click', '.approvalChkbx', function () {
            var checked = $(this).is(':checked');
            var grid = $('#SystemUserGrid').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set('IsApproved', checked);
        })
    })
</script>

The SystemUsersViewModels property is a collection of very basic ViewModels like:

    public class UserViewModel
    {
        private readonly UserDto _userDto;

        public UserViewModel(UserDto userDto)
        {
            _userDto = userDto;
        }

        [Editable(false)]
        public Guid UserId
        {
            get { return _userDto.UserId; }
        }

        public bool IsApproved
        {
            get { return _userDto.Membership.IsApproved;}
            set { _userDto.Membership.IsApproved = value; }
        }
     }

Running this at the moment results in a No Parameterless Constructor error but I absolutely do not want to add one to my view model. The Javascript to handle the checkbox click is never fired and so the model is never updated.

I must admit that this demo syntax is VERY unintuitive and confusing for me at the moment.

var grid = $('#SystemUserGrid').data().kendoGrid;

Why is a call to .data() required here in order to get a handle on the grid?

All I want to do is update the model based on a user click but I cannot figure it out using the demo code.

Thanks in advance ...

Basic Databinding Scenario Confusion

2 Answers, 1 is accepted