Contact Manager KendoUI version example

[adriatic]

I would like to make the (pretty bland) original sample

be a a bit more spiffed to show a bit more that KendoUI can do, without using any KendoUI Pro components. So, instead of the manually crafted contact list, I would like to use a panelbar:

with the same names as the original.

The [contact detail] might require a bit more sophistication as I would like to use a grid like this

However this would look "forced" as I would have just the single row in the grid (selected from the panel bar). If on the other side, he contacts detail always gets loaded by all contacts, then this sample also looks silly.

So, unless you see some better use of KendoUI (like two "connected" panel bars), we should only replace the left side of this sample.

[JeroenVinke]

What about wrapping the list and detail in a tab control, and then add the grid in a different tab

[adriatic]

I so knew that my effort to create this as an issue and therefore be able to ask for your advice would pay off!!

[adriatic]

My end of the day report

1. All code (that is described below) is in kendoui folder of the cm-bridges repository.

2. My plan is to present the top level tab-control with three tabs:

   
   Where the first tab shows the original (Bootstrap) version, the second tab the KendoUI Core version:
   
   and the third tab the Grid inline editing sample morphed to fit this Contact Manager in the grid.
   

3. Still open issues
   

   • It seems that one cannot use the same Bootstrap "column construct" within the Tab Control - repeating the construct like

       <div class="row">
          <contact-list class="col-md-3"></contact-list>
          <router-view class="col-md-8"></router-view> 
        </div>         

   in each of the tab panels.

   • If I add the above code which would render the original sample in the Original panel, nothing is rendered on the screen and no errors issued. So, We would have to use some other method for creating a row with two columns (3-8 ratio) for the second tab panel, if we leave Boostrap for the first tab panel (as it should be)
   • I had no time to load the original data to KendoUI Core Panel bar, nor to hook the click on it to the contact detail pane.
   • I had no time to stuff the KendoUI grid to the third panel (and adjust the data to match the original Content Manager sample).

[adriatic]

The most important reason for leaving this unfinished is this:

Monterey offers the perfect opportunity for optimal configuration of the app consuming KendoUI bridge: definition of only these widgets that the developer wants the app to use. So, the Aurelia-CLI tile that will most likely be presenting the UI for definition of that set of widgets, may use a checked list box:

(the actual content of this box will of course be different, presenting the alternative ways to select all or just a few). This list will then be added to the index.html (that is the simplest way of changing the scaffolded app, I think)

So I would like you to finish this app in the "style" that would be similar if not the same with the way Monterey will do it once we implement the needed support for that. I am assuming that it will be you to implement the Aurelia-CLI tile, of course.

[JeroenVinke]

Monterey offers the perfect opportunity for optimal configuration of the app consuming KendoUI bridge: definition of only these widgets that the developer wants the app to use. So, the Aurelia-CLI tile that will most likely be presenting the UI for definition of that set of widgets, may use a checked list box:

Choosing widgets means "choose what files you want to use of a plugin" here, right? In the context of aurelia-kendoui-bridge you would say "I want autocomplete.html, autocomplete.js, grid.js and grid.html" of the aurelia-kendoui-bridge plugin

[adriatic]

you would say "I want autocomplete.html, autocomplete.js, grid.js and grid.html" of the aurelia-kendoui-bridge plugin

Yes, with the added comment that this functionality should be available at all times (as different from being there "just once"), and if should be used to both add and remove components.

Note that the add and remove operations act only on the configuration files - not on the actual user code.