[Data Grid Reactive] Data Grid Reactive - GridFrameworkJS
Forge component by OutSystems R&D
Application Type
Reactive

Dear Team

You have created a great component, however, we have a requirement for expanding a row to show some detail on every row level. This is what I have done so far:

  1. I went to wijmo official website and found they have a feature for row details.
  2. You can find it here.
  3. As in the documentation, we need the initialized flex grid and the JSON object for properties of the detailed row.
  4. I have got the grid using the GridAPI.GridManager.GetActiveGrid()._provider.
  5. I have also included the file wijmo.grid.detail.min.js 
  6. When I run the following code on the console
    var test = new wijmo.grid.detail.FlexGridDetailProvider(GridAPI.GridManager.GetActiveGrid()._provider , {
    isAnimated: false,
    createDetailCell: function (row) {
    const cell = document.createElement('div');
    cell.innerHTML = '<span> Testing .... </span>';
    return cell;
    },
        });
  7. This works fine and we can see added + signs on the UI like

Following are my questions on the same:

  1. On clicking on the + sign the error is thrown by GridFrameworkJS due to an inconsistent map for the row.
  2. Why have we written the GridFramworkJS? 
  3. What is the purpose of the objects that it creates GridAPI, OSFramework, WjimoProvider?
  4. Is there another approach that can be taken for implementing row-level details as an expanded section?

I am fairly new to such kind of definition of objects using self-invoking functions that is the reason for these questions. I would appreciate it if you can help me have a clearer understanding on this.

Thanks

Ashish 


Hey Ashish,


Could you please send us your sample, so we can have a better understanding of what's going on?

Hey Gabriel

Thank you for your reply, following is the OAP attached. 

You may open the DataGridUI module and run the ExpandableGrid screen, once the screen loads click on the Make Grid Expandable button and the + signs will be added to all rows. Clicking on the + sign on the row level the JS error is produced in the console.

Thanks again for your help!

Regards

Ashish

DataGridReactive.oap

Hi Ashish,

Sorry for bringing you bad news. Our team has been analyzing your request and tried to create a workaround for you. However, since you added new code to our implementation, we can't provide you with a solution that ensures FlexGridDetail works properly with the rest of our solution. Despite that, our team will take note of your request, so that it can prioritize it in the future.
Hope that you manage to achieve what you need for your project.

Regards,
Gabriel

Hey Gabriel

It's always great to have a response. Thank you for that. Just for my curiosity and the pursuit to be a better developer, it would be great if you could provide answers to the following questions, if possible.

  1. Why have we written the GridFramworkJS? 
  2. What is the purpose of the objects that it creates GridAPI, OSFramework, WjimoProvider?

It might also help me find a way out of this.

Sincere Regards

Ashish

Hey Ashish,

The whole purpose of GridFrameworkJS is to create an easier way for everyone to achieve things with our DataGrid. Even though wijmo is a great library, it is not low-code friendly. So we structured our code to make it easier for everyone to use the Grid.

The GridAPI is a layer that mediates communication between the DataGrid component and our JS code.
The OSFramework is another layer, that maps our OS code in our JS code. WijmoProvider is where we call wijmo to handle things on the grid.


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.