LogoLogo
WinForms to WebPowerBuilder to .NETPowerBuilder to Java
  • WebMAP Documentation | Mobilize.Net
  • WinForms
    • Introduction
    • Getting Started
    • Conversion Process
    • Post-Conversion
    • Extend or Modify the Converted Application
      • NoWebMap Forms Winforms
        • How to add a new Form
        • Adding the created form to the migrated App
        • Interacting with the application data
        • Call the custom API
        • Interaction between the no webmap added Form and the WebMap components
      • Adding a component
      • Adding a component dynamically
      • Add a new control model
      • Switching CSS theme
      • Adding new window
      • Conversion Configuration
        • WebMAP configuration file
        • Stub Filter
      • Adding Non-WebMap Angular Forms
      • Adding FrontEnd Handler to a ToolStripMenuItem
      • Changing ToolStripButton icons
      • Adding new items to existing toolbar
      • Adding FrontEnd element properties and JS listeners
      • Adding FrontEnd output handlers
      • Access FrontEnd components
      • Create custom components based on existing WebMap Component
      • Override FrontEnd methods
    • Assessment Mode
    • Errors and Troubleshooting
      • How to resolve broken reference problems with VBUC
    • Portability
    • Glossary
    • Release Notes
    • Internal Demos
    • Known Issues
    • WinForms DCP
  • WebForms
    • Introduction
    • Overview
    • Desktop Compatibility Platform (DCP)
      • Pages and Master Pages
      • GridView and DataList data synchronization
      • HTTP objects
    • Post-Conversion
    • Extend or Modify the Converted Application
      • Adding FrontEnd validator
      • Adding Page
      • Adding MasterPage
    • Designer classes on WebForms Conversion Tool
    • Errors and Troubleshooting
      • How fix Solution when have been added website from filesystem without project file
    • Release Notes
  • PowerBuilder to .Net
    • Introduction
    • Getting Started
      • Conversion Tool
    • Desktop Compatibility Platform (DCP)
      • Data Manager
    • Reports
      • Report Rendering in Modernized Code
      • ReportWatcher Service Configuration
      • Data Manager to RDL Conversion
      • Reporting Service Internals
      • Troubleshooting
  • PowerBuilder to Java
    • Introduction
    • Getting started
    • Post-Conversion
      • Setup PBJava Environment
      • Architecture
      • App Start
    • Glossary
    • Errors
    • Glossary
    • FAQ
      • How to create a new Control
      • How to create a new Screen
      • What is the Mobilize.WebMAP.CoreServices.All?
      • What is the DesignerAttribute?
      • What is the InterceptedAttribute?
      • What is the InterceptedAttribute?
      • What is the ObservableAttribute?
      • What is the Mobilize.Weaving.WebMAPExtensions.All?
  • General
    • FrontEnd
      • Documentation
        • Webforms Angular Components
          • Web Components
            • Base Components
              • BaseValidator Component
            • KendoUI Components
              • CompareValidator
              • CustomValidator
              • RegularExpressionValidator
              • RequiredFieldValidator
              • ValidationSummary
          • Directives
          • AJAX Web Components
            • AjaxCalendar
            • AjaxModalPopupExtender
          • Ajax Interaction Services
        • Client Core
          • WebMap's Client Core
        • Angular Client
          • Introduction
          • WebMap Service
          • WebMap Interceptor Service
        • Base Components
          • Introduction
          • Components
            • Container
            • Control
            • ControlContainer
            • FormsContainer
            • Loading
            • Stub
        • Winforms Angular Components
          • Web Components
            • Base Components
              • Control Component
              • Form Container
              • Grid Component
              • Style
            • KendoUI Components
              • AdoDataControl
              • Button
              • C1TrueDBGrid
              • CheckBox
              • CheckedListBox
              • ComboBox
              • ContextMenuStrip
              • DataGridView
              • DataGridViewFlex
              • DateTimePicker
              • FileDialog
              • GroupBox
              • Label
              • ListBox
              • ListView
              • MaskedTextBox
              • MessageBox
              • NumericUpDown
              • Panel
              • PictureBox
              • PrintDialog
              • ProgressBar
              • RadioButton
              • RichTextBox
              • StatusStrip
              • Stup
              • TabControl
              • TabPage
              • TextBox
              • Timer
              • ToolStrip
              • TreeView
              • WebBrowser
              • Window
            • JQuery Web Components
          • WebMap FrontEnd Architecture
          • Migrated Structure
          • Setup
            • Front-End setup and compilation
            • Components Manual
            • Browser Support
            • Unit Test Manual
            • Development Process
            • Setup AOT/JIT Compilation
          • Decorators
            • Server Event
          • Conventions
            • Application Structure and NgModules
            • Coding
            • Components
            • Data Service
            • Directives
            • Lifecycle hooks
            • Names
            • Services
        • PowerBuilder Kendo Components
          • Base Components
            • base-component
            • column-control
            • controlcontainer
          • Data Manager Componets
            • base-data-manager
            • data-manager-control
            • data-manager-control-base
            • dw-checkbox
            • dw-column
            • dw-complexNumericMaskComponent
            • dw-compute
            • dw-date-time-edit-mask
            • dw-dropdowndatawindow
            • dw-edit
            • dw-edit-mask
            • dw-radio-button
            • dw-simple-numeric-edit-mask
            • dw-string-edit-mask
            • dw-time-edit-mask
          • Window Components
            • basemask
            • graphics
            • w-checkbox
            • w-command-button
            • w-complex-numeric-mask
            • w-date-time-edit-mask
            • w-dropdownlistbox
            • w-group-box
            • w-line
            • w-listbox
            • w-maskedtextbox
            • w-mdiclient
            • w-menu
            • w-multiline
            • w-picture
            • w-picture
            • w-radiobutton
            • w-rectangle
            • w-simple-numeric-edit-mask
            • w-single-line-edit
            • w-statictext
            • w-string-edit-mask
            • w-time-edit-mask
            • w-toolbar
            • w-toolbaritem
            • w-user-object
            • w-window
          • Services
            • DmInteractionService
          • DataManagerEvents
          • FocusManager guide
      • Api Documentation
        • WebMap Silverlight
        • WfNetC1Components
        • WebFormsComponents
      • Guides
        • Setup NPM package registry in the workspace
        • How to Setup WebMap Applications To Run Over SubDomains or WebApplications In IIS
        • Deploy several WebMap Apps in the same Server
        • Update to Angular 16
        • Appearance
          • How to change the CSS
          • How to override the style for a component
        • Component maintenance
          • How link WebMap package to the migrated Application
          • How to resolve broken reference problems with VBUC
          • How to test a local WebMap Components package
          • How to add a new component in a migrated application
          • How to update a component
          • Dynamic Control Support
          • How to add new set of component with a different provider
          • How to test your component in the playground
          • Tools
        • WMLogger
          • How to use the WMLogger's instance
          • How to change log's level
          • How to add log tags
        • Integration test
        • Setup WebMap Applications to Run Front-End And Back-End In Separates Sites
          • Setup WebMap Applications To Run Front-End And Back-End In Separates Sites in Production (IIS)
        • Setup Migrated WebMap Applications To Run Front-end & Back-end In Separates Sites (Only development)
        • Initial Set Up
          • Software to Install
          • Necessary Repositories
      • Errors
      • Version Notes
        • Client Core
        • Angular Client
        • Web Base Components
        • Winforms Angular Components
        • PowerBuilder Kendo Components
      • Licenses
        • Client Core
        • Angular Client
        • Base Components
        • PB Kendo Components
        • WFNet Kendo Components
        • WebForms Components
        • WFNet Access Components
        • WFNet Janus Components
        • WFNet C1 Components
        • Silverlight wms-framework
        • Silverlight i-components
    • BackEnd
      • WebMAP From Scratch
      • Setup
      • DCP: Desktop Compatibly Platform
        • Overview
        • Library Bundles
          • Bundle Library
            • Create an Observable Object
          • Bundle DTO
            • DTO: Data Transfer Objects
              • Creating a DTO
            • Mappers
              • Create Mappers
            • Observable Wrappers
              • Create an Observable Wrapper
            • API/Controllers
      • Architecture
      • Weaving on WebMAP
      • Glossary
      • FAQ
        • How to create a new Control
        • How to create a new Screen
        • What is the Mobilize.WebMAP.CoreServices.All?
        • What is the DesignerAttribute?
        • What is the InterceptedAttribute?
        • What is the Mobilize.Extensions.Logging.RollingFile?
        • What is the ObservableAttribute?
        • What is the Mobilize.Weaving.WebMAPExtensions.All?
      • Licenses
        • PBNet DCP
        • WebFormsDCP
        • WFNet DCP
        • CoreServices
        • CoreServicesCommon
    • Request and Response
  • SCALABILITY
    • Introduction
    • Microservices
    • Containerizing a WebMap .Net Application with Docker
    • Vertical scalability
Powered by GitBook
On this page
  • Grid View back-end and front-end synchronization
  • Grid View and controls models
  • Web API controller calls
  • DataList back-end and front-end synchronization
  • DataList model and Controls
  • GetControlsId Web API controller call

Was this helpful?

  1. WebForms
  2. Desktop Compatibility Platform (DCP)

GridView and DataList data synchronization

Grid View back-end and front-end synchronization

For a Grid View control to be able to be displayed in the front-end side of the application its content and data needs to be synchronized between the front-end and the back-end of the application. To accomplish this, there are two key components that serve as communicators between the application's server and the client's browser. Those components are the following:

  • Grid View and controls models.

  • Web API controller calls.

Grid View and controls models

The Grid View model is a data representation of the basic information that is needed to render its respective component in the front-end application, it mainly contains the visual structure of the control such as visibility, position, page size. This model also contains its events and the associated references to its controls model id.

Here we can see an example of a Grid View model:

{
            "AllowPaging": true,
            "AllowSorting": true,
            "AutoGenerateColumns": false,
            "AutoGenerateSelectButton": false,
            "HeaderStyle": {
                "HorizontalAlign": 2,
                "CssClass": "GridHeader"
            },
            "PageSize": 10,
            "SelectedIndex": -1,
            "GridLines": 2,
            "Attributes": {},
            "CssClass": "Grid",
            "AutoSize": false,
            "Controls": {
                "3d61bad3-ec06-4aaa-9579-e0bd2b88b89d": true,
                "78a7057c-7164-4c5e-b4c9-50dab41db9e8": true,
                "08ac587f-89ce-4321-be08-bb81b8bcb54c": true,
                "c0b33875-e6f6-4973-9f69-da7cf4728df9": true,
            },
            "Enabled": true,
            "EventChanges": {
                "Sorting": true,
                "PageIndexChanging": true
            },
            "Focused": false,
            "Name": "grdDeals",
            "Parent": "a91ed5a6-f71a-45bc-873b-192082098c64",
            "Refresh": true,
            "Style": {},
            "ShowTooltip": false,
            "TabIndex": 0,
            "TabStop": true,
            "Text": "",
            "Visible": true,
            "ZIndexRefresh": false,
            "Id": "1571c471-dbd0-479f-aff8-1e192158bfd3",
            "MapperId": "grdvw",
            "References": {}
        },

But this is necessary to load API calls to be explained in the following section. It's important to mention if we only load the grid and its controls, we'll the rendered control should be empty as you can see here:

Web API controller calls

Once the GridView's basic properties sent via model are synchronized, the data for the Grid View is retrieved by API calls, each one with one single responsibility. The GridView model has a Refresh flag used to flag is used to notify the front-end some changes in the data set to be requested by this mechanism.

GetColumns API

This API is in charge of loading the information of column’s information in order to display them as required, it contains an array with the column’s representation including properties such as the style, the header text, sort expression, data text field, it also includes events information related events related to this column and in an object apart, we can see the caption and the name for this column, each column will be represented as we can see here:

"Cols": [
{
            "ContainingField": {
                "HeaderStyle": {
                    "BorderStyle": "None",
                    "HorizontalAlign": "NotSet",
                },
                "HeaderText": "Record No",
                "Name": null,
                "ItemStyle": {
                    "BorderStyle": "None",
                    "HorizontalAlign": "NotSet",
                },
                "SortExpression": "RecordNumber",
                "Visible": true,
                "Id": "3d1f0272-361f-4c8a-8382-f4df538108e4",
                "DataNavigateUrlFields": [
                    "DealId"
                ],
                "DataTextField": "RecordNumber",
                "Text": null,
                "EventChanges": {
                    "NavigateToPage": true
                }
            }
        },
        {
            "caption": "Record No",
            "name": "Record No"
        },
]

GetIndexPage API

This API call receives as argument the index of the page that is going to be shown and returns the representation of the rows that will be displayed in the grid. It contains the length of the rows, the styles in case there is some style for any row set and the rows array with the data based on the columns explained on GetColumns API but basically composed by the column name and the column value, also we can see the DataControlFields array inside which is the info to set the different controls that could be into the grid like HyperLinkField in case that we need to show a link in this cell.

{
    "Rows": [
        {
            "RowId": "dfa8923b-9a2d-40a3-85c4-ed9f57ac72a3",
            "Record No": "3054",
            "Client Name": "clientname-test",
            "Client Code": "12345",
            "DataControlFields": [
                {
                    "Text": "3054",
                    "ContainingFieldType": "HyperLinkField",
                    "Controls": {}
                },
                {
                    "Text": "clientname-test",
                    "ContainingFieldType": "BoundField",
                    "Controls": {}
                },
                {
                    "Text": "12345",
                    "ContainingFieldType": "BoundField",
                    "Controls": {}
                }
            ]
        }
    ],
    "Styles": [],
    "Length": 1
}

GetRangedPage API

Finally, this API should send to front-end the information with the data of the rows that are selected to be displayed on visual representation given the arguments required. Those arguments are only skip and take. The structure is very simple and has the same representation of GetIndexPage API, as you can see is only the list of rows, the style, and the length of the rows array. Is important to mention that this API is mainly used to load the GridView data when the virtual scroll feature is turned on.

{
    "Rows": [
{
            "RowId": "dfa8923b-9a2d-40a3-85c4-ed9f57ac72a3",
            "Record No": "3054",
            "Client Name": "clientname-test",
            "Client Code": "12345",
            "DataControlFields": [
                {
                    "Text": "3054",
                    "ContainingFieldType": "HyperLinkField",
                    "Controls": {}
                },
                {
                    "Text": "clientname-test",
                    "ContainingFieldType": "BoundField",
                    "Controls": {}
                },
                {
                    "Text": "12345",
                    "ContainingFieldType": "BoundField",
                    "Controls": {}
                }
            ]
        }
],
    "Styles": [],
    "Length": 0
}

After the API calls, the grid shows the information and the row page completely full as you can see in the following image

DataList back-end and front-end synchronization

The DataList control is used to display a template data bound list, this control can be manipulated by using templates. In a similar manner as the Grid View control reviewed before this control sends by model its principal properties, however, in this case, we only handle a single Web API controller call.

DataList model and Controls

The DataList model is a data representation of the basic information that is needed to render its respective component in the front-end application. It mainly contains the visual structure of the control like visibility, position, page size.

Here we can see an example of a Grid View model

{
            "ItemStyle": {
                "CssClass": "DataListItem"
            },
            "AlternatingItemStyle": {
                "CssClass": "DataListAlternatingItem"
            },
            "Attributes": {},
            "AutoSize": false,
            "Enabled": true,
            "EventChanges": {
                "ItemCommand": true
            },
            "Focused": false,
            "Name": "dataList",
            "Parent": "e6d3c88c-86b4-4da4-924c-767355d46d72",
            "Refresh": true,
            "Style": {},
            "ShowTooltip": false,
            "TabIndex": 0,
            "TabStop": true,
            "Text": "",
            "Visible": true,
            "ZIndexRefresh": false,
            "Id": "a695c8a1-d796-4b44-919a-6a3371b045ec",
            "MapperId": "dtlst",
            "References": {}
        },

Same as the GridView, just with the model is not enough to see the correct behavior of this control, we need to charge the data as we will do in the next section, but here we can see only with the model info:

GetControlsId Web API controller call

In order to set some controls to the DataList in frontend is required to invoke this Web API call, it only contains objects composed by an array of key/value elements where the key is the control’s name and the value is the unique id or MobilizeId for this control for every row in shown, with this information front-end link this control with this DataList, as we can see here this an example for a response of this API call:

[
    {
        "hidID": "4486bd0c-cc2a-4246-bf4c-8cc9a832db06",
        "hidIsNew": "d547d7ab-e182-4539-b1a7-a6d0d837e997",
        "txtCounterpartyName": "ee4ea4fe-f400-407d-a88e-87123c83b5dd"
    },
    {
        "hidID": "9523215c-bc8c-4533-87ea-23b43d2f2871",
        "hidIsNew": "ec2da901-6a49-468f-a215-828fba3e85b8",
        "txtCounterpartyName": "7b03d932-bff2-40f9-8efc-e69e478b48e7"
    }
]

Now with this information loaded we are able to see the correct presentation of the DataList as we show bellow:

PreviousPages and Master PagesNextHTTP objects

Last updated 2 years ago

Was this helpful?