Is there a complete example of a Form using Kendo UI?

Hi Guy,

I am not quite sure if I understand correctly what do you mean with "complete example of a Form using Kendo UI". If you are looking for a starting point for your project, I will recommend going through our online demos and examining the source code. Also, the widget configuration options and various other features of the framework are explained in our documentation. I think that the Widget Fundamentals section would be very useful for you.  

Please let me know if I missed something.

Greetings,
Iliana Nikolova
the Telerik team

Iliana, I think what "Guy" is asking for, a Page that has a Form (like a ASP.Net Ajax WebForm) that shows a series of input entry controls, like First Name, Last name, Phone, Email and then this form is to get/set data to a backend server (i.e. an ASP.net MVC or Web API for JSON data) to perform CRUD operations. When he says "Complete" sample, he means and "end-to-end" sample how to get data, show it, change it and save it back to database.
This is a very needed type of sample to show the full cycle rather than just the client side.
Hope this helps!
..Ben

I'm still struggling with the basics that Guy is looking for.  In my case I am using CRUD with .NET 4.5 WEBAPI.  I have read (GET) and the update (PUT) working but cannot figure out the destroy (DELETE). Create is next (POST).  So I too would like to see a simple but complete form example containing say, a typical contact list on a remote server with crud examples.

Hello guys,

I am afraid at this stage we do not have such a full end-to-end example in Kendo UI, because it is a client-side library.

Regarding the remote CRUD operations - I would suggest to check this code library project, which illustrates such operations in Kendo UI Grid bound to ASP.NET MVC action methods. 

Regards,
Iliana Nikolova
the Telerik team

Thx Iliana,

My understanding of the latest webAPI (at least using MS MVC 4.5) is that all CRUD calls to the server use proper HTTP verbs such as POST (create) / GET (read) / PUT (update) / DELETE (delete).  Your examples all use POST. (Perhaps this is was the standard before webAPI/MVC 4.5?)

Further, in the thread for the demo you suggested, Atanas said: "You need to save the changes to commit the destroy operations to the server. Clicking the "Delete" button will not hit the server."  Can you expand on that statement - maybe with an snippet?  Using other examples I simply see "dataset.remove" (conceptually) being called when Delete is clicked.

Hello Peter,

Using the MVC 4 WebAPI with the Kendo Grid should be similar to using it with a web service. Besides setting the request type, you should also set the content-type and convert the data to JSON in the transport parameterMap function when updating, deleting or creating records. I attached a sample project which shows the basic configuration. 
Regarding your other question - when using batch editing, a request will not be sent to save the data immediately after the Delete button is clicked. Instead, all records that were deleted will be sent with a single request when the user clicks  "Save Changes" button.

Kind regards,
Daniel
the Telerik team

Thx Daniel

I look forward to digging into your attached sample (and watching the Q2 launch).

Peter

I am sick of grid examples. Applications aren't entirely comprised of GRIDS!!. I've wasted too many hours on this.

Please, show some form examples. Read and Update a form, and, simply submit a new form that wasn't bound to existing data.

Definitely agree with Christophla. I do not understand the concept of using grid to replace the form which usually includes lot of functionality.

Using just a form, not a datagrid ... here's a simple way to send the validated form.

http://www.kendoui.com/forums/framework/validation/send-form-data-to-server.aspx

I agree with Peter Bullock. We have been resisting kendo ui due to the fact that there will be huge learning curve for developers. It would be a great help if kendo ui team creates a sample application like ajax controls.

A simple contact form will be of help using mvc3+.

I suggested a general Show Case Gallery but either a) No such applications exist yet b) No one is really interested.

It would be nice to see real world applications instead of some twitter or todo apps :).

Telerik needs to provide a series of tutorials that result in real-world widgets as output and can be used as building blocks to solve common patterns to drive adoption

Demos are nice too but are to tutorials what uncommented code is to code reviews.

Its been 6 months since I first looked at Kendo and I don't see anything new on that front. Hopefully I missed something?

Koen,
  You posted a link to a thread that has no solution.... par for the course, I suppose. Telerik has always been thorough with examples - but they are dropping the ball with Kendo.

Hi Folks

I am also concerned with forms using KendoUI.
If you are using a Kendo Grid or a Kendo ListView there is a direct support of inline editing with Edit and Update, resp.. cancel buttons. Please refer to Kendo UI Web Examples: "Grid Inline Editing" and "ListView Edititng".
I wish to have something similar for forms: A form container hosting by form elements and the Edit, Update, Cancel buttons which is dealing with the templates and events. Ev. with the option inline or popup editing. That would be nice!

Linus  

Hello All,

I've been playing with KendoUI for a couple of weeks, and forms management is still a bit of a concern for me as well.  Most of the demos and examples take a completely different approach to displaying input forms, using a background image for the labels and then overlaying them with the actual input fields.  I find this somewhat misleading, although to be fair, I'm also exploring the possibility that it might be a useful technique in certain scenarios.

For more mainstream scenarios, however, we still need a few simple examples for declaring input forms and input panels containing various controls.  Perhaps just a page that includes all of the available widgets?

John

Hi,

 At the time being Kendo UI does not feature any form management capabilities. One can use the Kendo UI widgets as replacements of HTML elements - <input type="textbox/> , <select>, <textarea> etc.

 Here is a sample demo showing how you can use Kendo UI widgets in a form: http://jsbin.com/owulaj/3

Regards,
Atanas Korchev
the Telerik team

Atanas, I understand that Kendo does not have any built in form management capabilities.  What I am looking for is some type of 'best practices' related to a form.

For a form that requires CRUD operations, should I use MVVM and and a DataSource to manage the form?

I am trying to determine the best data access strategy if using KendoUI.  Should I use standard jQuery ajax calls?  A third party library such as AmplifyJS?  Or, can the Kendo DataSource combined with MVVM meet my needs.  

I would like to just use Kendo for simplicity.  However, as mentioned earlier, most of the examples of CRUD operations center around Grids.  That is good, but not the complete picture for me.

Any advice on the above is appreciated.

Thanks, Rick
 

Despite the original post to this form 6 months ago there has been no response from Telerik to answer a simple question. If there is no official demo can one of the Kendo developers not knock up something in a few minutes, zip it up and post it here?

I too am struggling to figure this out. Using MVC I have created a kendo mobile page with a simple login and password elements. This renders correctly when I run the page. However if I add @using (Html.BeginForm()) around the form controls then the CSS completely disappears and I am left with a non-kendo ui page. 

My limited knowledge of MVC relies on creating the form tag so I can post back the data.. Can this not be done with kendo ui mobile?

Thanks

Hi,

I have attached a small demo project that shows how to handle HTML forms with ASP.NET MVC and Kendo UI.

Hope this helps,
Holger

Thanks Holger, much appreciated! Will look over it now.

FYI: In order to decrease the size of the zip-file I had to remove the the NuGet packages files from the project. To get the project running you will have either to manually restore these files or allow NuGet to download them during the build.

Regards,
Holger

Was this ever followed up by Telerik for anyone.  Wow, I really want to use Kendo, but the "demos" are not cutting it, and the tutorials are sparse.  I am concerned only with MVC + Kendo Mobile UI + using Open Access.