JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<strong>Grid:</strong><br/>
<div 
id="grdItems" 
data-role="grid" 
data-scrollable="false" 
data-bind="source: EventItems, events: {dataBinding: preventRedraw}" 
data-editable="true" 
data-filterable="false" 
data-sortable="false" 
data-columns='[{"template": "<input type=\"text\" data-bind=\"events: {change: myChangeHandler},value: Descr\"/><br/>"}]'>
</div>

<hr/>
<strong>ListView1:</strong><br/>
<ul id="lvItems1"
    data-role="listview"
    data-bind="source: EventItems"
    data-template="lv1"
></ul>
<hr/>
<strong>ListView2:</strong><br/>
<ul id="lvItems2"
    data-role="listview"
    data-bind="source: EventItems"
    data-template="lv2"
></ul>
<hr/>
<strong>Output:</strong><br/>
<div id="output"></div>
<hr/>

Our scenario is unique.  We need the Grid to not lose focus while at the same time firing off a custom event handler that runs some methods to update the ViewModel.  The ListView seems to work the way we need it to.  But, the Grid does not.<br/><br/>

<strong>Requirements:</strong>
<br/><br/>
1.  Ability to bind a change handler to the "change" event of each field in the Grid<br/>
2.  The form in the Grid should <strong>not lose focus</strong> after changing text value and moving to the next field  
<br/><br/>

<strong>Observations:</strong>
<br/><br/>
1.  The Grid is losing focus after changes are made.<br/>
2.  Using e.preventDefault breaks the binding for the myChangeHandler change event handler<br/>

<script type="text/x-kendo-template" id="lv1">
    <li><input type="text" data-bind="events: {change: myChangeHandler},value: Descr"/><br/></li>
</script>
<script type="text/x-kendo-template" id="lv2">
    <div data-bind="html: Descr"></div>
</script>

JavaScript

var viewModel = kendo.observable({
    EventItems: [{
        Descr: "descr1"
    }, {
        Descr: "descr2"
    }, {
        Descr: "descr3"
    }, {
        Descr: "descr4"
    }, {
        Descr: "descr5"
    }, {
        Descr: "descr6"
    }],
    myChangeHandler: function() {
        $("#output").html($("#output").html() + "<font color='red'>element changed</font><br/>");
    },
    preventRedraw: function(e) {
       if (e.action == "itemchange") {
          e.preventDefault();
       }
    }    
});

kendo.bind($("body"), viewModel);

//var grid = $("#grdItems").data("kendoGrid");