Hi Hassan,
We have prepared a sample based on this scenario, please download the sample from the link below,
References :
Please find the suggestions for the queries below,
Query 1 : 1.I need to show "details grid template" for current selected row only
We can achieve this requirement by using Microsoft JSInterop. In the above sample, we have invoked the ExpandCollapseDetailRowAsync method of Grid in DetailDataBound event handler. By checking for target and args.data, we will be calling this method. Also, we have used DataBound handler to pass the dotnetreference to JS. By using this dotnetreference, we will be making call from JS to C#, during collapse action in Grid. This C# method will empty the target, when collapse action performed in Grid.
Please refer the codes below,
<GridEvents DetailDataBound="DetailDataBound" DataBound="DataBound" TValue="EmployeeData"></GridEvents>
public bool firstrender { get; set; } = true;public async Task DataBound(){ if (firstrender) { var dotNetReference = DotNetObjectReference.Create(this); // create dotnet ref await Runtime.InvokeAsync<string>("detail", dotNetReference); // send the dotnet ref to JS side firstrender = false; }}public async Task DetailDataBound(DetailDataBoundEventArgs<EmployeeData> args){ if (target != null) { if (target == args.Data) // return when target is equal to args.data { return; } await Grid.ExpandCollapseDetailRowAsync(target); } target = args.Data;} [JSInvokable("DetailCollapse")] // method called from JS when collapse is donepublic void DetailRowCollapse(){ target = null; // empty the target when collapse action is done }
public async Task RecordClickHandler(RecordClickEventArgs<EmployeeData> args)
{
await Grid.ExpandCollapseDetailRowAsync(args.RowData);
}
[detailexpand.js]
var dotnetInstance;
function detail(dotnet) {
dotnetInstance = dotnet; // dotnet instance to invoke C# method from JS
}
document.addEventListener('click', function (args) {
if (args.target.classList.contains("e-dtdiagonaldown") || args.target.classList.contains("e-detailrowexpand")) {
dotnetInstance.invokeMethodAsync('DetailCollapse'); // call C# method from javascript function
}
})
|
Query 2 : How to hide arrow icon.
We suggest you to apply the below style to achieve this requirement.
|
<style>
.e-grid .e-detailrowcollapse .e-icons.e-dtdiagonalright.e-icon-grightarrow {
display: none;
}
.e-grid .e-detailrowexpand .e-icons.e-dtdiagonaldown.e-icon-gdownarrow{
display: none;
}
...
</style>
|
Query 3 : Detail background color and main selected row should be same (light grey).
We suggest you to apply the below style to achieve this requirement.
|
<style>
...
.e-grid .e-detailcell,
.e-grid .e-detailindentcell,
.e-detailcell .e-grid .e-headercontent .e-headercell,
.e-detailcell .e-grid .e-gridcontent .e-rowcell{
background: #e6e6e6;
}
...
</style>
|
Query 4 : the left padding of detail grid and main grid row should be same
We suggest you to apply the below style to achieve this requirement.
|
<style>
...
.e-grid .e-detail-intent{
width:0 !important;
}
</style>
|
Please get back to us if you need further assistance.
Regards,
Renjith R
