Questions on Kendo UI for jQuery Forum

0 answers

183 views

data source needed in initialisation for html table?

Hi guys
This is no doubt an incredibly stupid question and I'll probably not be able to articulate it properly, but here goes...

I'm trying to integrate kendo web ui into an aspx page that returns data in an html table at runtime. I have no control over any datasource, I can only return data into an html table, data surrounded by tr and td tags when the page loads, obviously I'm hoping kendo can add sorting, pagination and filtering. I can get a basic sort but pagesize and height etc don't work. I'm not sure whether I should be calling a datasource at some point within the initialisation (though the sort works without)

I can build a basic html table

<table id="grid">
<thead>
<th data-field="name">Name</th>
<th data-field="reference">Reference</th>
<th data-field="type">Type</th>
</thead>
<tbody>

add then add in the report which returns all the data within TR and TD tags

and then use the basic initialisation like so..

<script>
$(document).ready(function(){
      $("#grid").kendoGrid({
         groupable: true,
         scrollable: true,
         sortable: true,
         pageable: true
      });
});
            </script>

and it returns one very long sortable table (my sample data is hundreds of rows) with the page number 1 in the footer

what do I need to add to get a smaller size and split the data into multiple pages ?

sample data:


<script src="kendo/js/jquery.min.js" type="text/javascript"></script>
<script src="kendo/js/kendo.web.min.js" type="text/javascript"></script>
<table id="grid">
<thead>
<th data-field="name">Name</th>
<th data-field="reference">Reference</th>
<th data-field="type">Type</th>
</thead>
<tbody><<tr ><td class="">Course 1</td><td class="">BN1BANI/2FD</td><td class="">Course</td></tr><tr ><td class="">Sport 2yr FT Day</td><td class="">KN1ICTW/2FD</td><td class="">Course</td></tr><tr ><td class="">Chemistry Non-cert </td><td class="">KNCBRCH/1FD</td><td class="">Course</td></tr><tr ><td class="">Physics Non-cert 1yr FT Day</td><td class="">KNCBRPH/1FD</td><td class="">Course</td></tr></tbody>
</table><script>
$(document).ready(function(){
      $("#grid").kendoGrid({
         groupable: true,
         scrollable: true,
         sortable: true,
         pageable: true
      });
});
            </script>

forgive me this once for the rambling post - I'm probably a million miles away from what the problem really is and have not learned all of the terminology yet

Grid

asked on 26 Apr 2012

5 answers

1.0K+ views

Conditionally visible custom command?

Is it possible to have custom commands that are only rendered if some property in the data row is set?

I thought of data looking something like this:

[

{name:"Olivia", email:"olivia@olivia.com", showContactInfo: 1 },

{name:"Michael", email:"michael@yahoo.com",showContactInfo: 0},

{name:"Peterl", email:"pe@ter.com",showContactInfo: 0}

]

The idea is that you could:

if (showContactInfo) // make the custom command visible for this row

Another way to go could be a detail template, which was only accessible for some rows depending on the condition?

/Thomas

Grid

answered on 26 Apr 2012

1 answer

89 views

Grid / Hierarchy Or Detail template grid grouping does not work for child grid

Hi Guys,

I have a Grid with a detail template that contains a child grid; groupable is set to true for both girds.

When I try grouping a column in the child grid, it will only allow me to drag it to the parent gird grouping area.

Is this a know issue? I have attached a screen shot to show you what is happening.

Grid

answered on 26 Apr 2012

2 answers

198 views

Constrain dragging to the x or y axis

Hi all

Is it possible to constrain dragging to a particular x or y axis? Or, failing that, constrain it to a particular region? From the demo I can see that the drop area can be constrained, but it's the actual dragging (or its visualization) that I want to limit to a particular axis...

Thanks
G

Drag and Drop

answered on 26 Apr 2012

0 answers

140 views

DatePicker validates differently w/o value

I have the following code in my page:

<div id="myform">

<input type="date" id="myDate" name="myDate" data-date-msg="Invalid date" data-bind="value: myField" />

<br />

<button id="show" type="button">Show selected</button>

<button id="clear" type="button">Clear</button>

</div>

<script>

$(document).ready(function ()

{

var model = kendo.observable({ myField: new Date() });

$("#myDate").kendoDatePicker();

kendo.bind($("#myDate"), model);

var validatable = $("#myform").kendoValidator().data("kendoValidator");

$("#show").click(function ()

{

if (validatable.validate())

{

alert('Selected: ' + model.get("myField"));

}

});

$("#clear").click(function ()

{

model.set('myField', null);

});

</script>

Test cases:
1. Reload page, click "Clear", enter "abc" and click "Show selected" - it correctly displays the "Invalid date" and no alert is fired.
2. Reload page, enter "abc" in the DatePicker and click "Show selected" - it validates as true and shows an alert dialog.

Is there a way to make case 2 work the same as 1?

Validation

asked on 26 Apr 2012

1 answer

79 views

How to use KendoUI 'Grid DataTable' for mobile ?

hi,

Iam trying to use Grid DataTable on mobile app.But iam not able to display the table on my page.

Can u say any way to do this with example please...

Thanks,
Nandeeswar

Grid

answered on 26 Apr 2012

2 answers

132 views

Get Data in JSON Format

Hello Support,

I am currently trying out KendoUI for a project. I am working on the loading the local data into the grid using JSON. The grid is editable grid and user can also add new rows to the grid.

Can you please let me know that how can I get the modified data back from the Grid in JSON format?

Additionally, how do I add boolean/checkbox column in the grid?

Regard,
Maqsood Ahmed.

Grid

answered on 26 Apr 2012

0 answers

104 views

MS Blend for UX design!

If you have the time, I think anyone here who is likes interactive (version script) design of web pages will like this interview with Microsoft PM Kirupa http://blendinsider.com/technical/video-demo-overview-of-the-html-authoring-features-in-blend-2012-04-24/

I am hoping this is going to play well with KendoUI, because he really makes the case why you don't want to use a text style editor for HTML5/CSS3/KendoUI

live interactive design surface with 2-way editing of CSS
tools for styles, coloring, etc.
editing animation states and even interacting IN THE DESIGNER with different control states
excellent support for media queries against platform specific layout etc.

I certainly don't want to be tied to Microsoft platforms but I do think this tool or something like is definitely needed by UX people. It would be nice to swap out the MS-JS stuff and swap in the KendoUI stuff. (or dojo, or whatever).

I am going to try this out and report back on how it works for me (but then I come from the XAML world).

General Discussions

asked on 25 Apr 2012

5 answers

287 views

Grid not getting populated with ASP.Net Web Service JSON result

Dear Community,

For last few hours, I have been trying to populate the grid with remote data coming from a ASP.Net web service. The data returned is in JSON format.

But the problem is that grid is not getting populated with the result. In fact, if I open the fiddler, I don't see any corresponding http request to my web service that will fetch the data.

Here is what I have:

$(document).ready(function () {

$("#grid").kendoGrid({

dataSource: {

type: "json",

transport: {

read: "http://localhost/WebServices/MyWebService.asmx/GetBBGToADVTransactionsData",

contentType: "application/json; charset=utf-8",

type: "POST"

}

},

pageSize: 10,

serverPaging: true,

serverFiltering: true,

serverSorting: true

});

I in fact, tried fetching data in a variable as well, but even that is not working.

var dataSource = new kendo.data.DataSource({

transport: {

read: {

// the remote service url

url: "http://localhost/WebServices/MyWebService.asmx/GetBBGToADVTransactionsData",

contentType: "application/json; charset=utf-8",

type: "POST",

dataType: "json

}

});

Can you please help me, what I'm doing wrong here?

Cheers,
Shiva

Grid

answered on 25 Apr 2012

0 answers

205 views

Unable to serialize an Observable?

Hello All,
I'm trying to post some simple form data to the server by serializing my model data using JQuerys .param method. When I call .param using the modal data from a my viewModel (kendo.observable), an error is thrown from the kendo library indicating "this.shouldSerialize is not a function". After investigating a little further, I seems that the "this" reference is not pointing to the correct context (window instead of the viewModal). I put together a simplified JSFiddle to demonstrate the problem. Is this a bug with Kendo? Does the observable object provide a way to "serialize" itself? Thanks in advance for any feedback.

Sean

General Discussions

asked on 25 Apr 2012