DevExtreme + UniGui

FunnyBlue · March 14, 2018

https://js.devexpress.com/Overview/

How could we use DevExtreme widgets in our UniGui Apps?

Thanks for advance.

d.bernaert · March 14, 2018

This is really something I would be interested to.

Thx.

cdev · April 8, 2020

This is also something I am interested in.

I saw for example their example TextBox on their website : https://js.devexpress.com/Demos/WidgetsGallery/Demo/TextBox/Overview/jQuery/Light/

image.png.f61d0c054acebc8a3452b404699748f0.png
1. add the following in Uniserver.Customfiles:

https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
https://cdn3.devexpress.com/jslib/19.2.7/css/dx.common.css
https://cdn3.devexpress.com/jslib/19.2.7/css/dx.light.css
https://cdn3.devexpress.com/jslib/19.2.7/js/dx.all.js

2. Drop a THTMLFrame-component on your form and assign the following HTML-code to it: (exactly the same as explained on their website)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DevExtreme Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.7/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.7/css/dx.light.css" />
    <script src="https://cdn3.devexpress.com/jslib/19.2.7/js/dx.all.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="dx-viewport">
    <div class="demo-container">
        <div class="form">
            <div class="dx-fieldset">
                <div class="dx-field">
                    <div class="dx-field-label">Default mode</div>
                    <div class="dx-field-value">
                        <div id="simple"></div>
                    </div>
                </div>
                <div class="dx-field">
                    <div class="dx-field-label">With placeholder</div>
                    <div class="dx-field-value">
                        <div id="placeholder"></div>
                    </div>
                </div>
                <div class="dx-field">
                    <div class="dx-field-label">With clear button</div>
                    <div class="dx-field-value">
                        <div id="clear-button"></div>
                    </div>
                </div>
                <div class="dx-field">
                    <div class="dx-field-label">Password mode</div>
                    <div class="dx-field-value">
                        <div id="password"></div>
                    </div>
                </div>
                <div class="dx-field">
                    <div class="dx-field-label">Text mask</div>
                    <div class="dx-field-value">
                        <div id="mask"></div>
                    </div>
                </div>
                <div class="dx-field">
                    <div class="dx-field-label">Disabled</div>
                    <div class="dx-field-value">
                        <div id="disabled"></div>
                    </div>
                </div>
            </div>
            <div class="dx-fieldset">
            <div class="dx-fieldset-header">Events and API</div>
                <div class="dx-field">
                    <div class="dx-field-label">Full Name</div>
                    <div class="dx-field-value">
                        <div id="full-name"></div>
                    </div>
                </div>
                <div class="dx-field">
                    <div class="dx-field-label">Email (read only)</div>
                    <div class="dx-field-value">
                        <div id="email"></div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</body>
</html>

3. uniHTMLFrame.Afterscript : (index.js on their website) :

$(function(){
    $("#simple").dxTextBox({
        value: "John Smith"
    });

    $("#placeholder").dxTextBox({
        placeholder: "Enter full name here..."
    });

    $("#clear-button").dxTextBox({
        value: "John Smith",
        showClearButton: true
    });

    $("#password").dxTextBox({
        mode: "password",
        placeholder: "Enter password",
        showClearButton: true,
        value: "f5lzKs0T",
    });

    $("#mask").dxTextBox({
        mask: "+1 (X00) 000-0000",
        maskRules: {"X": /[02-9]/}
    });

    $("#disabled").dxTextBox({
        value: "John Smith",
        disabled: true
    });

    $("#full-name").dxTextBox({
        value: "Smith",
        showClearButton: true,
        placeholder: "Enter full name",
        valueChangeEvent: "keyup",
        onValueChanged: function(data) {
            emailEditor.option("value", data.value.replace(/\s/g, "").toLowerCase() + "@corp.com");
        }
    });

    var emailEditor = $("#email").dxTextBox({
        value: "smith@corp.com",
        readOnly: true,
        hoverStateEnabled: false
    }).data("dxTextBox");
});

This works like a charm.

My question: what about the databound widgets ? I would like to bind the more advanced widgets as Chart or Graph to a datasource (the Delphi way)

Please, can someone tell me how I could bind such a JS or JQuery widget to a TDatasource ?

Sign In

DevExtreme + UniGui

Recommended Posts

FunnyBlue

Link to comment

Share on other sites

d.bernaert

Link to comment

Share on other sites

cdev

Link to comment

Share on other sites

Join the conversation

Browse

Activity