Attribute Grid inc Tab
Is the problem caused by the tab?
by tomwilliams
HTML
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<div id="tabstrip">
<ul>
<li id="tbBooking" class="k-state-active">Booking Details</li>
<li id="tbInsp">Inspection Lines</li>
<li id="tbAttributes">Vehicle Attributes</li>
</ul>
<div>
<div class="TabCell">
<div class="gridFixedWidth">
<div id="grdInspectionLines"></div>
</div>
</div>
<span class="sunny"> </span>
</div>
<div>
<div class="TabCell">
<div class="gridFixedWidth">
<div id="grdInspectionLines"></div>
</div>
</div>
<span class="sunny"> </span>
</div>
<div>
<div class="TabCell">
<div class="gridFixedWidth">
<div id="grdVehicleAttributes"></div>
</div>
</div>
<span class="sunny"> </span>
</div>
</div>
<script type="text/x-kendo-template" id="tmpVehicleAttributeEdit">
<p>Custom editor template</p>
<div class="k-edit-label">
<label for="VIN">VIN:</label>
</div>
<input type="text" class="k-input k-textbox" name="VIN" data-bind="value:VIN">
<div class="k-edit-label">
<label for="AttributeType">Attribute Type:</label>
...
CSS
.k-edit-label
{
vertical-align:bottom;
}
*+html .k-edit-form-container .k-textbox
{
display:inline;
}
.sunny{
display: inline-block;
margin: 0px 0 0px 0px;
width: 1250px;
height: 0px;
}
.TabCell
{
height: 460px;
/*width: 1250px;*/
padding: 5px 5 5 5;
float: left;
}
.gridFixedWidth
{
height: 457px;
width: 600px;
padding: 0px 0 0 0;
float: left;
}
JavaScript
$(document).ready(function() {
tabstrip = $("#tabstrip").kendoTabStrip({
activate: onActivated,
animation: {
open: {
effects: "fadeIn"
}
}
}).data("kendoTabStrip");
// GetVehicleAttributes();
});
function onActivated(arg) {
var title = $(arg.item).find("> .k-link").text();
// var jobno = $("#hdnCurrentJobNo").text();
var jobno = $("#ddlJobNos option:selected").text()
var vin = $("#fbVin").text();
var title = $.trim(title);
if ((title == 'Vehicle Attributes') ) {
GetVehicleAttributes();
}
}
var AttType = '';
var ddlDistTypeVA = '';
function GetVehicleAttributes() {
var JsonAttributes = [{
"AttributeCode": "",
"AttributeType": "Make",
"AttributeValue": "SEAT",
"ID": 3378592,
"VIN": "VSSZZZ6JZDR051504"},
{
"AttributeCode": "",
"AttributeType": "Model",
"AttributeValue": "IBIZA ",
"ID": 3378593,
"VIN": "VSSZZZ6JZDR051504"},
{
"AttributeCode": "",
"AttributeType": "Derivative",
"AttributeValue": "Ibiza 5dr (2012) SE 1.6 TDI CR 105 PS 5-speed manu",
"ID": 3378594,
"VIN": "VSSZZZ6JZDR051504"},
{
"AttributeCode": "",
"AttributeType": "Colour",
"AttributeValue": "Ice Silver",
"ID": 3378595,
"VIN": "VSSZZZ6JZDR051504"},
{
"AttributeCode": "",
"AttributeType": "Colour Code",
"AttributeValue": "P5P5",
"ID": 3378596,
"VIN": "VSSZZZ6JZDR051504"},
{
"AttributeCode": "",
"AttributeType": "Trim Code",
"AttributeValue": "BT",
"ID": 3378597,
"VIN": "VSSZZZ6JZDR051504"},
{
"AttributeCode": "",
"AttributeType": "Trim...