DataManager - can it load CSS?

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;

3 Replies

CI Christopher Issac Sunder K Syncfusion Team October 11, 2018 10:23 AM UTC

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>"; 
 


Please revert us if you are still facing the issue. 

Thanks, 
Christo


DC DeBao Chua October 12, 2018 08:48 AM UTC

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. :)


CI Christopher Issac Sunder K Syncfusion Team October 12, 2018 09:04 AM UTC

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 


Loader.
Up arrow icon