PK form v1

by VadimMalkov

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.mobile.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<div id='app' class='app'>
  <div data-role='splitter' style='height:600px;' data-panes='[{collapsible: true, resizable: true, size: "30%", scrollable: false}]'>
    <div>
      <div data-role='grid' data-bind='source: grid, events:{
			change: onChange
			}' id='grid1' data-selectable='true' style='height:100%;'>
      </div>
    </div>
    <div>
      <div data-role="tabstrip" data-animation='false' class='tab' style='height:100%;' data-scrollable="{distance: 300}">
        <ul>
          <li class="k-state-active">1 234345 2354 23 5423</li>
          <li>2</li>
          <li>3</li>
        </ul>
        <div style='height:500px;'>
          <span class='zbox' style='margin-left:40px;'> код</span>
          <input class='k-textbox zbox' data-bind='value: a_main_id' />
          <ul data-role='panelbar'>
            <li class='k-state-active'>
              <span>характеристики</span>
              <div>
                описание
                <input data-role='numerictextbox' class='zbox' />
                <br> описание
                <input data-role='numerictextbox' class='zbox' />
                <br/> описание
                <input class='k-textbox zbox' class='zbox' />
              </div>
            </li>
            <li class='k-state-active'>
              <span>характеристики</span>
              <div>
                <span class='zbox' style='width:50px;'>описание 321</span>
                <input class='zbox' data-role='numerictextbox' />
                <br/> <span>описание</span>
           ...

CSS

#app {
  font-size: 13px;
}

.tab {
  background-color: transparent;
  border: none;
}

.zbox {
  margin-top: 2px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.k-panelbar {
  border-style: none;
}

.k-ghost-splitbar {
  z-index: 1;
}

JavaScript

var model = kendo.observable({
	grid: new kendo.data.DataSource({
		data: [{qq:1, name:"1"}, {qq:2, name:"2"}, {qq:3, name:"3"}],
		schema: { model: {id: "qq"}}
	}),
	a_CODE: "",
	onChange: function(){
		var g = $(grid1).data('kendoGrid');
		this.set('a_main_id', g.dataItem(g.select()).id);
	}
});

kendo.bind($("#app"), model);

model.bind('change', function(e) {
	console.log(e.field, this.get(e.field));
});

model.get("grid").read();