Hi everyone,
I’m using Ember 2.0
I’m trying to use the Kendo-UI grid with Ember and my first thought was to wrap it as component. Now what I’m not sure how I should do is how to pass some of the options to the grid. For example, the kendo-ui grid receives a set of parameters as JSON (example bellow):
didInsertElement: function() {
this.$().kendoGrid({
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
.... //more code
Now, this works all well. But I wanted to make my component configurable and receive a set of parameters, which is easy to do for simple properties like sortable or groupable
{{kui-grid groupable=true sortable=false}}
The thing Is, how would I pass the “pageable” object to the component? It’s a JSON object with 3 keys. I’m not sure how to do that. If I had controllers (which I’m trying to avoid since I’m using Ember 2.0) I imagine that I could have those values in each controller and then do something like:
{{kui-grid pageable=controllerProperty}}
Is there a better way of doing this? Also, there’s another thing: While the pageable option is a set of static options. The grid for instance also receives the column definition (which can have any number of columns) , like this:
kendoGrid({columns: [ { title: "First Name", field: "firstName" },
{ title: "Last Name", field: "lastName"}
{ title: "Email", field: "email" } ] )}
So the solution would have to something that works with this scenario.
I’ve worked with a component based framework once and the way we handled this was having child components of the parent and the parent could read those values from the children, like the following:
<dataGrid dataSource='source'>
<column name='name' label='Name' width='50' />
<column name='age' label='Age' width='50' />
However, I don’t know how to to that using Ember, I’ve searched around “parent-child component communication” but but with no luck regarding this issue. Help would be very much appreciated, thanks!