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

When I add combobox to my project the main grid stops updating

1 Answer 51 Views

Grid

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

D asked on 06 Jan 2012, 06:49 PM

When I add the following code to my project the main grid stops updating?

var cID = $("#custID").kendoComboBox({
minLength: 3,
dataTextField: "City",
dataValueField: "City",
filter: "contains",
dataSource: {
type: "odata",
serverFiltering: true,
serverPaging: true, pageSize: 20,
transport: { read: "http://services.odata.org/Northwind/Northwind.svc/Suppliers" }
}
});

// ========FULL CODE===========

<!doctype html>
<html>

<head>
<title>Detail Template</title>
<link href="../../shared/styles/examples.css" rel="stylesheet"/>
<link href="../../shared/styles/examples-offline.css" rel="stylesheet"/>
<link href="../../../styles/kendo.common.min.css" rel="stylesheet"/>
<link href="../../../styles/kendo.default.min.css" rel="stylesheet"/>
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/kendo.all.min.js"></script>
</head>

<body>
<a href="../index.html">Back</a>
<div class="description">Kendo UI Proof of Concept </div>

<label for="custID">Search Customer ID (minimum 3 characters):</label>
<input id="custID"/>
<div>(Test Combobox Control)</div>
<br/>
<br/>
<br/>

<label for="compName">Search Company Name (minimum 3 characters):</label>
<input id="compName"/>
<div>(Test Autocomplete Control)</div>
<br>
<br>
<br>

<table id="grid">
    <thead>
      <tr>
        <th data-field="CustomerID">CustomerID</th>
        <th data-field="CompanyName">CompanyName</th>
        <th data-field="Address">Address</th>
        <th data-field="City">City</th>
        <th data-field="PostalCode">PostalCode</th>
      </tr>
    </thead>
</table>

<script>

$(document).ready(function () {

var custGridData = new kendo.data.DataSource({
        type: "odata",
        transport: {
           read: "http://services.odata.org/Northwind/Northwind.svc/Customers"
        },
        pageSize: 10,
        serverFiltering: true,
        serverPaging: true,
        serverSorting: true
      });

      $("#grid").kendoGrid({
         dataSource: custGridData,
         height: 250,
         scrollable: true,
        sortable: true,
        pageable: true
      });

       var cName = $("#compName").kendoAutoComplete({
                    minLength: 3,
                    dataTextField: "CompanyName",
                    dataSource: {
                        type: "odata",
                        serverFiltering: true,
                        serverPaging: true, pageSize: 20,
                        transport: { read: "http://services.odata.org/Northwind/Northwind.svc/Customers" }
                    }
     ,
      change: function() {
                            var value = this.value();
                            if (value)
                                   {custGridData.filter({ field: "CompanyName", operator: "eq", value: (value) } ); }
       else
           {   custGridData.filter({});}
                            }
                });

     //var cID = $("#custID_STOPCODEFROMRUNNING").kendoComboBox({
     var cID = $("#custID").kendoComboBox({
     minLength: 3,
                    dataTextField: "City",
     dataValueField: "City",
        filter: "contains",
                    dataSource: {
                        type: "odata",
                        serverFiltering: true,
                        serverPaging: true, pageSize: 20,
                        transport: { read: "http://services.odata.org/Northwind/Northwind.svc/Suppliers" }
                    }
                });


});
            </script>
        </div>
    </body>
</html>

When I add combobox to my project the main grid stops updating

1 Answer, 1 is accepted