Questions on Kendo UI for jQuery Forum

1 answer

218 views

Hierarchy grid - Inner grid column width larger than setting

Hello,

I have a hierarchy grid set up. The outer grid has a dozen or so columns while the inner grid only has 3 columns. I have specified specific widths for all the columns however the columns in the inner grid do not respect the width values set and expand to the full width of the outer grid.

So instead of looking like this:

..|.A.....|.B.....|.C.....|.D.....|.E.....|.F.....|.G.....|.H.....|.I.....|.J.....|.K.....|.L..
..>....|.1.....|.2.....|.3...

It looks like this:

..|.A.....|.B.....|.C.....|.D.....|.E.....|.F.....|.G.....|.H.....|.I.....|.J.....|.K.....|.L..
..>....|.1................................|.2........................|.3..............................

I don't really care if the inner grid itself is streatched to the full width of the outer grid but the columns need to respect the width I set so it's easily readable.

Grid

answered on 05 Mar 2012

1 answer

99 views

Chaining comboBox bug or am I doing something wrong? Code Included.

I'm attempting to chain together two combobox controls. The problem I'm having is:

Box 1 change event enables box 2.
Box 2 is disabled on start by default.
If I select an item in box 2, then go back and change the box 1 value, box 2 just sits there and will not do anything. I can't even open the list.
I need to always sync the values because box 2 is reliant upon the selection in box 1.

Is there something I am doing wrong.

http://pastie.org/3506645

General Discussions

answered on 05 Mar 2012

0 answers

182 views

JSON format with objects

Hi,
Does the Kendo datasource support the following JSON format?

var people = [
                       {
                           "Person": { Name: "Person 1"},
                           "Person": { Name : "Person 2"}
                       }
                    ];

My current schema only loads the last record from the data source when connected to a grid. I am using the Q1'12 beta.

$("#grid").kendoGrid({
                        dataSource: {
                          data: people,
                            schema: {
                               type : "json",
                                model: {
                                    fields: {
                                        Name: { type: "string" }
                                    }
                                }
                            }
                        },
                        height: 250,

                        columns: [
                            {
                                field: "Person.Name",
                                title: "Name"
                            }

                        ]
                    });

Thanks.
Morten

Data Source

asked on 05 Mar 2012

2 answers

581 views

[Solved] Mapping dataSource.schema.model.id causes 'undefined' error.

Hi there,

I am trying to map a field defined in my datasource schema to the unique Model instance id property. However, after I do this the field in the model no longer displays correctly when the datasource is bound to a list. The value for "PONumber" field is always 'Undefined' after this mapping is defined. If I comment out the line which maps the "PONumber" field to id, the expected value from the "PONumber" field shows up in the output. However, because there is no id mapping which uniquely identifies the Model instance calls like get(id) won't work.

[Edit: I am using 2012.1.229.beta]

Here is the code I'm using (see attachment for code and sample data file):

<!DOCTYPE html>

<html>

<head>

<title>Repro</title>

<script src="js/jquery.min.js"></script>

<script src="source/js/kendo.all.js"></script>

<link href="source/styles/kendo.common.css" rel="stylesheet" />

<link href="source/styles/kendo.mobile.all.css" rel="stylesheet" />

</head>

<body>

<div data-role="view" id="tabstrip-listview" data-init="initList" data-title="PO List" data-layout="tabstrip-layout">

<ul id="po-listview"/>

</div>

<script>

var app = new kendo.mobile.Application(document.body);

var ds = new kendo.data.DataSource({

transport: {

read: "Data/POListTest.xml"

},

schema: {

type: "xml",

data: "/ItemInfoList/ItemInfo",

model: {

id: 'PONumber', // *** Commenting out this line fixes the problem ***

fields: { PONumber: "Item/PurchaseOrderHeader/POHdrPONumber/text()" }

}

});

function initList() {

$("#po-listview").kendoMobileListView({ dataSource: ds, template: "${PONumber}" });

};

</script>

</body>

</html>

Any ideas what is happening here?

Data Source

answered on 05 Mar 2012

0 answers

132 views

layout mode

Hi everyone, I was wondering, is there a plan to implement some sort of "layout mode" property in the dropdown/combo config that would let you set if you want to use a list or a table. That way we could implement templates with TDs to define multiple columns.

I'd love to see that!

Cheers,
Andrés

ComboBox

asked on 05 Mar 2012

3 answers

693 views

[Solved] Pie chart is very small if chart widget is set to a smaller size

Hi,
I need my pie chart to be 200px * 200px, so I set the parent div style accrodingly, and appended the width style at the end of the chart function call.Now my chart widget size looks fine, but the pie chart itself is very small (diameter is only 26px) compared to the chart area.The pie chart looks like a small colored bullet point in the middle of a white space.How can I make the pie chart visual bigger ?

<div id="chart" style="width:200px">

</div>

function createChart2() {

$("#chart").kendoChart({

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

dataSource: {

type: "odata",

transport: {

read: {

url: "../../Services/WcfDataService1.svc/AllianceSummaryPartnershipMixes"

}

},

sort: {

field: "Name",

dir: "asc"

}

},

title: {

text: "Partnership Mix"

},

legend: {

position: "bottom",

margin: 0

},

seriesDefaults: {

type: "pie"

},

series: [{

field: "Value",

categoryField: "Name"

}],

tooltip: {

visible: true,

format: "{0:N0}"

},

chartArea: { margin: 0 },

plotArea: { margin: 0 }

}).css({ height: "200px"});

}

Charts

answered on 05 Mar 2012

1 answer

98 views

Editor - Inserting a line

Is it possible to insert a line in the editor or simulate a line? I know I could do it with an image like I do with the Silverlight RadRichTextBox, but is it possible to do this without having to use and image?

Editor

answered on 05 Mar 2012

1 answer

187 views

Grid with PHP. Problem with CRUD

Hi all,

i'm a bit stuck with the crud functionality in Kendo UI's grid.

My code (see below) generates a populated grid and the neccessary buttons, but i dont seem to be 'binding' the 'save' button to the 'save' functionality in the php file. Can anyone maybe spot what i'm missing please?

Thanks!
Vauneen

dataSource = new kendo.data.DataSource({
                   transport: {
                       read: "data/users.php",
                       create: {
                           url: "data/user_add.php",
                           type: "POST"
                       },
                       save: {
                           url: "data/user_edit.php",
                           type: "POST"
                       } ,
                       parameterMap: function(options, operation) {
                           if (operation !== "read" && options.models) {
                               return {models: kendo.stringify(options.models)};
                           }
                       }
                   },
                   schema: {
                       data: "data",
                       model: {
                           id: "ProductID",
                           fields: {
                               ExpiryDate : { editable: true, type: "date"},
                               EmailAddress : { editable: true, type: "email"},
                               FirstName : { editable: true, type: "text"},
                               SecondName : { editable: true, type: "text"}
                           }
                       }
                   }
               })

$("#grid").kendoGrid({
               dataSource: dataSource,
               columns: [{ field: "ID" }, { field: "ExpiryDate", title:"Expiry Date", format: "{0:yyyy-MM-dd}" }, { field: "EmailAddress" }, { field: "FirstName" }, { field: "SecondName"   } ],
               editable: true,
               toolbar: ["create", "save", "cancel"],
               detailTemplate: kendo.template($("#template").html()),
                detailInit: detailInit
           });

Grid

answered on 05 Mar 2012

1 answer

122 views

Bug

http://demos.kendoui.com/beta/web/editor/index.html

Ok so (this is in FF)...

Put your cursor at the end of "Hyperlink and image dialogs"
Hold Shift press Home to select the row
While still holding shift, press the left arrow
Copy, Ctrl-C
Move the cursor to the end of any other LI row
Paste Ctrl-V

...goes all gimpy with extra UL wrappers

Can replicate, and provide a video if needed...I did have one recorded, but crappy jing hung :/

Editor

answered on 05 Mar 2012

1 answer

91 views

spin event doesn't work. bug?

Hi!

Spin event doesn't work! After click on spinner nothing to do. This is my bug?

For example:

spinEvent = function(e) {
alert('spin!');
};

amount = $("#amount").kendoNumericTextBox({
format: "#,0",
min: 0,
max: 1000000,
step: 1000,
spin: spinEvent
}).data("kendoNumericTextBox");

Sorry for my english.

NumericTextBox

answered on 05 Mar 2012