DataManager - can it load CSS?

[DeBao Chua]

Hi expert,

I would like to know if css loading works with data manager or not. It does not work on my side. What am I missing?

I am using Avatar card website -- https://ej2.syncfusion.com/javascript/demos/#/material/avatar/card.html

I would like to load the data using data manager that will display dynamic cards automatically.

I read the sample link from Syncfusion -https://ej2.syncfusion.com/react/documentation/data/getting-started.html and modify my own codes for my understanding.

import * as React from "react";

import { Col, Container, Row } from "reactstrap";

import { compile } from "@syncfusion/ej2-base";

import { DataManager, Query, ReturnOption } from "@syncfusion/ej2-data";

import "../../node_modules/bootstrap/dist/css/bootstrap-grid.min.css";

import "./card.component.css";

import "./fabric.css";

import "./index.css";

// tslint:disable:max-line-length

export class AvatarData extends React.Component<any, any> {

public componentDidMount() {

this.loadDataFromSPList();

}

public loadDataFromSPList() {

// get the ID from Row section

const avatarList: HTMLElement = document.getElementById("displayAvatar") as HTMLElement;

// declare the URL name

const SERVICE_URL: string = "https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders (sample url)";

// render and compile the DOM element for displaying the details

const template: string =

'<Col xl={4}>' +

'<div className="control-pane">' +

'<div className="sample_container card_sample">' +

'<div className="e-card e-custom-card">' +

'<div className="e-card-header">' +

'<div className="e-avatar e-avatar-circle e-avatar-xlarge">' +

'<img src=${Image} alt="profile_pic" />' +

"</div>" +

"&nbsp;" +

"</div>" +

'<div className="e-card-header">' +

'<div className="e-card-header-caption center">' +

'<div className="e-card-header-title name">${FirstName}&nbsp;${LastName}</div>' +

'<div className="e-card-sub-title">${Position}</div>' +

"</div>" +

"</div>" +

'<div className="e-card-content">' +

'<p className="avatar-content">${Description}</p>' +

"</div>" +

"</div>" +

"</div>" +

"</div>" +

"</Col>";

const compiledFunction = compile(template);

// load the data from URL and then append DOM element to child form

new DataManager({ url: SERVICE_URL }).executeQuery(new Query()).then((e: ReturnOption) => {

(e.result as object[]).forEach((data: object) => {

avatarList.appendChild(compiledFunction(data)[0]);

});

});

}

public render() {

return (

<Container id="avatarID" fluid={true} width="100%">

<Row id="displayAvatar" />

</Container>

);

}

}

export default AvatarData;

[Christopher Issac Sunder K]

Hi DeBao Chua, 

Thanks for contacting Syncfusion support. 

We have analyzed the shared code snippet and we are confirming that CSS Loading will work with DataManager. 

We have noticed that in your shared code snippet you are trying to compile the string template using compile function from Syncfusion Base NPM package. So while using string template in compile function we should pass the class attribute as itself not in react syntax. And also you have used Reactstrap Col Layout Component in the application and our compile function does not compile the Reactstrap Layout Component. So we have added the modified the Application as below. 

Refer to the below code snippet to resolve the issue. 

// render and compile the DOM element for displaying the details 

             const template: string = 

              '<div class="col-xl-4">'+  // Col Layout Component Class 

                '<div class="control-pane">' + 

                    '<div class="sample_container card_sample">' + 

                        '<div class="e-card e-custom-card">' + 

                            '<div class="e-card-header">' + 

                                '<div class="e-avatar e-avatar-circle e-avatar-xlarge">' + 

                                '<img src="https://ej2.syncfusion.com/demos/src/grid/images/${EmployeeID}.png" alt="profile_pic" />' + 

                                "</div>" + 

                                "&nbsp;" + 

                            "</div>" + 

                         

                            '<div class="e-card-header">' + 

                                '<div class="e-card-header-caption center">' + 

                                    '<div class="e-card-header-title name">${CustomerID}</div>' + 

                                    '<div class="e-card-sub-title">${EmployeeID}</div>' + 

                                "</div>" + 

                            "</div>" + 

                         

                            '<div class="e-card-content">' + 

                                '<p class="avatar-content">${ShipCountry}</p>' + 

                            "</div>" + 

                        "</div>" + 

                    "</div>" + 

                  "</div>" + 

                "</div>"; 

 

Sample 

Please revert us if you are still facing the issue. 

Thanks, 

Christo

[DeBao Chua]

Hi Chris,

Thank you for the solution and explaination.

I have taken a look at your sample code and it works. I amend my code according to your suggestion and it works. It looks great. Thank you very much.

Back to your explaination about "class" and "className", I understand that I have to use "class" instead if I wish to pass it into string as template in compile function. If I am not passing it to template, I use className. Am I correct? Same concept as Reactstrap Col Layout component which I used "Col".

So far I think I understand the concept. Thanks expert. :)

[Christopher Issac Sunder K]

Hi DeBao Chua, 

Thank you for the appreciation. 

Yes. If you are not passing elements into compile function, you can use className as per react standards. 

Please let us know if you have any concerns. 

Thanks,
Christo