{"id":22712242,"url":"https://github.com/rasheedaboud/feliz.syncfusion","last_synced_at":"2026-04-27T12:02:23.554Z","repository":{"id":130698205,"uuid":"462555235","full_name":"rasheedaboud/Feliz.Syncfusion","owner":"rasheedaboud","description":"Feliz Style Bindings for a handful of Syncfusion  Controls","archived":false,"fork":false,"pushed_at":"2024-01-19T00:39:22.000Z","size":330,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-14T10:21:17.607Z","etag":null,"topics":["fable","feliz","fsharp","react","syncfusion"],"latest_commit_sha":null,"homepage":"","language":"F#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rasheedaboud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-23T02:41:43.000Z","updated_at":"2024-01-19T00:37:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"507af906-71cc-46e3-bf42-4a79f4b5fc23","html_url":"https://github.com/rasheedaboud/Feliz.Syncfusion","commit_stats":null,"previous_names":["rasheedaboud/felize.syncfusion"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rasheedaboud%2FFeliz.Syncfusion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rasheedaboud%2FFeliz.Syncfusion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rasheedaboud%2FFeliz.Syncfusion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rasheedaboud%2FFeliz.Syncfusion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rasheedaboud","download_url":"https://codeload.github.com/rasheedaboud/Feliz.Syncfusion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246250089,"owners_count":20747293,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fable","feliz","fsharp","react","syncfusion"],"created_at":"2024-12-10T13:09:47.011Z","updated_at":"2026-04-27T12:02:18.532Z","avatar_url":"https://github.com/rasheedaboud.png","language":"F#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Feliz.Syncfusion \n\nA wrapper around a hanfull of Syncfusion React controls.\n\n- ListView\n- SideBar\n- AppBar\n- Grid\n- Modal\n- DatePicker\n- TextBox\n- NumericTextBox\n- Autocomplete\n- ProgressButton\n- FileUploader\n- Chip\n- DataManager\n- MenuBar\n- Button\n- SplitButton\n\n### Installation\n\n#### 1. Install the package\n\n```fs\n dotnet add package Felize.Syncfusion\n```\nor \n\n```fs\n dotnet paket add Felize.Syncfusion -p \u003cCLIENT  PROJECT\u003e\n```\n#### 2. NPM Packages\n\nBefore using any of these components, make sure you install the nessessary npm packages for example to use grid you will need the following:\n\n```fs\n  npm install @syncfusion/ej2-react-grids\n  npm install @syncfusion/ej2-base\n```\n\nAs an alternative use femto, below assumes youre using default SAFE template. Run following from client project folder:\n```fs\n dotnet tool install femto \n \n femto install Feliz.Syncfusion\n femto --resolve\n\n```\n#### 3. Styles\n\nYou will also need to load the styles, they offer bootstrap 4/5, material ui and fluent ui.\n\n```fs\nimportAll \"@syncfusion/ej2/\u003cstyle\u003e.css\";\n```\nOr as an alternative simply add cnd link to head of your index.html\n\n```html\n\u003chead\u003e\n \u003clink href=\"https://cdn.syncfusion.com/ej2/ej2-react-inputs/styles/\u003cstyle\u003e.css\" rel=\"stylesheet\" /\u003e\n\u003c/head\u003e\n```\n#### 4. Liscense\n\nThese controls are a commercial product and requires a paid license for possession or use. Syncfusion does offer a community license. more information can be found [here](https://www.syncfusion.com/sales/communitylicense).\n\nAdd the following line of code to Index.fs:\n\n```fs\n Feliz.Syncfusion.License.register(\"\u003cYOUR KEY HERE\u003e\")\n```\n\n\n### Examples\n\nIn order to access some of the functionality of these components you must use react userRef hook:\n\n```fs\n  let grid = React.useRef(None)\n  \n  let setGridRef =\n    (fun (element:Element) -\u003e\n      if not (isNull element) then\n        grid.current \u003c- Some (element :?\u003e Grid\u003c'a\u003e))\n  \n```\n You can then access grid methods, for example accessing the grids toolbar click event to export to excel.\n ```fs\n   let onToolBarButtonClicked =\n    fun (args:SfGridToolBar.ClickEventArgs) -\u003e\n      if args.item.id = \"ExcelExport\" then\n        export()\n```\n\nHere is how a grid would look:\n\n```fs\nmodule App\n\nopen Feliz\nopen SfGrid\n\nSfGrid.create [\n            prop.id id\n            prop.ref setGridRef\n            SfGrid.height \"100%\"\n            SfGrid.enableAdaptiveUI false\n            SfGrid.allowGrouping true\n            SfGrid.allowFiltering true\n            SfGrid.allowPaging true\n            SfGrid.allowSorting true\n            SfGrid.allowExcelExport true\n            SfGrid.dataSource state.Clients\n            SfGrid.showColumnChooser true\n            SfGrid.actionBegin (fun x-\u003e actionBegin x)\n            SfGrid.rowSelected (fun x -\u003e rowSelected x)\n            SfGrid.pageSettings PageSettingsModel.Default\n            SfGrid.editSettings EditSettingsModel.Default\n            SfGrid.filterSettings FilterSettingsModel.Default\n            SfGrid.selectionSettings SelectionSettingsModel.Default\n            SfGrid.toolbar [| SfGridToolBar.ItemModel {\n                                id=Add.value;\n                                text= \"Add\";\n                                disabled= false\n                                prefixIcon=Some \"e-add\";\n                                suffixIcon= None;\n                                visible=true;\n                                ``type``= Some SfGridToolBar.ItemType.Button\n                                click = onToolBarButtonClicked };\n                            |]\n            \n            prop.children [\n              columns.create [\n                prop.children [\n                  column.create [\n                    column.field \"ClientId\"\n                    column.headerText \"ClientId\"\n                    column.isKey true\n                    column.isIdentity true\n                    column.isVisible false\n                    column.width 200\n                  ]\n                  column.create [\n                    column.field (fun (s:Client) -\u003e nameof s.ClientName)\n                    column.headerText \"Name\"\n                    column.width 200\n                  ]\n                  column.create [\n                    column.field (fun (s:Client) -\u003e nameof s.Address)\n                    column.headerText \"Address\"\n                    column.width 200\n                  ]\n                  column.create [\n                    column.field (fun (s:Client) -\u003e nameof s.PhoneNumber)\n                    column.headerText \"Phone No.\"\n                    column.width 200\n                  ]\n                  column.create [\n                    column.field (fun (s:Client) -\u003e nameof s.Email)\n                    column.headerText \"Email\"\n                    column.width 200\n                  ]\n                  column.create [\n                    column.field (fun (s:Client) -\u003e nameof s.PurchaseOrderNumber)\n                    column.headerText \"PO No.\"\n                    column.width 200\n                  ]\n                ]\n              ]\n\n              inject.create [\n                inject.services [|\n                  Services.Page\n                  Services.Aggregate\n                  Services.Sort\n                  Services.Filter\n                  Services.Group\n                  Services.ColumnChooser\n                  Services.Edit\n                  Services.ToolBar\n                  Services.Resize\n                  Services.ExcelExport\n                  Services.DetailRow\n                |]\n              ]      \n            ]\n          ]\n        ]\n      ]\n    ]\n  ]\n```\n\n\n\nHere is how a modal would look:\n\n```fs\nmodule App\n\nopen Feliz\nopen SfModal\n\nSfModal.create [\n    prop.ref setModalRef\n    SfModal.position {X= Position.Offset Offset.Center; Y= Position.Number 70;}\n    SfModal.visible true\n    SfModal.height (length.percent 90)\n    SfModal.isModal true\n    SfModal.close (fun x -\u003e DisplayGrid |\u003e dispatch)\n    SfModal.width (length.percent 90)\n  ]\n```\nHere is how a text box would look:\n\n```fs\nmodule App\n\nopen Feliz\nopen SfNumericTextBox\n\nSfTextBox.create [\n    SfTextBox.placeholder \"Contract Number\"\n    SfTextBox.floatLabelType FloatLabelType.Always\n    SfTextBox.readonly false\n    SfTextBox.value \"\"\n    SfTextBox.change handleChange\n  ]\n```\nHere is how a numeric text box would look:\n\n```fs\nmodule App\n\nopen Feliz\nopen SfNumericTextBox\n\nSfNumericTextBox.create [\n    SfNumericTextBox.placeholder \"Hourly Rate\"\n    SfNumericTextBox.floatLabelType FloatLabelType.Always\n    SfNumericTextBox.strictMode true\n    SfNumericTextBox.min 0.01\n    SfNumericTextBox.max 1000.00\n    SfNumericTextBox.showSpinButton false\n    SfNumericTextBox.decimals 2\n    SfNumericTextBox.currency CurrencyCode.CAD\n    SfNumericTextBox.format \"C2\"\n    SfNumericTextBox.value (Values.Decimal hourlyRate)\n    SfNumericTextBox.blur handleChanged\n  ]\n```\nHere is how file uploader would look:\n\n```fs\nmodule App\n\nopen Feliz\nopen SfFileUploader\n\nFileUploader.create [\n   FileUploader.allowedExtensions \".pdf,.jpeg,.jpg,.svg\"\n   FileUploader.buttons { browse = Some \"Select File\"; clear=Some \"\"; upload = Some \"\" }\n   FileUploader.cssClass  \"some-css-class\"\n   FileUploader.maxFileSize  5_242_881\n   FileUploader.multiple false\n   FileUploader.selected (fun x -\u003e handleFileEvent x)\n ]\n```\nHere is how a date picker would look:\n\n```fs\nmodule App\n\nopen Feliz\nopen SfDatePicker\n\nSfDatePicker.create [\n SfDatePicker.floatLabelType FloatLabelType.Always\n SfDatePicker.placeholder \"Start Date\"\n SfDatePicker.format \"yyy-MM-dd\"\n SfDatePicker.showClearButton false\n SfDatePicker.value startDate\n SfDatePicker.change handleChanged\n SfDatePicker.strictMode true\n SfDatePicker.min (DateTime.UtcNow.AddDays(-365))\n SfDatePicker.max (DateTime.UtcNow.AddDays(365))\n SfDatePicker.cssClass \"some-css-class\"\n]\n```\nHere is example using Datamanager to populate data for a grid:\n\n```fs\nmodule App\n\nopen Feliz\nopen SfGrid\nopen SfDataManager\n\n    let options =\n       {| url = \"https://services.odata.org/V4/(S(50tkajnxavrtffka05w4ebbb))/TripPinServiceRW/People\"\n           adaptor = new OdataV4Adaptor() |}\n\n    let manager = new DataManager(options)\n\n\n    Html.div [\n        prop.children [\n            SfGrid.create [\n                prop.id (System.Guid.NewGuid().ToString())\n                SfGrid.dataSource manager\n                SfGrid.height \"100%\"\n                SfGrid.enableAdaptiveUI false\n                SfGrid.allowGrouping true\n                SfGrid.allowFiltering true\n                SfGrid.allowPaging true\n                SfGrid.allowSorting true\n                SfGrid.allowExcelExport true\n                SfGrid.showColumnChooser true\n                SfGrid.pageSettings PageSettingsModel.Default\n                SfGrid.editSettings EditSettingsModel.Default\n                SfGrid.filterSettings FilterSettingsModel.Default\n                SfGrid.selectionSettings SelectionSettingsModel.Default\n                prop.children [\n                    columns.create [\n                        prop.children [\n                            column.create [\n                                column.field \"UserName\"\n                                column.headerText \"User Name\"\n                                column.width 200\n                            ]\n                            column.create [\n                                column.field \"FirstName\"\n                                column.headerText \"First Name\"\n                                column.width 200\n                            ]\n                            column.create [\n                                column.field \"LastName\"\n                                column.headerText \"Last Name\"\n                                column.width 200\n                            ]\n                        ]\n                    ]\n                    inject.create [\n                        inject.services [|\n                          Services.Page\n                          Services.Aggregate\n                          Services.Sort\n                          Services.Filter\n                          Services.Group\n                          Services.ColumnChooser\n                          Services.Edit\n                          Services.ToolBar\n                          Services.Resize\n                          Services.ExcelExport\n                          Services.DetailRow\n                        |]\n                      ]  \n                ]\n            ]\n        ]\n    ]\n```\nWhich will render the following:\n\n![Grid](https://github.com/rasheedaboud/Feliz.Syncfusion/blob/cf0b44904760ed47cda7361a38941a2a43aae9ea/Felize.Syncfusion/grid.PNG)\n\n\n### Documentation\n\nSyncfusion documentation can be found [here](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start).\n\n### License\n\nThese controls are a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).\n\nA free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frasheedaboud%2Ffeliz.syncfusion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frasheedaboud%2Ffeliz.syncfusion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frasheedaboud%2Ffeliz.syncfusion/lists"}