JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › datePicker error in grid

Tagged: 

Viewing 15 posts - 1 through 15 (of 25 total)
1 2
  • Author
    Posts
  • February 28, 2022 at 4:21 pm #102901
    tullio0106@live.it
    Participant

    I create a column in my grid using datePicker as editor :

    { label: ‘Campo data 1’, dataField: ‘C6’, editor: ‘dateTimePicker’, cellsFormat: ‘dd/MM/yyyy’},

    When I try to modify the field and I choose a new date I get a javascript error :

    Uncaught TypeError : t.repace is not a function

    The initial value was 01/06/1954 and I see it correctly but when I click on it to modify it becomes 6 january 1954 (wrong respect to the format).

    Did I forget something? Is it a bug ?

    Tks

    Tullio

     

    February 28, 2022 at 7:14 pm #102908
    admin
    Keymaster

    Hi,

    The editor should be set like that:

          {
                    label: 'Order Date', width: 250, dataField: 'date', cellsFormat: 'dd-MM-yyyy', editor: {
                        template: 'dateTimePicker',
                        formatString: 'dd-MM-yyyy',
                        onInit(index, dataField, editor) {
                        }
                    }
                },

    Best regards,
    Peter Stoev

    Smart UI Team
    https://www.htmlelements.com/

    March 1, 2022 at 9:05 am #102911
    tullio0106@live.it
    Participant

    It seems a little better but I still have some problems :

    When I try to introduce data it switches to an english like representation, forgetting the format dd/MM/yyyy and goes to MM/dd/yyyy (also the calendar interprets data in english style).

    If, during edit I press the Tab key it goes into error : t.replace is not a function.

    Randomly double clicking on the field (I didn’t understand when) it divides the field in 3 parts (with some vertical line) and then it goes into the same error.

    Tks

    March 1, 2022 at 10:33 am #102914
    tullio0106@live.it
    Participant

    As a further information my PC language setting is italian.

    As well for the server (same machine).

    Tks

    March 1, 2022 at 11:29 am #102915
    tullio0106@live.it
    Participant

    The topic is reproduced by an example.

    How can I upload it to you ?

    Tks

    March 1, 2022 at 12:03 pm #102917
    admin
    Keymaster

    Hi,

    You can share an example with a link to codepen. From the provided information, I think that the column with datepicker is not a ‘date’ column, but is a ‘string’ column.

    Best regards,
    Peter Stoev

    Smart UI Team
    https://www.htmlelements.com/

    March 1, 2022 at 1:32 pm #102921
    tullio0106@live.it
    Participant

    Here the codpen link : https://codepen.io/tullio0106/pen/JjOebye

     

    This is the beverage.json data I used

    [{
    “C1”: “1”,
    “C2”: “Hot Chocolate”,
    “C4”: “SEAVISION”,
    “C6”: “01/06/1954”,
    “C5”: “true”,
    “C3”: “14g”
    }]

    Tks

     

    P.S. : is the same of the other post

    March 7, 2022 at 10:15 am #102932
    tullio0106@live.it
    Participant

    Nobody can help about this topic ?

    Tks

    March 7, 2022 at 12:03 pm #102936
    admin
    Keymaster

    Hi,

    Unfortunately, the provided example is not working. There is no Grid on it.

    Best regards,
    Peter Stoev

    Smart UI Team
    https://www.htmlelements.com/

    March 7, 2022 at 12:09 pm #102937
    tullio0106@live.it
    Participant

    May be you looked to a wrong codpen address

    This is the html content

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Grid Cell Editing Confirm Dialog 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" />
    <link rel="stylesheet" type="text/css" href="../../../source/styles/smart.default.css" />
    <link rel="stylesheet" type="text/css" href="../../../styles/demos.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script src="../../../../common/data.js"></script>
    </head>
    <body class="viewport">
    <div class="demo-description">
    <h1>Grid Cells Editing Confirm Tullio</h1>
    We implement the 'onCellUpdate' Grid function. When a cell value is edited, 'onCellUpdate' is called. That callback can be used for Client-Server validation of the Cell Editing. The function is implemented for the 'Quantity' column and we simulate Ajax call to a Web Server by using setTimeout and
    confirm the changes by calling the 4th argument of 'onCellUpdate', which is a function. When we call it with 'true', changes are confirmed. Otherwise, they are canceled. In this example, when the 'Quantity' is > 10, changes are confirmed.
    </div>
    <smart-grid id="grid"></smart-grid>

    <!-- scripts -->
    <script src="../../../common/data.js"></script>
    <script type="module" src="../../../source/modules/smart.grid.js">
    </script>
    <script type="module" src="../../../source/modules/smart.button.js">
    </script>
    <script type="module" src="index.js">
    </script>
    </body>
    </html>

    and the grid is there.

    Tks

    March 7, 2022 at 4:57 pm #102941
    admin
    Keymaster

    Hi,

    The issue in the provided code is that the Grid’s binding is to a json which does not reflect to the columns definitions. For example, you have a column like label: ‘Campo testo 2’, dataField: ‘C2’, but your data source does not have a ‘C2’ key.

    Best regards,
    Peter Stoev

    Smart UI Team
    https://www.htmlelements.com/

    March 8, 2022 at 8:40 am #102943
    tullio0106@live.it
    Participant

    Sorry but I don’t understand.

    the provided data are :

    [{
    “C1”: “1”,
    “C2”: “Hot Chocolate”,
    “C4”: “SEAVISION”,
    “C6”: “01/06/1954”,
    “C5”: “true”,
    “C3”: “14g”
    }]

     

    where C2 field is included as well as C6 (the date) in the european format dd/MM/yyyy, as stated by definition.

    What’s wrong ?

    Tks

    March 24, 2022 at 3:42 pm #102991
    tullio0106@live.it
    Participant

    No further help ?

    March 24, 2022 at 3:49 pm #102993
    admin
    Keymaster

    Hi,

    This issue should have been already resolved in the latest version.

    Best regards,
    Peter Stoev

    Smart UI Team
    https://www.htmlelements.com/

    March 25, 2022 at 3:42 pm #102994
    tullio0106@live.it
    Participant

    Unfortunately it doesn’t seem to be solved.

    I still set the date format to dd/MM/yyyy  and set the value to 01/06/1954 (I mean first of june) but it’s represented as 06/01/1954 (six of january) and when the date picker opens it’s still on 6 january.

    Tks

     

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 25 total)
1 2
  • You must be logged in to reply to this topic.