Questions on Kendo UI for jQuery Forum

1 answer

51 views

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

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>

Grid

answered on 09 Jan 2012

0 answers

128 views

Object expected Window

>Hi everyone
I take problem please can you solved
Microsoft JScript runtime error: Object expected
this error message

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
      <link href="../Assets/kendo.common.css" rel="stylesheet"/>
        <link href="../Assets/kendo.default.css" rel="stylesheet"/>
        <script type="text/javascript" src="../Assets/JavaScripts/jquery.min.js"></script>

        <script type="text/javascript" src="../Assets/JavaScripts/kendo.core.js"></script>
        <script type="text/javascript" src="../Assets/JavaScripts/kendo.fx.js"></script>
        <script type="text/javascript" src="../Assets/JavaScripts/kendo.draganddrop.js"></script>
        <script type="text/javascript" src="../Assets/JavaScripts/kendo.resizable.js"></script>
        <script type="text/javascript" src="../Assets/JavaScripts/kendo.window.js"></script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script>
      $(document).ready(function () {
          var window = $("#window").kendoWindow({
              title: "Centered Window",
              width: "200px",
              height: "200px",
              visible: false
          }).data("kendoWindow");
      });
      $("#btnOpen").click(function () {
          var window = $("#window").data("kendoWindow");
          window.center();
          window.open();
      });
            </script>
.
.
.
.
    </div>
<asp:Button ID="btnOpen" runat="server" Text="Button"></asp:Button>
<div id="window">
     <p id="window4">
     Kendo window content
</p>
</div>
</section>
</asp:Content>

tHANK YOU much

Window

asked on 08 Jan 2012

0 answers

99 views

Grid is not updating on datePicker change

Hello

I am trying to select certain rows from mysql database and display it in a html table which is bound to kendoGrid.
The event gets fired on date change in kendoDatepicker. but the grid is not getting changed.

Can someone suggest me a way out of this.

- mahesh

Grid

asked on 07 Jan 2012

0 answers

100 views

Loading remotely generated html table

Hi

I am creating async request to generate a html table by php . This table gets generated on the change event of data which is bound to kendo.datePiicker. I want to bind the kendoGrid to the table generated thru this php code.

The simple achivement i wish is
1. on date change a month gets picked up and passed on to the remote server database
2. async call to the php script page is called (e.g. localhost/generateDataTable.php)
3. php generates the desired table.
4. the updated data thus gets shown using the kendoGrid for further use.

Grid

asked on 07 Jan 2012

0 answers

500 views

Multiple grids on same page : 2nd one loading dynamically

Hi,

I have 2 grids on the same page. Selecting a record from the first one should pass and id to the datasource for the second grid and then the second grid loads according to the appropriate id selected.

how can i refresh the datasource2 to pass a new url to the second grid each time. I am using $("#grid1").data("kendoGrid").dataSource.read();
to refresh datasource2 each time on select but unable to pass the id to the other grid.

if i define it inside a function- grid 2 does not find datasource2. if the var declaration for datasource2 is open- unable to pass the dynamic id to it.

here is code snippet :
dataSource2 = new kendo.data.DataSource({

transport: {
read: {url:vid + "properties.json",
dataType:"json"}
},
pageSize: 3,

});
}

var dataSource = new kendo.data.DataSource({

transport: {
read: {url:"topics.json",
dataType:"json"}
},
schema: {
model: {
id: "topic_id",
fields: {
TopicID: { type: "string" },
name: { type: "string" },
parent_topic_name: { type: "string" },
owner_name: { type: "string" },
description: {type: "string"},

}
}
},

pageSize: 8,

});

function creategrid1(){

$("#grid1").kendoGrid({
dataSource: dataSource2,
pageable: true,
selectable: true,
autoBind: false,
toolbar: kendo.template($("#template").html()),
columns: ["topic_property_id", "name","data_type","sort_order","description"]

});
}

$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
selectable: true,
toolbar: kendo.template($("#template").html()),
columns: ["topic_id", "name","parent_topic_name","owner_name","description"],

change: function() {
var row = this.select();
var id = row.data("id");

vid=id;
readid(vid)

$("#grid1").data("kendoGrid").dataSource.read();

}
});

creategrid1();

Grid

asked on 07 Jan 2012

1 answer

100 views

Help formatting xaxis and displaying data

I'm having trouble display the labels in the xaxis and drawing the lines (yes, the most basic parts of charting :). I've got a jsfiddle project (http://jsfiddle.net/XUmFR/50/) that has the data I'm using and the code I've tried so far.

Right now, I'm having two basic problems with it.

1. Can't get the value in the template for the xaxis label. I want to format the date using the commented out template (uses Sugar.js), but the value is undefined.
2. The Counts aren't showing up (though I haven't spent much time on this problem yet). The lines are flat even though the counts have values in them.

Basically I'm building a sample application to evaluate Kendo UI. The application shows charts of errors through a specified time period (the errors are logged by Elmah). I want to show one line in the chart for each application that we manage.

Any help is appreciated. Thanks.

Charts

answered on 07 Jan 2012

2 answers

76 views

Cant get my data loaded into the grid

I have an aspx page which returns the following data:

{
"TASKS": [
{
"TASK_ID": 101153,
"TASK_TYPE": "Ticket",
"TITLE": "This is not working 1",
"PRIORITY": "Unassigned"
},
{
"TASK_ID": 101159,
"TASK_TYPE": "Ticket",
"TITLE": "This is not working 2",
"PRIORITY": "Unassigned"
},
{
"TASK_ID": 101091,
"TASK_TYPE": "Ticket",
"TITLE": "This is not working 3",
"PRIORITY": "Unassigned"
}]
}

The content type is "application/json", yet no matter what I do, I can not get the grid to load this data. Can someone help?

Grid

answered on 07 Jan 2012

3 answers

820 views

How to define memo-style editor for grid cells

I have a grid that is bound to a data-source with a schema - if I defined the grid editable, and the data-source has a schena that defines what fields are editable, and how to edit them.

If I define the type of a field as string - I get an editor that is one line only. Is there a way to define an editor that allows multiple lines (either dynamically when recognizing an enter key, or with a pre-defined line count)?

My current schema looks like:

schema: {
model: {
id: "ID",
fields: {
ID :{editable: false, nullable: false},
Time: { editable: false, nullable: true },
Monday: { type: "string" },
Tuesday: { type: "string" },
Wednesday: { type: "string" },
Thursday: { type: "string" },
Friday: { type: "string" },
Saturday: { type: "string" },
Sunday: { type: "string" }
}
} // model

Grid

answered on 06 Jan 2012

0 answers

68 views

Is it possible to add a popup form for both create and update on grid?

Instead of having an in-line text box like feature when adding or editing on grid, Is it possible to create a popup like form when the buttons are clicked on the tool bar of the grid? Can someone direct me when i can find an example if it has been done before or possibly show me how its done?

Thanks Allot,

Grid

asked on 06 Jan 2012

1 answer

249 views

Validator with input arrays

Hi,

We are using the kendo validator and running into issues using input boxes in an array (name="something[]")
Using firebug to add the square brackets to the name on your own demos throws exactly the same error.

Strangely enough in one situation the array and validator do work together but in most they don't.
In the one situation that does work, I find it breaks with the same error if any field doesn't validate.
Where it always fails it does validate correctly if the array is removed.

I am a commercial customer so please let me know if a hotfix for this is released.

2. Uncaught Syntax error, unrecognized expression: [data-for=drop[]]
  1. Sizzle.errorjquery.js:4241
  2. Sizzle.filterjquery.js:4227
  3. Sizzlejquery.js:4017
  4. Sizzlejquery.js:5145
  5. jQuery.fn.extend.findjquery.js:5401
  6. d.extend._validateInputkendo.all.min.js:11
  7. d.extend.validatekendo.all.min.js:11
  8. submitQuote
  9. (anonymous function)/admin/?page=job_push&my_push=1#!view-quote-reply.php%26qid=0:532
  10. onclick/admin/?page=job_push&my_push=1#!view-quote-reply.php%26qid=0:533

Validation

answered on 06 Jan 2012