Questions on Kendo UI for jQuery Forum

0 answers

312 views

Populate Grid with basic JSON data problem - uid is not defined

I'm pretty new to the whole jquery Kendo UI scene and I was playing around with the kendo grid for a project I was working on.

I got pretty far with loading basic JSON data into the grid, with just grabbing a sample set of data from the database.

However, now I'm trying to do an AJAX call (via jquery library), pass in some dates to a database, and get some JSON back and put it in the grid.

For some reason, the transport option worked a lot better than the data option.
I was using the data option because I was having the success function on the ajax call pass in the data to the grid.

However, when I do this, I get:
Uncaught ReferenceError: uid is not defined.

Is my approach wrong?
Am I missing some simple option?
Or does the transport feature have an option like the jquery ajax function?

See code below, which is still kind of messy...
I'm using the March 2012 version of Kendo Web Open Source.

The script:

$(document).ready(function() {

$("#GetBOData").click(function(){

$.ajax({

type : 'POST',

url : "/~basadmin/corp/reports/get_store_bkord_data.php",

data : {

BeginDate : $("#BeginDate").val(),

EndDate : $("#EndDate").val()

},

success : function(data, textStatus, jqXHR) {

//alert(data);

$("#grid").kendoGrid({

dataSource: {

dataType: "json",

data: data,

//transport: {

// read: {

// url:"/~basadmin/corp/reports/get_store_bkord_data.php",

// dataType: "json"

// }

//},

//schema: {

// model: {

// fields: {

// Buyer: { type: "string" },

// Line: { type: "string" },

// Category: { type: "number" },

// PartNum: { type: "string" },

// Description: { type: "string" },

// StoreLoc: { type: "number" },

// WhseLoc: { type: "WhseLoc" }

// }

// },

//total: "total"

//},

serverPaging: false,

serverSorting: false,

pageSize: 1000

},

columns: [

{title: "Buyer", field: "Buyer", width: 75},

{title: "Line", field: "Line", width: 75},

{title: "Category", field: "Category", width: 100},

{title: "Part Number", field: "PartNum", width: 110},

{title: "Description", field: "Description", width: 100},

{title: "Store Loc", field: "StoreLoc", width: 100},

{title: "Whse Loc", field: "WhseLoc", width: 100}

],

scrollable: true,

height: 800,

filterable: true,

sortable: {

mode: "multiple",

allowUnsort: true

},

groupable: true,

pageable: true,

navigatable: true,

});

}

});

Then the body of the html:

<body>

Begin Date: <input type="text" name="BeginDate" id="BeginDate"/>

End Date: <input type="text" name="EndDate" id="EndDate" />

<input type="submit" id="GetBOData" value="Submit" />

<div id="grid" style="width:1280px">

</div>

</body>

The php script returns data like so:

[{"Buyer":"Joe Smo","Line":"GBR","Category":"1","PartNum":"833-22101","Description":"Fuel Injector","StoreLoc":"34","WhseLoc":"90"}]

The JSON is one big giant array, with a bunch of JSON objects inside. (I think I'm getting my terminology correct).

...Ugh, the code did a lot of word wrapping, Sorry... Not use to the code editor here I guess. I'll attach the file and see if that is better.

Grid

asked on 03 May 2012

1 answer

155 views

Is it possible to put menu inside a grid cell

I do have multiple action buttons for each row. Instead of showing them all, I want to show only a one button, like 'More'. clicking on this will open a drop down menu, where all other actions will be displayed. Is there any way to achieve this?

Grid

answered on 03 May 2012

1 answer

137 views

Where is the documentation for the kendo object ?

Looking at various stackoverflow answers and kendo forum posts I can see people talking about using Kendo js library methods like :
kendo.toString() and kendo.stringify().

Where is the documentation for this ?? I have searched the docs and see nothing of this nature. Is this a hidden unsupported part of kendo ui ?

General Discussions

answered on 03 May 2012

0 answers

77 views

sorting field at top of each column in grid control

Good Day

is it possible to add a sorting field at top of each column in grid control

Grid

asked on 03 May 2012

0 answers

95 views

Kendo UI Grid Search functionality

Hi,

I have added kendo UI grid into my project. Further, I want to add search option to the grid in addition to the filtering functionality.
Is that search functionality supported by the Kendo UI grid? or else do I need to add or create a separate Search control to it?
Please help me on this.

Thanks ,

Niluka

Grid

asked on 03 May 2012

1 answer

119 views

remote datasource never calls home

Hi,

I had been using Sinatra pumping JSON to jqGgrid so I know my App works great. I decided to try out this Kendo UI as it reminds me of ExtJS which I have used extensively.

I setup a simple datasource pointing to my route supplying JSON

var ds = new kendo.data.DataSource({

transport: {

read: {

url: "/admin/users",

dataType: "json"

}

});

And then a super simple grid:

$("#user-grid").kendoGrid({

dataSource: {

data: ds,

pageSize: 10

},

height: 360,

columns: [ {

field: "firstname",

width: 90,

title: "First Name"

} , {

field: "lastname",

width: 90,

title: "Last Name"

} , {

field: "email",

title: "Email",

width: 200

}

]

});

This setup never calls the route for the data? The data source is thus empty, and hence the grid throws an error.

I see nothing wrong, but then again, I have only used this KendoUI for 10 minutes. What am I missing here. Seems loading a datasource remotely like that should just work, but my route for the data is not even hit...

If I change my grid to use dataSource: {data: ds:read()} then the ajax fires off and a nice string of JSON comes along, but nothing gets rendered in the grid.

Kinda demoralizing when the basic do not work. Anyone have a hint or tip???

Data Source

answered on 03 May 2012

2 answers

176 views

[Solved] Replace all panels (or a different approach)

I'm working on a mobile app where the user selects a Shop in the first view and then the second view displays an Order form specific to that shop.

The order form can be quite long (100's of products) so my plan is to only show product categories as PanelBar items and then load the products for that category (on demand) when the user expands the PanelBar item. Only one Category panel would be expanded at a time to keep the order form manageable on the screen.

My question is about how to replace the PanelBar data when the user goes back and selects another Shop (ie I'm loading a different order form)? Removing all items seems to work fine but I can't seem to append the new items to the panel bar if it is empty?

Am I missing something or can anyone suggest a better approach? I've got this working with a JQuery UI Accordian and KnockoutJS but performance is a little average - so I'm trying Kendo as an alternative.

Thanks for any comments.

PanelBar

answered on 03 May 2012

4 answers

617 views

k-textbox primitive width smaller than other widgets

The k-textbox primitive is not the same width as the combobox, dropdownlist, or numeric textbox. It would be nice if all the kendo primitives/widgets gave a uniform look out of the box.

General Discussions

answered on 03 May 2012

1 answer

163 views

Editable grid - incorporate aggregates into validation

Hi. Before I spend days trying to figure this out, can somebody point me in the right direction?

Is it possible to perform validation on a grid (bound to remote data) that takes aggregate values into account?

For example, I have a grid that with columns for Monday through Sunday. Each row can have a value for each day and there are aggregates for each day.

When adding a new row, I don't want the total for any day to exceed a set figure.

Is this possible, and if so, where do I start?

Thanks in advance.

Grid

answered on 03 May 2012

1 answer

185 views

How to Make a Legend Item a hyperlink?

I have the following jsFiddle project: http://jsfiddle.net/wCB5a/1/ of my failed attempt.

I'm trying to make a legend item a hyperlink to navigate to a product page within our site. Is there a way to make a Legend Item a hyperlink? If so how?

Charts

answered on 03 May 2012