Sorting any column in a Grid causes a ColumnTemplate column to disappear

[Paul Garland]

I have a Grid with a #columntemplate that displays a chart. When any of the other column headers is clicked, the charts all disappear, but the other columns change appropriately. Any idea how I get the charts to regenerate or redisplay.

 <div>

           <ej:Grid ID="gridAppointments" runat="server" AllowTextWrap="true" AllowSorting="true" AllowPaging="true" Font-Size="X-Small">

                 <ClientSideEvents DataBound="dataBound" ActionComplete="complete" />

                    <PageSettings PageSize="10" />

                      <Columns>

                            <ej:Column Field="account" HeaderText="Account" AllowEditing="false" Width="30"></ej:Column>

                            <ej:Column Field="name" HeaderText="Customer" AllowEditing="false" Width="50"></ej:Column>

                            <ej:Column Field="firstPeriod" HeaderText="First Order" AllowEditing="false" Width="50"></ej:Column>

                            <ej:Column Field="supplykitdatestr" HeaderText="Supply Kit" AllowEditing="false" Width="40"></ej:Column>

                            <ej:Column Field="ordersChartId" Template="#columnTemplate" HeaderText="Chart" ForeignKeyField="ordersChartId"

                                ForeignKeyValue="Name" TextAlign="Left" Width="140" />

                        </Columns>

            </ej:Grid>

      <script type="text/javascript">

         function dataBound(args) {

              var rows = args.model.currentViewData;

              var ForeignKeyData = this.model.columns[4].dataSource;

               debugger

              for (var i = 0; i < rows.length; i++) {

                  $("#container" + rows[i].ordersChartId).ejChart({

                      series:

                          [{

                              trendlines: [{

                                  //Enable Trendline to chart series

                                  visibility: "visible", type: "linear", fill: '#0000FF', width: 3, opacity: 1, dashArray: '2,3'

                              }],

                              marker: {

                                  dataLabel: {

                                      //Set text alignment to datalabel text

                                      visible: true,

                                      horizontalTextAlignment: "center",

                                      verticalTextAlignment: "far"

                                  }

                              },

                              dataSource: ForeignKeyData[i].ChartData,

                              xName: "Period",

                              yName: "Orders",

                              type: "column"

                          }],

                      legend: { visible: false },

                      primaryYAxis:

                      {

                          rangePadding: "round",

                          startFromZero: true

                      },

                  });

              }

          }

          function complete(args) {

              if (args.requestType == "paging") {

                  var rows = args.model.currentViewData;

                  var ForeignKeyData = this.model.columns[4].dataSource;

                  for (var i = 0; i < rows.length; i++) {

                      $("#container" + rows[i].ordersChartId).ejChart({

                          series:

                              [{

                                  trendlines: [{

                                      //Enable Trendline to chart series

                                      visibility: "visible", type: "linear", fill: '#0000FF', width: 3, opacity: 1, dashArray: '2,3'

                                  }],

                                  marker: {

                                      dataLabel: {

                                          //Set text alignment to datalabel text

                                          visible: true,

                                          horizontalTextAlignment: "center",

                                          verticalTextAlignment: "far"

                                      }

                                  },

                                  dataSource: ForeignKeyData[i].ChartData,

                                  xName: "Period",

                                  yName: "Orders",

                                  type: "column"

                              }],

                          legend: { visible: false },

                          primaryYAxis:

                          {

                              rangePadding: "round",

                              startFromZero: true

                          },

                      });

                  }

              }

          }

[Farveen Sulthana Thameeztheen Basha]

Hi Paul,

Greetings from Syncfusion Support.

From your query we suspect that (on performing Sort action for other columns Template column has been disappeared). To overcome this we suggest to render Template on ActionComplete event when requestType as Sorting or any other data operations.

Code below:-

<ej:Grid ID="gridAppointments" runat="server" AllowTextWrap="true" AllowSorting="true" AllowPaging="true">

                 <ClientSideEvents DataBound="dataBound" ActionComplete="complete"  />

                            <ej:Column Field="EmployeeID" Template="#columnTemplate"   HeaderText="Chart" ForeignKeyField="EmployeeID"

                                ForeignKeyValue="FirstName" TextAlign="Left" Width="90" />    

                                 .    .    .

                          

                            

                        </Columns>

                    </ej:Grid>

 

     function complete(args) {

              if (args.requestType == "paging" || args.requestType == "sorting") {   //use condition based on requestType

                  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>

     <script type="text/x-jsrender" id="columnTemplate">

            <div id="container{{:EmployeeID}}"  style="width: 200px; height: 200px;" />

      </script>

 

If we misunderstood your query or your requirement is different above please share more details to proceed further.

Regards,

Farveen sulthana T

[Paul Garland]

Hi Farveen,

Although that does keep the charts from disappearing, it does not keep the right chart with the right row. How do I include that column in the sort, so that when I sort by another column, the chart is the one represented by the current row?

Before sort and After Sort – Charts do not change.

After sort by customer:

Charts are not moving with their row.

Paul

[Pon Selva Jeganathan]

Paul,

Query:  How do I include that column in the sort, so that when I sort by another column, the chart is the one represented by the current row?

We were able to replicate the issue at our end when the chart data is not set properly after sorting. To resolve this, we suggest you set chart data properly after sorting in the actionComplete event of the grid.

Please refer to the below code example for more details:

         script type="text/javascript">

  …

 

   function complete(args) {

}

       }

       if (args.requestType == "sorting") {

           var rows = args.model.currentViewData;

           var ForeignKeyData = this.model.columns[2].dataSource;

 

           

           for (var i = 0; i < rows.length; i++) {

               //here we filter the data using foriegnkey field value

               var chart_data = ForeignKeyData.filter(x => x.EmployeeID == rows[i].EmployeeID) 

               $("#container" + rows[i].EmployeeID).ejChart({

                   series:

                       [{

                           dataSource: chart_data[0].ChartData,

                           xName: "Month",

                           yName: "Salary",

                           type: "line"

                       }],

                 

               });

           }

       }

   }

 

</script>    

 

Please refer to the below screenshot,

Before sorting:

After sorting:

Please refer to the below sample,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample895059327

Regards,

Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly

[Paul Garland]

That did it! Thanks for your help.

[Suganya Gopinath]

Paul, 

We are glad that the provided solution helped to solve the issue. Please get back to us for further assistance. 

We are marking this ticket as solved. 

Regards,

Suganya Gopinath.