Issue while using data-binding with Kendo UI

[Velumani]

Issue facing while using data-bind option in Kendo UI and find below the issues,

1. Not able to do the data binding, for example :  looking for question & answer mapping using the Kendo UI and to populate in model.
2. Is there any possibility of dynamic generate for parent and child list of question using KendoUI & map answers for the corresponding questions.

I have tried using the kendo grid for the Q & A form.

Snippet
 @(Html.Kendo().Grid<Contact>()
                                .Name("Grid1")
                                  .Columns(columns =>
                                {
                                 
                                    columns.Bound(c => c.question).Title("quest").Width("8%").HtmlAttributes(new { @class = "ob-left" }).ClientTemplate("<input id='questionid' value='questionid'  style='width: 80px;'>");
                                    columns.Bound(c => c.answer).Title("answer").Width("13%").HtmlAttributes(new { @class = "ob-left" }).ClientTemplate("<input value='' "class='' style='width: 140px;'>");
                               
                                }
                                )
                                .Events(ev => ev.DataBound("onDataBound"))
                                .Sortable()
                                .Editable(editable => editable.Mode(GridEditMode.InCell))
                                .DataSource(dataSource => dataSource
                                    .Ajax()                                  
                                    .Batch(false)
                                    .ServerOperation(true)
                                    .Read(read => read.Action("GetAllQues", "Ques"))                                   
                               )

Pls do the needful.

[Alexander Popov]

Hi Velumani,

Two-way binding inside a template could be done only when the MVVM pattern is used (see example). Since you are using the MVC wrappers I would recommend attaching a change event handler to the input elements. Once the event is triggered you could get the dataItem and set the corresponding field's value. For example:  

columns.Bound(c => c.question).Title("quest").Width("8%").HtmlAttributes(new { @class = "ob-left" }).ClientTemplate("<input class='questionid' value='#=question#'/>");

<script type="text/javascript">
    $("body").on("change", ".questionid", function (e) {
        var row = $(e.target).closest("tr");
        var grid = $("#Grid1").data("kendoGrid");
        var item = grid.dataItem(row);
        item.set("quest", e.target.value);
    })
</script>

Regards,
Alexander Popov
Telerik