Questions on Kendo UI for jQuery Forum

0 answers

122 views

'Cannot call method 'toString' of undefined' in Kendo.all.min.js:6396

Hi all,

I'm getting a method 'toString' error when i render some line and bar/column charts.
Below is an example of one of the charts.

function widget1() {

$("#widget1").kendoChart({

theme: $(document).data("kendoSkin") || "default",

title: {

text: "Classificaties"

},

legend: {

position: "left"

},

chartArea: {

background: ""

},

seriesDefaults: {

type: "column", stack: false

},

series: [{name: "1 Incident",

data: [1,1,4,9,2],

color: "#DB3030"},

{name: "2 Probleem",

data: [,,,,],

color: "#8A2424"},

{name: "3 Wijzigingsverzoek",

data: [,,,1,3],

color: "#663399"},

{name: "3a Algemene wijziging",

data: [,,,,],

color: "#993399"},

{name: "3b Standaard wijziging",

data: [,,,,],

color: "#9966CC"},

{name: "3c Projectwijziging",

data: [,,,,],

color: "#CC66CC"},

{name: "4 Vraag",

data: [,,,,],

color: "#34B8C7"},

{name: "5 Beheer",

data: [,,,,],

color: "#346CC7"},

],

valueAxis: {

labels: {

format: "{0}"

}

},

categoryAxis: {

categories: [48,49,50,51,52]

},

tooltip: {

visible: true,

template: "${value}"

},

seriesClick: widget1Click,

transitions: false

});

}

Charts

asked on 09 Jan 2012

11 answers

166 views

[Solved] Integration : Nesting upload inside window

Unnecessary scrollbars in IE

After selecting a file to upload, the window re-sizes based on the content just fine in Chrome/Firefox.

In IE (obviously), scroll-bars get added. I'm using IE9 but I'm willing to bet this happens in all versions. I've created a JSFiddle here to test what I'm talking about.

I'm sure some clever CSS-hackery can fix the problem but is there something the window control can do to account for this?

Window

answered on 09 Jan 2012

1 answer

62 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

153 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

118 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

115 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

542 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

113 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

87 views

[Solved] 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

887 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