Chart as templtae for column
7 Replies
Hi Alexey,
Thanks for contacting Syncfusion Support.
Query#:- Is it possible to solve such a problem, is it possible to see a similar example for aspx and c#?
We have achieved your requirement using DataBound and ActionComplete event of the Grid. Using this events, we have rendered the ejChart component inside Grid from Grid dataSource.(you can use your own field values in xName and yName. Initially we have placed the element using Template column.
Refer to the code below:-
|
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True">
<PageSettings PageSize="4" />
<ClientSideEvents DataBound="dataBound" ActionComplete="complete" />
<Columns>
<ej:Column Field="OrderID" DefaultValue=10 HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="75" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80" />
<ej:Column Template="#columnTemplate" HeaderText="Employee ID" TextAlign="Right" Width="150" />
</Columns>
</ej:Grid>
<script type="text/javascript">
function dataBound(args) {
var data = args.model.currentViewData;
for (var i = 0; i < data.length; i++) {
$("#container" + data[i].EmployeeID).ejChart({
series:
[{
dataSource: data,
xName: "Freight",
yName: "EmployeeID",
type: "line"
}],
});
}
}
function complete(args) {
if (args.requestType == "paging" ) {
var data = this.model.currentViewData;
for (var i = 0; i < data.length; i++) {
$("#container" + data[i].EmployeeID).ejChart({
series:
[{
dataSource: data,
xName: "Freight",
yName: "EmployeeID",
type: "line"
}],
});
}
}
}
</script>
<script type="text/x-jsrender" id="columnTemplate">
<div id="container{{:EmployeeID}}" style="width: 200px; height: 200px;" />
</script> |
Refer to the sample Link:-
Refer to the screenshot:-
Refer to the API Link:-
Please get back to us if you need any further assistance.
Regards,
Farveen sulthana T
Hi Alexey,
Query#:- I have two data sources, connected by a one to many relationship. how to connect two data sources to display the Chart in one row with primary data.
To achieve this requirement we suggest you to use ForeignKey column feature of the Grid. Using ForeignKey, we can connect the two dataSource like one to many relationship. Data Field and Text can be set using ForeignKeyField and ForeignKeyValue property of Columns. In ForeignKeyField(EmployeeID) property you can use firstTable datasource and in ForeignKeyValue(FirstName) with secondDataSource you can render the Chart using Template property.
Refer to the code example:-
|
<ej:Grid ID="gridAppointments" runat="server" AllowTextWrap="true" AllowSorting="true" AllowPaging="true">
<ClientSideEvents DataBound="dataBound" ActionComplete="complete" />
<Columns>
<ej:Column Field="OrderID" IsPrimaryKey="true" Width="50"></ej:Column>
<ej:Column Field="CustomerID" HeaderText="#" AllowEditing="true" Width="50">
</ej:Column>
<ej:Column Field="EmployeeID" Template="#columnTemplate" HeaderText="Title" ForeignKeyField="EmployeeID"
ForeignKeyValue="FirstName" TextAlign="Left" Width="90" />
</Columns>
</ej:Grid>
<script type="text/javascript">
function dataBound(args) {
var rows = args.model.currentViewData;
var ForeignKeyData = this.model.columns[2].dataSource; //dataSource from secondTable(ForeignKey data) to render Chart
for (var i = 0; i < rows.length; i++) {
$("#container" + rows[i].EmployeeID).ejChart({
series:
[{
dataSource: ForeignKeyData,
xName: "FirstName",
yName: "EmployeeID",
type: "line"
}],
});
}
}
function complete(args) {
if (args.requestType == "paging") {
var rows = args.model.currentViewData;
var ForeignKeyData = this.model.columns[2].dataSource;
for (var i = 0; i < rows.length; i++) {
$("#container" + rows[i].EmployeeID).ejChart({
series:
[{
dataSource: ForeignKeyData, //dataSource from secondTable(ForeignKey data) to render Chart
xName: "FirstName",
yName: "EmployeeID",
type: "line"
}],
});
}
}
}
</script>
<script type="text/x-jsrender" id="columnTemplate">
<div id="container{{:EmployeeID}}" style="width: 200px; height: 200px;" />
</script>
private void BindDataSource()
{
employee.Add(new Employee(1,"Jan"));
employee.Add(new Employee(2, "Feb"));
employee.Add(new Employee(3, "March"));
employee.Add(new Employee(4, "April"));
employee.Add(new Employee(5, "May"));
employee.Add(new Employee(6, "June"));
employee.Add(new Employee(7, "July"));
employee.Add(new Employee(8, "Aug"));
employee.Add(new Employee(9, "Sep"));
employee.Add(new Employee(10,"Oct"));
var index = this.gridAppointments.Columns.FindIndex(col => col.Field == "EmployeeID");
this.gridAppointments.Columns.ElementAt(index).DataSource = employee;
}
public class Employee
{
public Employee()
{
}
public Employee(int EmployeeId, string FirstName)
{
this.EmployeeID = EmployeeId;
this.FirstName = FirstName;
}
public int EmployeeID { get; set; }
public string FirstName { get; set; } //Bind FirstName(ForeignKeyValue) relates to EmployeeID from First Table
}
|
Refer to the documentation Link:-
Screenshot:-
Refer to the demo Link:-
Please get back to us if you need any further assistance.
Regards,
Farveen sulthana T
Hi Alexey,
Query#:- But I get the same Chart on every row. Key EmployeeID does not work to select data.
We have checked your query and in the previous update we had only given an example of showing Chart component in Grid. Please refer to the documentation about how we need to bind dataSource for Chart
In the previous update ForeignKeyData(dataSource for chart) contain dataSource as per mentioned documentation. So the Same chart has been displayed for all Grid columns based on the Value. So we need to bind Chart DataSource as like below format to render different chart on Grid.
|
<ej:Grid ID="gridAppointments" runat="server" AllowTextWrap="true" AllowSorting="true" AllowPaging="true">
<ClientSideEvents DataBound="dataBound" ActionComplete="complete" />
<PageSettings PageSize="4" />
<Columns>
<ej:Column Field="EmployeeID" Template="#columnTemplate" HeaderText="Chart" ForeignKeyField="EmployeeID"
ForeignKeyValue="FirstName" TextAlign="Left" Width="90" />
. . .
</Columns>
</ej:Grid>
<script type="text/javascript">
function dataBound(args) {
var rows = args.model.currentViewData;
var ForeignKeyData = this.model.columns[2].dataSource;
for (var i = 0; i < rows.length; i++) {
$("#container" + rows[i].EmployeeID).ejChart({
series:
[{
dataSource: ForeignKeyData[i].ChartData,
xName: "Month",
yName: "Salary",
type: "line"
}],
});
}
}
function complete(args) {
if (args.requestType == "paging") {
var rows = args.model.currentViewData;
var ForeignKeyData = this.model.columns[2].dataSource;
for (var i = 0; i < rows.length; i++) {
$("#container" + rows[i].EmployeeID).ejChart({
series:
[{
dataSource: ForeignKeyData[i].ChartData,
xName: "Month",
yName: "Salary",
type: "line"
}],
});
}
}
}
</script>
private void BindDataSource()
{
. . . //new to bind ChartData as like given (you can bind chartDataSource as per this format to display different Chart on Grid columns)
employee.Add(new Employee(1,"Jan", new List<ChartData>() { new ChartData() { Month = "Apr", Salary = 50 }, new ChartData() { Month= "Jan", Salary= 20 } } ));
employee.Add(new Employee(2, "Feb", new List<ChartData>() { new ChartData() { Month = "Jan", Salary = 10 }, new ChartData() { Month = "Feb", Salary = 33 } }));
employee.Add(new Employee(3, "March", new List<ChartData>() { new ChartData() { Month = "Mar", Salary = 40 }, new ChartData() { Month = "April", Salary = 53 } }));
employee.Add(new Employee(4, "April", new List<ChartData>() { new ChartData() { Month = "May", Salary = 63 }, new ChartData() { Month = "June", Salary = 73 } }));
var index = this.gridAppointments.Columns.FindIndex(col => col.Field == "EmployeeID");
this.gridAppointments.Columns.ElementAt(index).DataSource = employee;
}
|
In the below sample we have prepared sample with two tables Order table data for Grid and it is mapped to second table employee with mapping field as EmployeeID. The EmployeeTable has data for ChartComponent. In employee Table ChartData behaves like chart dataSource.
Refer to the sample Link:-
Refer to the Screenshot:-
Please get back to us if you need further assistance.
Regards,
Farveen sulthana T
SIGN IN To post a reply.
