Premium forums

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

• Guy

  
  27 Jun 2012 (Link to this post)

  Your examples show your controls.  How about one that shows a whole form?
  
• Iliana Nikolova

  
  29 Jun 2012 (Link to this post)

  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

  Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
• Ben Hayat

  
  30 Jun 2012 (Link to this post)

  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
• Peter Bulloch

  
  02 Jul 2012 (Link to this post)

  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.
• Iliana Nikolova

  
  04 Jul 2012 (Link to this post)

  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

  Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
• Peter Bulloch

  
  04 Jul 2012 (Link to this post)

  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.
• Daniel

  
  09 Jul 2012 (Link to this post)

  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

  Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  • KendoGridWebAPI.zip
• Peter Bulloch

  
  09 Jul 2012 (Link to this post)

  Thx Daniel
  
  I look forward to digging into your attached sample (and watching the Q2 launch).
  
  Peter
• Christophla

  
  10 Oct 2012 (Link to this post)

  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.
• Joseph

  
  23 Oct 2012 (Link to this post)

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

  
  29 Oct 2012 (Link to this post)

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

  
  07 Nov 2012 (Link to this post)

  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+.
• Marcus

  
  08 Nov 2012 (Link to this post)

  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 :).
• David

  
  08 Nov 2012 (Link to this post)

  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?
• Christophla

  
  15 Nov 2012 (Link to this post)

  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.
• Linus

  
  16 Nov 2012 (Link to this post)

  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  
• John Holliday

  
  28 Nov 2012 (Link to this post)

  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
• Atanas Korchev

  
  29 Nov 2012 (Link to this post)

  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

  Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
• Rick Atkinson

  
  10 Dec 2012 (Link to this post)

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

  
  13 Dec 2012 (Link to this post)

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

  
  13 Dec 2012 (Link to this post)

  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

  • KendoFormDemo.zip
• Michael

  
  13 Dec 2012 (Link to this post)

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

  
  13 Dec 2012 (Link to this post)

  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