Are there any samples or examples of standard Grids/tables created by Knockoutjs that are sortable on their columns and editable on a row level.
That is the rows are a normal table until you click and then you can edit them and save them back to the server using Ajax? Is there any examples of integrating Knockout with for example a JQuery UI editable grid like Wijmo grid or any other. I guess any JS grid that takes JSON could work?
I have a requirement to implement an editable table and would rather use Knockoutjs. Especially with Upshot.js and MVC4 on the way.
Thanks
KoGrid is a pretty good option.
It allows you to define cell and row templates where you can do exactly what you're saying. There is some documentation on the wiki
There are also various Knockout addons for datatables discussion here http://datatables.net/forums/discussion/4969/knockoutjs/p1 and the implementation here http://www.joshbuckley.co.uk/2011/07/knockout-js-datatable-bindings/
Wijmo recently added support for Knockout in v2.1 of their framework a example can be seen here http://wijmo.com/grid-with-knockout-viewmodel-loading-remote-data/
Also Kendo UI can easily integrate with Knockout
New version of datatables 1.10 is going to have support
Related
background:
We have a legacy system running the now dead Autocomplete plugin for jquery. We use it in multiple places on an intranet web UI. Until recently the client ran IE6 (yes, I know...) and this was all fairly static.
We're going to rededevelop the old front end of the UI. At the moment I'm considering using either jQuery UI or Bootstrap + Typeahead.
question:
The fields we use the autocomplete functionality often chain the values of other fields (themselves using autocompleted), passing these values as additional paramaters to our back end script. Is there an easy way to include these with the twitter bootstrap/typeahead method as there is with jQuery-UI?
If it's not too rude an example of each using additional parameters would be amazing.
Thanks in advance
edit:
I'm asking because I think bootstrap is smaller/lighter and less work to generate a nice UI.
We are using the Kendo UI Web (Free Version) autocomplete along with Bootstrap 3 and it is working very well.
The look is not like the other form elements generated by Bootstrap due to KendoUI CSS, but that seems minor.
We are also using MVVM pattern and Kendo Observables (Similary to Knockout) which makes it very easy to pass parameters to the backend systems.
i am new in mvc. i want to generate a UI dynamically like
initially a table will be displayed with four columns and 5 rows. in first & second columns there will be dropdown with predefine values and in last column there will be textbox. there will be a button called add more and when user will click on that button then a postback will occur and a new row will be added to that existing column. user can remove any column just clicking on another button which will be in fourth column.
it is very easy to do it in webform with gridview but i have no idea how can i do it in mvc. i do not want to use any js library or grid rather i want to do it with html table which i will generate dynamically. please help me with concept & sample code snippet if possible. thanks
I cant see here something really connected with mvc.
The case is that you would like to have an interactive UI, that basically is the job of Javascript.
If we are talking about grids, it can be next plugins/frameworks:
Kendo UI (not free for commercial use) - http://demos.kendoui.com/web/grid/editing.html
http://jquerygrid.net/
A lot of good plugings are here: Choosing a jQuery datagrid plugin?
So basically this is the same (like) Grid View from asp.net.
If you wanna have something exactly like GridView - I think there is no native implementation (from Visual Studio) for this (maybe i'm wrong, but 4 year experience say to me that i'm right :) ).
I am using webgrid at present, but finding limitations so seeking you experience on a good self contained solution that fit the MVC model neatly and simple especially model binding and validation annotations.
My options at present are:
1) Server based: Syncfusion HTML Helper server grid controls.
2) Telerik Kendo Client side JQuery controls
3) Other Telerik controls.
4) Standard JQuery grids.
Thanks.
I always use this:
jqGrid: jQuery Grid Plugin or
DataTables (table plug-in for jQuery)
At my work we have an existing ASP.NET web application and are duplicating some of the pages & functionality to better target our mobile users. We are using the jQuery Mobile framework and ASP.NET Web Forms to do this.
Since this is going to target the mobile web I would like it to be fast & lightweight which means turning off the view state, loading lists on demand (when opened), and I'd like to eliminate post backs (annoying & doesn't work well w/ jQuery Mobile). Of course this means doing a lot more work client side.
One of the pages is a bit complex, it allows the user to log items, however it's layout is fully customizable. Prior to logging the user is able to define what fields they wish to track. Some of these fields are system designated but others are created by the user. They can choose from a checkbox, dropdown list, date box, radio button, text box, or list box. Some fields are also tied to other fields meaning the user can select an item in one drop down list which then reloads another drop down list with the associated data. The user also has the ability to add an unlimited amount of additional fields (drop down lists) while on the actual page used to log their item. Once the page is filled out by the user the selected fields values are saved back to the server in a database table.
I figured this would be a great chance to use a JS Framework like Knockout.js, the dependency tracking would come in great for trying to keep things synced up & reload lists as needed based on selections made in other lists. Even though I am a bit concerned about how it would handle the fact that the form layout is dynamic & can be modified once displayed (anyone know if it can handle this?).
So I started looking around for jQuery Mobile & Knockout.js and apparently there are issues, workarounds, limitations, etc. w/ the two working together and I saw the same thing w/ Backbone.js
Does anyone have any suggestions w/ this? Is it worth the hassle to try and use a JS Framework of some sort w/ jQuery Mobile? Can a JS Framework handle the form I am trying to create w/o me having to jump through hoops? Am I better off looking for some sort of dependency tracking plugin and just using that and if so can you suggest any that will wire up to my model object & other controls on the page & work correctly w/ jQuery Mobile?
Overall, knockout should be a good fit for your requirements. I'm currently using it an MVC3 applicaiton to do similar things to what you are describing.
As for your complex page, this is all doable.
Your highly customizable form. This is one area where knockout really shines. It allows a separation be how data is displayed and the data itself. This can be done with different data-bindings types and you can add your own customized bindings. I actually do this a lot when creating a form and experimenting with what the test control type is.
Dynamic Layout - With Knockout there is no direct connection between the DOM and the data. Knockout's data-bind statements allow you to connect new content to it's data at run time. This currently works well in my current app.
For your requirement about unlimited adds, take a look at the Contacts Editor Demo. It seems to have features to do the unlimited requirements
In general with knockout, once I went to using ajax to handle all my data requirements, things became greatly simplified.
As far as using knockout with jQuery mobile, knockout is now part of the new releases of Asp.Net Mvc4, developer preview. It is my understanding that knockout is key to MVC's design on building single page web offline where the data is stored locally, then dynamically added to the displayed page. Cannot find link right know, but I'll keep looking and post edit later.
Hope this helps out. Also, checkout the links on knockoutjs.net home page. -
I'm developing my first MVC website and I'm experimenting with the few available grids out there. I really like the MVCContrib grid, but I need to implement a standard "Add new record" functionality, and I don't see a clear way to add a single record to the database and grid without having to reload the entire grid each time.
I know there is a jQuery grid plugin, and if there's no good way to do this with MVCContrib I'll go that direction.
After much looking around it would seem that my best solution is a framework like jQuery or ExtJS. MVCContrib Grid isn't there yet, if it ever will be.