End Date greater than the start date in kendoGrid


#1

Disallow selecting end data that is before start date in a UIViewKendoGrid


#2

Can you clarify what you want to achieve and what currently you have?
Do you mean adding a filter to your KendoGrid? if so then this should be in your datasource, e.g.

ui module EnergyManagement {
    dataSource Facilities {
        "c3type": "Facility",
        "responseSelector": "objs",
        "c3arguments": {
            "spec": {
                "include":  "[id, name]",
                "limit":    25,
                "filter": "facilityType!='Room'"
            }
        }
    }
}

#3

In my interface I have start and end date and intention is to disallow selecting end date which is before the start date for eg:
Start date: 22 jan 2007
than end date cannot be 21 Jan 2007 or less, it had to be more that equal or greater than 22 jan 2007


#4

Are these start and end columns in your KendoGrid? so you want to show only rows with end > start. This can be done in the datasource filter.

Or you have a separate filter form that has a Calendar selection and you want to use this to select your rows? properly configuring the filter form will automatically update the filter of your datasource.

Can you post a screenshot of your components to better understand your requirements?


#5

Thanks Bachr for the prompt response,
A question:
Can I use something like this:

    "startDate": {
        "referenceConfig": ["start", "day"],
        "direction": "before",
        "number": 2,
        "unit": "month"
    },
    "endDate": {
        "referenceConfig": ["start", "day"]
    },

In the KendoGrid


#6

KendoGrid does not have these two fields, so the answer is you cannot.
You can check the properties of KendoGrid from console with c3ShowType(UIViewKendoGrid)


#7
   {
                "id": "id1",
                "component": "UIViewKendoGrid",
                "renderTo": "#Default",
                "icon": "bar-chart",
                "fuzzyCount": null,
                "paginate": false,
                "sortable": false,
                "sortNullsLast": false,
                "small": true,
                "checkBoxes": false,
                "resizable": true,
                "preventReloadOnPageParamsChange": true,
                "windowResizeEvent": true,
                "editable": "customEditable",
                "data": {
                    "collection": "somecollection"
                },
                "toolbar": [
                    "create"
                ],
                "actionColumns": [
                    {
                        "command": ["destroy"],
                        "width": "150px"
                    }
                ],
                "columns": [
                    {
                            "id": "PeriodStart",
                            "label": "start",
                            "field": "start",
                            "format": {
                                "funk": "localTime",
                                "args": "D/M/YYYY"
                            },
                            "align": "left",
                            "colType": "date",
                            "editor": "date",
                            "editorConfig": {
                                "dateEditorFormat": ["D/M/YYYY"]
                            },
                            "editorParseFormats": ["D/M/YYYY"]
                        },
                    },
                    {
                        "id": "PeriodEnd",
                            "label": "end",
                            "field": "end",
                            "format": {
                                "funk": "localTime",
                                "args": "D/M/YYYY"
                            },
                            "align": "left",
                            "colType": "date",
                            "editor": "date",
                            "editorConfig": {
                                "dateEditorFormat": ["D/M/YYYY"]
                            },
                            "editorParseFormats": ["D/M/YYYY"]
                        },
                    }
                ]
            }

#8

OK so start and end are two columns in the grid. Can you try to add this filter to you collection end >= start, it should select rows where end is later than start.


#9

Hi Bachr,

Where exactly you want the filter, and How it will work, I am unclear about it


#10

Your datasource is defined by this

"collection": "somecollection"

So you need to find where this somecollection is defined (probably in a .c3ui file under dataSources components). Then modify this datasource by adding the filter just like my early example above.

If you cannot find how to do then please paste your data source definition here so I can look at it.


#11

Instead of KendoGrid what option do I have,
Can I use “UsageAndEvents” component which have start and end date with before and after referencConfig ?

Anyway somecollection is;

dataSource somecollection{
    "record": false,
    "collection": true,
    "localData": true
}

#12

UIViewUsageAndEvents is used to display graphs not a grid!

Can you add this to your data source

                "c3arguments": {
                    "spec": {
                        "filter": "end >= start"
                    }
                }

#13

It doesn’t work after putting the above statement in the datasource, what you expect in the date selection after introducing the filter in the datasource ?

Is there a way we can introduce the javascript alert for the same?


#14

Can some one provide an example for introducing JS in c3UI ?