We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

                          },

                      });

                  }

              }

          }


5 Replies 1 reply marked as answer

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team February 6, 2023 03:09 PM UTC

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



PG Paul Garland February 6, 2023 11:31 PM UTC

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.BeforeSort.jpg



After sort by customer:


Charts are not moving with their row.

Paul



PS Pon Selva Jeganathan Syncfusion Team February 9, 2023 03:49 PM UTC

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 = 0i < rows.lengthi++) {

               //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





Marked as answer

PG Paul Garland February 9, 2023 05:26 PM UTC

That did it! Thanks for your help.



SG Suganya Gopinath Syncfusion Team February 10, 2023 06:05 AM UTC

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.


Loader.
Live Chat Icon For mobile
Up arrow icon