Demo "real world" Kendoui site example requested

[ajenski]

Hi,

Most of the demos shown on this site are nice and pretty but clearly are happy exampleville projects.  Ie one page one control, everything works fast and nice, no problems ( and no real world challenges)...  My intent with this post is not to slam but to encourage.

We've been using Telerik libs for 3+ years  so this question comes from a lot of history putting together a "real world" web site with poly telerik controls...  There is a big difference between a single page, single control demo and a usable site - there were many integration challenge$ to get to a point where I would call our telerik based project a web site.

I love the Kendoui concepts shown here but fear the same steep path of getting a KendoUI based "portal site" running that we went through on the Telerik AJAX .net side ( to be different sites).

Is there an example project available that approximates a web portal wireframe that has multiple Kendoui controls interacting?

My suggestion for a "real world" portal project would minimally consist of:

A menu top bar with multiple items/sub items where the items were data driven (read: role based)
Each of the menu items opens content below the menu w/o a full page reload
   (any sub items shown from the menu float above the content area below the menu control)
One of the menu content pages should contain a data grid with
  - data originating from a SQL database with a 'large' number of records returned (say at least 10K rows)
    ( datasource is anything other than a static XML file someplace)
  - have the data displayed by the grid be the result of > 1 UI selections from controls above the grid
    (say selections from a calendar and from an auto fill control as 'where' conditions)
  - have the grid scale to fit the available space on the screen below the menu and criteria controls
  - have the rows in the grid scale to fit the available number of rows in the grid (no vert scrolls, pagesize adjusts)
  - resize the page, and have the grid resize to fit along with its data.
  - re-apply a new criteria with the UI controls and then have the grid update with a status indicator
  - have the dates in the returned data displayed in MM/DD/YYYY format
  - have the currency data returned formatted in $12.45 format
 - prevent long returned strings from wrapping to another row
 - have the grid columns sort the contents of the grid while maintaining the size and row count of the grid
 - Allow the data in the grid to be exportable
Have this example render in iOS/mobile and Mac and PC desktop browsers with the appropriate view/controls shown.
Have all of the Kendoui controls take their skin/style from a combo box positioned above the menu control

Each of these seemingly "duh" items were painful development mini project$ in the AJAX.net libraries.

Please let me know how I can help with the creation of  demo above  - I am SURE that the above scenario will not be a one hit wonder request- in fact I'd bet that there are a fair number of users thinking of applications along the same lines but haven't gone through assembling the demos shown on your site into a larger project (like what we did on the Telerik AJAX.net side)

Kind Regards,
AJ

[Dimo]

Hello Ajenski,

Thank you for your feedback.

Currently our efforts are focused on implementing features and components from the Kendo UI suite. After that we may consider showcasing the widgets in some larger integration demo.

Greetings,
Dimo
the Telerik team

[ajenski]

Hello Dimo,

Thanks for the quick reply!
Understood on the build the product first before the demos concept.

Would you PLEASE consider my example request once it is timely do so.

If there are any developers on this forum who are interested in building a Kendoui demo like the one I described (for a publicly available demo for the community) please get in contact with me - we're probably going to embark on what I described as a test project "soon".

Best Regards,
-AJ

[Shawn]

I would love to see an example like this - even a downloadable eclipse project that shows it all hooks together.  Any examples out there anyones knows of that I could download for eclipse using a Java based backend?

[Robert]

I'm loving the Kendo UI strategy and what is offered so far. I must agree with the OP that a proof of LOB needs to be provided after the proof of concept is completed. There's so much Kendo UI development that needs to be completed that I can't imagine recommending Kendo UI for LOB development until 2013. Please, prove me wrong.

[TazDeveloper]

Hi Dimo,

I agree with Robert, and I understand that you are focusing on implementing features.  The problem is that the documentation is simple at best and not helpful.  I have been working with the controls for a week now, and I am running into issues when combining multiple widgets on the same page.  Without a real world example of using the widgets, it is taking to long to figure it out.  You might loose potential customers, if they don't have a real world example to follow and the documentation lacks helpful information.

For example, in the documentation, you don't even bother to tell what all the possible values are for each property or method.  What happens when you place widgets in a tab.  Do they need to be enabled at the time the tab is changed for that particular tab, or can all the tab widgets be enabled at ready? Etc.

Now that you released version 1, a commercial version I might add, supporting the functionality released to your users should be just as high a priority.  Under an open source license, the level of detail in the documentation and code examples can be left unfinished, but not for your commercial version customers.

Cheers,
         Paul

[Dimo]

Hello Paul,

Thanks for sharing your opinion. We will showcase a larger integration demo of our Kendo UI widgets, but as mentioned earlier, we are focused on feature implementation currently.

With regard to the TabStrip - you can initialize widgets when inside inactive TabsTrip tabs. However, for widgets such as the Slider, or scrollable Grids, it is better to do that once the tab becomes active, because Javascript size calculations do not work for elements inside a container with a display:none style.

If you have any other specific questions, let us know, preferably in a separate forum thread / support ticket.

Best wishes,
Dimo
the Telerik team

[TazDeveloper]

Hi Dimo,

Thanks for the quick reply.  And for the answer on the tabs.

Cheers,
         Paul

[Sebastian]

Hi guys,

If you allow me to chip in, I would like to build up a tad the reply provided by my colleague Dimo.

Indeed presently we are concentrated predominantly on new features for the Kendo UI framework, new widgets and functionality for them. However, note that we are allocating some time for substantial documentation improvements and you will be able to see the results from our effort in the beginning of the next year. We will start with updates for the client API of the widgets, and will continue with enhancements/additions to the conceptual help topics afterwards.

In addition, we do have some ideas about complete Kendo UI integration examples featuring a subset of our existing widgets in a real-life scenario. Hopefully we will have one such demo ready by the next major release of the suite, due in mid March 2012.

Your feedback on these planned activities will be more than appreciated, once they become a fact.

Best regards,
Stefan Rahnev,
Product Manager, Kendo UI division

[ajenski]

Hello Stefan,

Great to hear your plans.  When I started this thread I wanted to see if I could underscore the importance of having solid, "real-world" examples.  A good set of examples can literally save thousands of hours of time spent tinkering with the overly simplified demos when spanned across your client base of developers.  (something like: one hour saved per developer * 1000 developers = you get the idea ).  In my case, a good set of examples with the Telerik controls back in 2008 (when we started)  would have saved ME approx 100 hour$!

Based on the recent posts and renewed frequency to this thread, this concept rings true with other developers as well.  I would really like to be on the 'inner circle' with this - offering opinions, testing and feedback - particularly with the demos ( or ideas for the demos)

Best Regards,
Anders
PS. contact me directly, if need be, at my email within my account profile if needed

[Ron Richins]

I too, would like to chime in on this subject.  You released version 1 end of November, gave a road map for Mar 2012, which looks really great.  However, I have to agree that what is needed (preferably with each release, but at least immediately thereafter) is real world samples.  These samples would allow for a much faster adoption of release x.x without having to wait for 2 release cycles before sufficiently exploring release x.x.  I would rather wait longer for some of your road map Mar 2012 features (your choice), to get real world samples.

Ron

[Sebastian]

Hello again folks,

Your present and future feedback will surely be taken into account, hence do not hesitate to share your thoughts with us. This will help us improve our Kendo UI offering further and further, thus making it the top solution for building modern and feature-rich web sites for desktop and mobile, powered by HTML5, CSS3 and jQuery.

Best regards,
Stefan Rahnev,
Product Manager, Kendo UI division

[Marc]

Actually I just want to join this thread.

+1 for everything that has been said above.

Dear Telerik-Team, please take this request for a complex, real-world application example (with detailed documentation) serious. I think by now you've noticed how important this is.

[D]

I agree with the above.

The demos are great, but even trying to combine two demos together your world falls apart as one control stops the other working.

That is why we need larger demos to see how everthing ties together when lots of elements are combined.

KendoUI could be huge, but not if developers fail at first hurdle and move on

// ======== My very simple Non-Working demo ===========

< !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>

<div id="example" class="k-content">

<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>

Edit your post

[Dimo]

Hi D B,

Your demo works perfectly. Please make sure the URLs to the JS and CSS files are correct. Alternatively, use the CDN URLs:

<link href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>

 

Greetings,
Dimo
the Telerik team

[D]

Thanks for the reply, I changed the links as stated

The rsults were the same for IE9 & Chrome, but better with FF:

Full Details:

IE9: Grid data will not appear unless I remove combobox

Chrome 16: Grid data will not appear unless I remove combobox

Firefox 9: Grid data appears but I need to hit the "Reload" button before it will

[Dimo]

Hi D B,

The problem is caused by simultaneous JSONP requests overwriting their callback functions. Possible solutions include -

- set autoBind: false to the ComboBox, so that it is databound on opening, instead of during initialization. All the Kendo widgets have this property available
- do not use OData

By the way, if you have any other specific questions, which are not related to the main topic, please use a separate forum thread, or a support ticket. Thank you for understanding.

Greetings,
Dimo
the Telerik team

[D]

Sorry no luck, applogies for posting here, ended up on this thread as no one responded when I posted in grid forum and this thread came up searching "multiple Kendoui controls"

Back on topic: This just shows the need for some bigger demos, until you have shown how everything in the framework fits together, myself and I am sure others will not risk starting a new project in Kendo, which is a real shame.
 
I will come back to Kendo as it has so much promise, but not this year.

[Donna Stewart]

I, too, would love a "real world" examplek or two.  We are undertaking a rewrite of our website and I was hoping to use Kendo.  It looks very promising.  However, if I don't see any really useful examples soon, I will have to consider something else.  I really do love the Telerik MVC extensions even though I have spent many, hours banging my head trying to figure things out.  The support team at Telerik has been very helpful.  I am really hoping to be able to use Kendo for our website rewrite!

Thanks,
Donna

[Qloud Pty Ltd]

We are looking for a SQL Server data access Example and Login Functionality for developing Shopping cart Application.

More Real World Samples Required.

[Dave Navarro]

Hello,

I'm also looking for a SQL Server data connection example with login functionality that works with ASP.Net Security. We have a large Silverlight 4 app and a supporting / smaller asp.net app. Both work well with our SQL Server 2008 R2 db's... currently two, one for authentication and one for application data.

We'd like to make a smaller version of our app for data consumption on tablets (iOS / Android) but don't want to take on another big learning curve without knowing in advance that we can achieve our goal. The most important part of course is the data connections.

SQL Server seems to be a common question and concern. We use both SQL Server 2008 R2 and SQLCE 4 in our apps... so please let me know when we can expect to use these in our new Kendo apps.

Many thanks in advance!

~ Dave

[Ralph]

I love what is being said on this thread!

After using KendoUI, it is cleary not ready for true prime-time usage. I am so sick-and-tired of Third Party providers selling toolsets using simplistic demos, and then, expecting the general public to debug their tools for them.

One small example..

V1 2011 SP1 (version 2011.3.1407) - February 2012
Fixes the inability of the dataSource.transport.read.data objects to send parameters to the described resource.

Gee, do you think sending arguments to a method call is important?  Additionaly, their examples clearly show use of the object. Which 'probably' means their source data isn't using the parameter they show being sent IN their examples.  And this one isn't the only one.  Other examples clearly don't work at all...while others work but only within a narrow scope of use.

Then after some frustration...you go into their forums and read things like "we are working on higher priority items" and this is for simple things which should already work. 

Smoke and mirrors!  And...I'm sick of it!

[Dave Navarro]

Hello again,

In our apps I use the Entity Framework 4 and so I've setup an Entity Data Model. From there I can update and query my data as needed. Now, with the Silverlight 4 app I've setup the Domain Service classes but in the ASP.Net AJAX app I didn't. That little app uses SQLCE 4 and with it I use the ObjectContext like this; ObjectContext context = new ObjectContext("name=myEntities");

From there I setup a query like this; ObjectSet<bannedIPs> query = context.CreateObjectSet<bannedIPs>(); and then I can do something like this; foreach (bannedIPs result in query)... bla, bla, bla.... there really isn't anything magical here but, I can do all the "CRUD" I need to.

Now, I looked through a few examples and found something that looked like it might work for me. The example I found here (https://github.com/telerik/kendo-examples-asp-net/blob/master/grid-page-methods-crud/Default.aspx.cs) looks like it would work with the Entity Framework but I'm really new to the KendoUI so I have to ask what might sound like a 'less than intelligent question'.

Can we use the Entity Framework in some way to populate our Kendo apps with data? Or am I missing a big point? Is JSON a key player in all of this? I've read some posts that show how to setup serializing so we can use the Entity Framework with JSON.

Anyway, just thought I'd ask.

Thanks,

~ Dave

[Sebastian]

Hi all,

Thank you for your extensive feedback.

We are working on mid-sized sample application using the Kendo UI Web widgets and the Kendo UI framework components. Hopefully it will be ready for prime time by the next major release of Kendo UI, due in the second half of March.  Stay tuned for it.

We will also deliberate another Kendo UI Mobile sample application (besides the current Sushi app) some time after the official Kendo UI Mobile release in March 2012. This application may be deployed on iOS and Android application stores using PhoneGap.

I am locking this thread to prevent any further speculations or interpretations with regards to the subject raised in this forum entry.

Kind regards,
Stefan Rahnev,
Unit Manager, Kendo UI division