Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #102621
    Giovanni Zomer

    I have form elements create dynamically with javascript;
    one of this input types is a dropdown with the following structure

    objElement={ dataField:arrDetail[0], controlType:’dropdownlist’, label:arrDetail[2], controlOptions: {dataSource: objDropDownElements} };

    the elements themselves have the following structure

    objDropDownElements.push({label:arrDetailDropDown[1], value:arrDetailDropDown[0] });

    I see everything correctly on the screen, I can choose one of the dropdownoptions, and – in the background – javascript says

    smart.elements.js:27 Uncaught TypeError: Cannot read properties of null (reading ‘value’)
    at t._getControlValue (smart.elements.js:27)
    at smart.elements.js:27
    _getControlValue @ smart.elements.js:27
    (anonymous) @ smart.elements.js:27
    setTimeout (async)
    onChange @ smart.elements.js:27
    dispatchEvent @ smart.elements.js:6

    I have now included the main smart.elements.js, instead of the single little parts, but it still got this error;
    when I submit the form, each field is correctly passed with name and value, apart from this dropdownfield passed with


    in the html-code I actually see the correct field name in “form-control-name”

    <div form-control-name=”Tipologia” class=”smart-form-control smart-touched smart-dirty smart-valid”><smart-drop-down-list drop-down-append-to=”body” editor=”dropdownlist” name=”Tipologia” id=”Tipologia” class=”smart-form-editor smart-element smart-drop-down-list smart-drop-down-box” drop-down-button-position=”right” type=”list” aria-owns=”listBox39d0″ tabindex=”0″ role=”button” aria-haspopup=”listbox” aria-describedby=”TipologiaHint” aria-labelledby=”TipologiaActionButton” aria-expanded=”false” selected-indexes=”[3]” selected-values=”[&quot;179&quot;]”><div role=”presentation” smart-id=”container” class=”smart-container”>
    <span class=”smart-label” smart-id=”label” id=”TipologiaLabel”></span>
    <div class=”smart-content” role=”presentation” smart-id=”content”>
    <div class=”smart-buttons-container” role=”presentation” smart-id=”buttonsContainer”>
    <span class=”smart-action-button” smart-id=”actionButton” id=”TipologiaActionButton”><span class=”smart-token”>News</span></span>
    <span class=”smart-drop-down-button” smart-id=”dropDownButton” bottom=”” aria-hidden=”true” role=”presentation”>
    <span class=”smart-drop-down-button-icon” aria-hidden=”true” smart-id=”arrow”></span>

    <span class=”smart-hint smart-hidden” smart-id=”hint” id=”TipologiaHint”></span>
    </div><div class=”smart-resize-trigger-container” aria-hidden=”true”><div class=”smart-resize-trigger-container”><div class=”smart-resize-trigger” style=”width: 100000px; height: 100000px;”></div></div><div class=”smart-resize-trigger-container”><div class=”smart-resize-trigger-shrink”></div></div></div></smart-drop-down-list><div><span class=”smart-grid-icon smart-form-control-icon smart-icon-help-circled show smart-visibility-hidden” tooltip=””></span></div></div>

    where am I going wrong?



    Hi Giovanni,

    Could you please, provide a codepen or stackblitz sample which demonstrates the issue which you tried to describe? We could not much understand from the description what the problem basically is. Please, make sure that the latest version is used.

    Thanks in advance.

    Best regards,
    Peter Stoev

    Smart UI Team

    Giovanni Zomer

    hi, Peter!
    I downloaded now the latest version (yesterday’s version: I had the one before);
    I got the same error;
    I now extracted only the part of the code interested to create a stand-alone test, which you’ll find here below;
    as I don’t see the global smart.elements.js anymore, I took the single parts to include;
    the javascript error raises in the moment one clicks on one of the values on the dropdownlist;
    I’m probably doing something wrong, but the few examples I found about it didn’t help me to get the solutions;
    thanks in advance for checking it out!


    <!DOCTYPE html>
    <html xmlns=”http://www.w3.org/1999/xhtml”&gt;
    <script type=”text/javascript” src=”smart.element.js”></script>
    <script type=”text/javascript” src=”smart.validator.js”></script>
    <script type=”text/javascript” src=”smart.listbox.js”></script>
    <script type=”text/javascript” src=”smart.scrollbar.js”></script>
    <script type=”text/javascript” src=”smart.dropdownlist.js”></script>
    <script type=”text/javascript” src=”smart.form.js”></script>
    <link rel=”stylesheet” type=”text/css” href=”smart.default.css” />
    <form id=’EDIT’></form>

    <script language=javascript>
    var objFormElements=[];
    objFormElements.push({ dataField:”test-string”, controlType:’template’, label:”this is a string”, template:'<input type=text size=10 maxlength=20>’ });

    var objDropDownElements=[];
    objDropDownElements.push({label:”lbl1″, value:”10″});
    objDropDownElements.push({label:”lbl2″, value:”20″});
    objDropDownElements.push({label:”lbl3″, value:”30″});

    objFormElements.push({ dataField:”test-list”, controlType:’dropdownlist’, label:”this is a list”, controlOptions: {dataSource: objDropDownElements} });

    objFormElements.push({ dataField:”test-string-2″, controlType:’template’, label:”this is a string2″, template:'<input type=text size=10 maxlength=20>’ });
    objFormElements.push({ label:’send via post’, controlType:’submit’ });

    var objForm=new Smart.Form(‘#EDIT’,{ controls: objFormElements });





    Same problem here 🙁 Dropdown on “change” doesn’t get the values with next JS error:

    smart.elements.js:27 Uncaught TypeError: Cannot read properties of null (reading ‘value’)
    at t._getControlValue (smart.elements.js:27)


    The code is:

    const template = [{
    controlType: “input”,
    dataField: “tbtusername”,
    label: null,
    placeholder: config_app.t.tbtusername,
    cssClass: “underlined”,
    append: “<i class=’fas fa-user’></i>”
    }, {
    controlType: “password”,
    dataField: “tbtpassword”,
    label: null,
    placeholder: config_app.t.tbtpassword,
    cssClass: “underlined”,
    append: “<i class=’fas fa-key’></i>”
    }, {
    dataField: “systemtheme”,
    controlType: “dropdownlist”,
    label: config_app.t.theme,
    cssClass: “underlined”,
    append: “<i class=’fas fa-palette’></i>”,
    controlOptions: {
    filterable: false,
    selectionMode: “one”,
    displayMember: “theme”,
    valueMember: “theme”,
    placeholder: config_app.t.select_option,
    dataSource: [1,2,3,4,5]
    }, {
    controlType: “boolean”,
    dataField: “tbtremember”,
    label: config_app.t.tbtremember
    }, {
    controlType: “group”,
    columns: 2,
    controls: [{
    controlType: “button”,
    action: “submit”,
    label: config_app.t.submit,
    cssClass: “primary”,
    align: “right”
    }, {
    controlType: “button”,
    action: “reset”,
    label: config_app.t.reset,
    align: “left”
    const form = new Smart.Form(“#form_login”, {
    label: config_app.t.sysname + “<i class=’fas fa-chart-bar fa-lg’ style=’margin-left:15px;’></i>”,
    labelAlign: “left”,
    showSummary: false,
    showColonAfterLabel: true,
    controls: template
    form.value = {
    “tbtusername”: “”,
    “tbtpassword”: “”,
    “systemtheme”: 4,
    “tbtremember”: false

    • This reply was modified 2 years, 6 months ago by olegr.
    Yavor Dashev

    Hi olegr,

    I can confirm the reported behavior form you and its definitely a issue and I have added a work item for this use case.

    However as a workaround if you want to get the value of the SmartDropDown component you can do by using the following code snippet:

        const dropdownlist = document.querySelector('.smart-drop-down-list');
        dropdownlist.addEventListener('change', (event) => {
            let dropdowValue = event.detail.value;

    Let me know if this suits you!

    Please, do not hesitate to contact us if you have any additional questions.

    Best regards,
    Yavor Dashev

    Smart UI Team

    Yavor Dashev

    Hi olegr,

    Apologies for the wrong reply from my side.

    I now tested it with version 11.0 of SmartUI and works without the mentioned issues.(previosly I tested it with v10)

    If you update to the v11 of SmartUI this behavior will be resolved.

    Please, do not hesitate to contact us if you have any additional questions.

    Best regards,
    Yavor Dashev

    Smart UI Team

    Giovanni Zomer

    I confirm that the actual version 11.0.0 hasn’t this error anymore; I downloaded it just now;
    the version downloaded of Dec 1st, which reports exactly the same name, but a different dimension (the zip file of Dec 1st 56.908K, today’s 59.060 K), still had this error;
    both versions had been downloaded from <span lang=”BG”>http://www.jqwidgets.com/clientportal</span>
    glad that it was solved now! thanks!

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.