Examples » Grid

The data-bind="..." bindings like text, visible, and click are not fixed - you can easily add custom ones. If your custom binding merely adds event handlers or updates properties of a DOM element, you can implement it in just a few lines.

However, you can also use custom bindings as a way to create reusable components (or plugins) such as the simpleGrid binding demonstrated on this page.

If a plugin provides its own standard view model class (e.g., ko.simpleGrid.viewModel in this example), this provides both a way to configure how an instance of the plugin should work (in this example: page size, column definitions) and if properties on the view model are observable (in this example: current page index), it also makes it easy for external code to write to those properties and cause the UI to be updated. For example, see how the "Jump to first page" button works.

Take a look at the HTML source code - it's pretty easy to use and interact with this simple grid.

---

Add item Sort by name Jump to first page