4 issues with the grid
9 Replies
Hi Amos,
Sorry for the late reply
Query 1 : Header text alignment
For the above query we have prepared a sample and we also faced the same issue at our end. So, please confirm with the below screenshot and confirm this is the issue that you faced at your end.
Screenshot :
Query 2 : Double clicking the edge of a header auto size
Based on your query we understand that you have facing difficulties on autofit the column when we double click the column right border. So, we have prepared a sample but we are not able to reproduce the reported issue at our end. Please refer the below Video Demonstration for your reference.
Query 3 : Freezecols and horizontal scrollbar:
For the above query we have prepared a sample but we are unable to reproduce the issue at our end. For your convenience we have attached the sample and please find the sample from the below link
Query 4 : color the value of aggregate
Based on your query, you want to color the multiple aggregate value in the grid’s footer. So, we have prepared the sample and customize the aggregate value. Please refer the below Sample and Screenshot for your reference,
Screenshot :
Regards
Vignesh Sivagnanam
Hi Amos,
Please find the response for your queries below,
Query: “Yes, this is exactly it.”
Thanks for the update.
We validated this case further and would like to let you know that since the center alignment is calculated from the start till the filter icon position, the header text position appears to be moved to the left.
Since your requirement is to align the header text center without considering the filter icon, you can achieve the same by applying the following styles to the Grid’s header div element,
|
<style>
.e-headercelldiv {
padding: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
</style> |
Please find the sample prepared based on this for your reference below,
Query: “Vertical scrollbar not displayed with frozen columns when using certain css styles”
We checked this case with your provided code snippet but still could not reproduce it from our end. Please check the below updated sample for your reference,
We suspect you might be facing the problem due to cached memory in the browser which could be restoring the old settings. So please clear the browse cache, run the above sample and ensure if this case is working fine. Also try opening it in other browsers.
If problem still persists please share us the following details to validate further on this,
- Browser and its version in which you were able to reproduce the problem.
- Video demonstration of the problem.
- Syncfusion package version used.
- If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample.
Query: “I need the custom aggregation to either have a unique identifier or the custom aggregators to somehow loop all custom aggregators instead of "catching" only the first one.”
Based on this query we could understand that your requirement is to differentiate/loop through all the custom aggregates element which we suspect you are accessing by defining custom class through the footerTemplate function. The steps for achieving the same are explained below,
By differentiating, we suspect you need to access the corresponding column information for the aggregate cell. If so you can achieve it by passing the unique column id that is set as the aggregate ‘td’ element’s ‘e-mappinguid’ to the Grid’s getColumnByUid method as shown in the below image,
You can also loop through all the custom-aggregate elements, check condition for them and apply styles by retrieving all the elements using JavaScript’s “querySelectorAll” method as demonstrated in the below code snippet,
|
// Grid’s dataBound event handler
onDataBound: function (args) {
// This event will be triggered each time the grid data is modified, so flag variable is used so that this case is executed only on Grid initial render
if (this.initialFlag) {
var gridObj = this.$refs.grid.ej2Instances;
// All the custom aggregate elements are retrieved with its class name using ‘querySelectorAll’
var customAgg = gridObj.aggregateModule.footerRenderer.contentTable.querySelectorAll(".custom-aggregates");
var i = 0;
// The custom aggregate value is compared and custom CSS is added based on that
while (i < customAgg.length) {
var Val = parseInt(customAgg[i].innerText);
if (Val > 10) {
customAgg[i].classList.add("custom-css");
} else {
customAgg[i].classList.add("customize-css");
}
i++;
}
this.initialFlag = false;
}
} |
Please find the below updated sample prepared based on this for your reference,
More details on this can be checked in the below documentation link,
Let us know if you have any concerns.
Regards,
Sujith R
Hi Amos,
Please find the response for your queries below,
Query: “Yes, this is exactly it.”
Thanks for the update.
We validated this case further and would like to let you know that since the center alignment is calculated from the start till the filter icon position, the header text position appears to be moved to the left.
Since your requirement is to align the header text center without considering the filter icon, you can achieve the same by applying the following styles to the Grid’s header div element,
|
<style>
.e-headercelldiv {
padding: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
</style> |
Please find the sample prepared based on this for your reference below,
Query: “Vertical scrollbar not displayed with frozen columns when using certain css styles”
We checked this case with your provided code snippet but still could not reproduce it from our end. Please check the below updated sample for your reference,
We suspect you might be facing the problem due to cached memory in the browser which could be restoring the old settings. So please clear the browse cache, run the above sample and ensure if this case is working fine. Also try opening it in other browsers.
If problem still persists please share us the following details to validate further on this,
- Browser and its version in which you were able to reproduce the problem.
- Video demonstration of the problem.
- Syncfusion package version used.
- If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample.
Query: “I need the custom aggregation to either have a unique identifier or the custom aggregators to somehow loop all custom aggregators instead of "catching" only the first one.”
Based on this query we could understand that your requirement is to differentiate/loop through all the custom aggregates element which we suspect you are accessing by defining custom class through the footerTemplate function. The steps for achieving the same are explained below,
By differentiating, we suspect you need to access the corresponding column information for the aggregate cell. If so you can achieve it by passing the unique column id that is set as the aggregate ‘td’ element’s ‘e-mappinguid’ to the Grid’s getColumnByUid method as shown in the below image,
You can also loop through all the custom-aggregate elements, check condition for them and apply styles by retrieving all the elements using JavaScript’s “querySelectorAll” method as demonstrated in the below code snippet,
|
// Grid’s dataBound event handler
onDataBound: function (args) {
// This event will be triggered each time the grid data is modified, so flag variable is used so that this case is executed only on Grid initial render
if (this.initialFlag) {
var gridObj = this.$refs.grid.ej2Instances;
// All the custom aggregate elements are retrieved with its class name using ‘querySelectorAll’
var customAgg = gridObj.aggregateModule.footerRenderer.contentTable.querySelectorAll(".custom-aggregates");
var i = 0;
// The custom aggregate value is compared and custom CSS is added based on that
while (i < customAgg.length) {
var Val = parseInt(customAgg[i].innerText);
if (Val > 10) {
customAgg[i].classList.add("custom-css");
} else {
customAgg[i].classList.add("customize-css");
}
i++;
}
this.initialFlag = false;
}
} |
Please find the below updated sample prepared based on this for your reference,
More details on this can be checked in the below documentation link,
Let us know if you have any concerns.
Regards,
Sujith R
SIGN IN To post a reply.
