Hi
I have a problem retrieving the datasource for a cell in a dxPivotGrid in VB.NET. You are supposed to use the methods getDataSource() and CreateDrillDownDataSource(e). Can someone point me in the right direction?
Private Sub DxPivotGrid1_WidgetEvent(sender As Object, e As WidgetEventArgs) Handles DxPivotGrid1.WidgetEvent
Select Case e.Type
Case "cellClick"
If e.Data.area = "data" Then
' VB.Net code to get the drill-down datasource:
?
' Below is a working Javascript code from onCellClick in dxPivotGrid
' ...
' Var pivotGridDataSource = e.component.getDataSource(),
' drillDownDataSource = pivotGridDataSource.createDrillDownDataSource(e.cell);
End If
End Select
End Sub
.dx-datagrid selects an element with the class “dx-datagrid”:
<div class="dx-datagrid"></div>
But #dx-datagrid selects an element with the id “dx-datagrid”:
<div id="dx-datagrid"></div>
If you run the sample and press F12 to open the Developer Tools, then look at the DOM (Click on the “Elements” tab), you can see that Wisej uses ID extensively- lots of divs with ids like “id_1”, “id_2”, etc.
When the Developer Tools are open, If you do ctrl+F and search for “dx-datagrid” you can see an element with the class “dx-datagrid” in the DOM. (See screenshot.) This is the element that we find by doing $("".dx-datagrid"").
Note that the element that we want does NOT have the id “dx-datagrid”, in fact there is no element with that ID in the DOM! So that is why $(""#dx-datagrid"") does not work.
I highly recommend using F12/Developer tools when debugging widgets. Here I just used it to look at the DOM, but you can also look at the javascript code that is being run and even set breakpoints! It’s very useful.
Hello,
You’ll need to use a Widget Function, not a Widget Event.
See https://docs.wisej.com/extensions/premium-extensions/overview#methods for documentation on WidgetFunctions.
Your WidgetFunction should have the following javascript code:
widgetFunction.Source = @"
if(e.area === ""data"") {
// Drill-down: Fetch and show data related to the clicked cell
var drillDownDataSource = e.component.getDataSource().createDrillDownDataSource(e.cell);
$("".dx-datagrid"").dxDataGrid({
dataSource: drillDownDataSource,
columns: e.component.getDataSource().fields()
});
alert('hello');
}
";
See attached C# sample for the full implementation.
Hi ,
Enclosed is a small testproject.
Thanks,
/Per
Hi Per,
Please wrap up a sample for us to check, ideally it should include all the WidgetEvents, WidgetFunctions and any JavaScript you have.
Best regards,
Alaa
Please login first to submit.