Dynamic list of TimeRanges


#1

I need to create a component that will render a collection of TimeRange objects and also allows the user to be able to add/remove time ranges from this array. Is there a component that currently supports this functionality? If not how can this be accomplished with the c3ui framework?


#2

Have you tried UIViewKendoGrid?


#3

Didn’t realize you can make the rows editable! For future reference here’s what I did:

{
    "component": "UIViewKendoGrid",
    "renderTo": "#Default",
    "icon": "bar-chart",
    "paginate": false,
    "sortable": false,
    "sortNullsLast": false,
    "small": true,
    "checkBoxes": false,
    "preventReloadOnPageParamsChange": true,
    "windowResizeEvent": true,
    "editable": "customEditable",
    "toolbar": [
        "create"
    ],
    "actionColumns": [
        {
            "command": [
                "destroy"
            ]
        }
    ],
    "data": {
        "collection": "..."
    },
    "columns": [
        {
            "id": "StartDateTime",
            "label": "Start",
            "field": "start",
            "format": {
                "funk": "localTime",
                "args": "M/D/YYYY H:mm:ss"
            },
            "align": "left",
            "colType": "date",
            "editor": "dateTime",
            "editorConfig": {
                "dateEditorFormat": ["M/D/YYYY H:mm:ss"]
            },
            "editorParseFormats": ["M/D/YYYY H:mm:ss"]
        },
        {
            "id": "EndDateTime",
            "label": "End",
            "field": "end",
            "format": {
                "funk": "localTime",
                "args": "M/D/YYYY H:mm:ss"
            },
            "align": "left",
            "colType": "date",
            "editor": "dateTime",
            "editorConfig": {
                "dateEditorFormat": ["M/D/YYYY H:mm:ss"]
            },
            "editorParseFormats": ["M/D/YYYY H:mm:ss"]
        }
    ]
}