Kinvey Data Binding Example

ADMIN

Martin Bechev

Posted on: 11 Jul 2023 15:01

Hi John,

We are declining this request due to low interest and demand. If it turns out to be popular in the future, we will reconsider the status.

Regards,
Martin
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.

ADMIN

Svet

Posted on: 03 Apr 2020 08:27

Hi Robert,

Thank you for the provided details.

Indeed, providing such feature would be a valuable addition to the Kendo UI for Angular suite. This is why, I will convert this ticket to be a public feature request, so that it can generate more demand by our clients base. That will further help us to plan our future development plans accordingly.

Thank you for the provided details and feedback once again.

Regards,
Svetlin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

John

Posted on: 02 Apr 2020 13:15

Hello Svetlin,

I can write my own CRUD implementation with the Grid events, but in order for user filtering to work on the dataStateChange event , I need to convert the grid's State to a MongDB query. Much like your provided toODataString, I need a function like toMongoDBString (you did something similar here). Would you guys be willing to support querying your BaaS like this?

I suppose I could convert State to an OData query string, then use a library like odata-v4-mongodb to convert it.

ADMIN

Svet

Posted on: 02 Apr 2020 07:41

Hi Robert,

Let me provide some more details on this case.

The Kendo Ui for Angular suite doesn't provide a DataSource component as the Kendo UI for jQuery one:

https://docs.telerik.com/kendo-ui/framework/datasource/overview

That is an implementation design of the Kendo UI for Angular suite. All components are simply representational once. Which means that they can use any data regardless of where it comes from as long as it is in a supported format for the specific Kendo component.

This is why none of our CRUD examples for the Grid relies on such built-in functionality as the Kendo UI for jQuery DataSource. Instead, the Grid emits (edit), (save), and (remove) events which should be handled and the required request should be sent to the server. The examples demonstrate the different types of editing using the two Angular forms approaches - template and reactive forms.

Please let me know your thoughts on the provided details. Feel free to write back in case you have any questions about a specific CRUD example from our documentation. I am looking forward to your reply.

Regards,
Svetlin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

John

Posted on: 01 Apr 2020 13:13

Thank you Svetlin. I appreciate your help in the past with Kinvey and continued support with your BaaS in Angular. I will keep this ticket open for updates on your decision. Automated CRUD on the grid with Kinvey would be useful and I cannot necessarily write the implementation because I do not know the inner workings of the grid, but `kinvey-kendo-data-source` could be ported for Angular's use.

ADMIN

Svet

Posted on: 01 Apr 2020 12:16

Hi Robert,

Thank you for the provided details.

Indeed, we don't have an example demonstrating how the Grid can use data coming from a Kinvey Backend Service at the moment. But the Grid is agnostic as to where its data comes from. As long as the data is received at the client side it can be passed to the Grid.

The demonstrated approach of sending a get request is implemented using the Angular HttpClient which seems to be proper. The authentication should be setup according to the Kinvey requirements. They should probably contain some specific keys for your account. But I am no sure what exactly they should include. Indeed, the demonstrated Kendo jQuery example should help as the request should be identical. Once the data is received it can be passed to the Kendo UI for Angular Grid [data] input property.

I will also initiate an internal discussion about providing such example in our documentation. But even if we agree that such example should be created it will require some development time.

Please let me know in case I can provide any further assistance or additional details on this case. Thank you.

Regards,
Svetlin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

John

Posted on: 31 Mar 2020 20:15

I basically need an updated Angular version of your project here: https://github.com/Kinvey/kinvey-kendo-data-source which you guys wrote for me 2 years ago.

This is what I have so far, but I think I need to use the Angular functions and not REST for the authorization to work:

export abstract class KinveyGridService extends BehaviorSubject<GridDataResult> {
    private URL: string;
    private httpOptions: Object;
    private debug = true;
    public loading: boolean;

    constructor(
        private http: HttpClient,
        protected collectionName: string,
        private logger: NGXLogger,
    ) {
        super(null);

        // construct URL and authorization
        let auth;
        if (environment.production) {
            this.URL = config.kinvey.baseURL + config.kinvey.prod.appKey + "/" + this.collectionName;
            auth = "Basic " + btoa(config.kinvey.prod.appKey + ":" + config.kinvey.prod.appSecret);
        } else {
            this.URL = config.kinvey.baseURL + config.kinvey.dev.appKey + "/" + this.collectionName;
            auth = "Basic " + btoa(config.kinvey.dev.appKey + ":" + config.kinvey.dev.appSecret);
        }

        this.httpOptions = {
            headers: new HttpHeaders({
                "Host": "baas.kinvey.com",
                "Authorization": auth,
                "Content-Type": "application/json",
            })
        };
    }

    public fetch(state: any): Observable<GridDataResult> {
        const queryStr = `${toODataString(state)}&$count=true`;
        const URL = `${this.URL}?${queryStr}`;
        if (this.debug) this.logger.debug("fetch >> URL = " + URL);

        this.loading = true;
        let response = this.http.get(URL, this.httpOptions).pipe(
            map(response => (<GridDataResult>{
                data: response,
                total: Object.keys(response).length
            })),
            tap(() => this.loading = false),
        );

        if (this.debug) this.logger.debug("KinveyGridService.fetch >> response = " + JSON.stringify(response));
        return response;
    }
}

@Injectable({
    providedIn: "root"
})
export class AccessNumbersGrid extends KinveyGridService {
    constructor(
        http: HttpClient,
        logger: NGXLogger,
    ) { super(http, "AccessCode", logger); }
}