This is a migrated thread and some comments may be shown as answers.

Restore the last input value

9 Answers 227 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Alexandru - Paul
Top achievements
Rank 1
Alexandru - Paul asked on 12 Jul 2019, 07:02 AM

Hi,

There is something similar like undo button or revert button which can restore the last value from an input field, something similar like undo from kendo editor? 

I'v seen an example here:https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/diagram/how-to/modify-undo-redo-stack.

Best regards,

Alex

9 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 15 Jul 2019, 02:26 PM
Hello Alex,

Thank you for contacting us. Could you please provide some details, do you have a specific widget in mind when referencing such undo / revert button? Even if the widget does not provide such functionality out-of-the-box, it may be still possible to provide it with some custom code (for example, add an undo button of your own, and use the .value() method of input-type widgets to re-set the original value from the model that you can store somewhere so you can revert to it).

I am looking forward to your reply.

Regards,
Martin
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Alexandru - Paul
Top achievements
Rank 1
answered on 02 Dec 2019, 11:22 AM

Hello Martin,

Thank you for the answer and I am deeply sorry for my late reply.

I did something similar that you suggested me and here is it. 

<body>
        <form>
            <input id="lastname">
            <button type="button" id="aiResetButton">
                Reset
            </button>
        </form>
        <script>

            $(document).ready(
                function() {
                    var oldValue = [' '];
                    var counter = 1;
                    $('#lastname').kendoButton().change(function() {
                        if (counter === 0) {
                            oldValue[counter] = '';
                        } else {
                            oldValue[counter] = this.value;
                        }
                        console.log('Old value became: ' + oldValue[counter]);
                        counter++;

                    });
                    $('#aiResetButton').click(
                        function() {
                            if (counter == 0) {
                                // disable here the button                                
                            }
                            console.log('Current value is:---->'
                                        + $('#lastname').val() + '<----changing to ->'
                                        + oldValue[counter - 1]);
                            $('#lastname').val(oldValue[counter - 1]);
                            counter--;
                        }); 
                });
        </script>
    </body>

0
Martin
Telerik team
answered on 04 Dec 2019, 09:05 AM

Hello Alexandru,

Thank you for the provided code. I created a small Dojo example based on it. Is the functionality demonstrated in it the desired result? As far as I understand, you wish to save the last value of the input field, and restore it when you click a button. Having that said, could you please provide some information why are you initializing a KendoButton from an input element? 

Could you also provide some information about the scenario? Are you using any of the Kendo input-type widgets (like the Autocomplete, Dropdownlist, etc)? If that is the case, please explain the functionality you wish to achieve and I will be happy to assist you. Feel free to modify the example if necessary.

Regards,
Martin
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Alexandru - Paul
Top achievements
Rank 1
answered on 04 Dec 2019, 09:35 AM

Hello Martin,

Thank you for replying. I got a mistake on javaScript code which I sent to you. I shouldn't initializing kendoButton on input element. It should be a normal kendo textbox. 

I modified my mistake.

$(document).ready(
        function() {
          var oldValue = [' '];
          var counter = 1;
          $('#lastname').kendoAutoComplete().change(function() {
            if (counter === 0) {
              oldValue[counter] = '';
            } else {
              oldValue[counter] = this.value;
            }
            console.log('Old value became: ' + oldValue[counter]);
            counter++;

          });
          $('#aiResetButton').kendoButton().click(
            function() {
              if (counter == 0) {
                // disable here the button                                
              }
              console.log('Current value is:---->'
                          + $('#lastname').val() + '<----changing to ->'
                          + oldValue[counter - 1]);
              $('#lastname').val(oldValue[counter - 1]);
              counter--;
            }); 
        });

I am using at the moment kendo textbox. To be precise I create a PHP class for that, but I found no specific class for textbox so I borrow masked textbox.

Now my problem is I have no clue at the moment to use the reset button for one or more dropdownlist. 

0
Petar
Telerik team
answered on 06 Dec 2019, 09:29 AM

Hi Alexandru - Paul,

This Dojo example demonstrates how we can reset the value of the AutoComplete component with the previously selected item. To achieve the desired functionality the AutoComplete's change event is used. The code that stores the previous element data and that is executed on the mentioned change event is:

if(prevValue.length==0){
           prevValue[0] = autocomplete.data("kendoAutoComplete").value();
           prevValue[1] = autocomplete.data("kendoAutoComplete").value();
   }
           prevValue[0] = prevValue[1];
           prevValue[1] = autocomplete.data("kendoAutoComplete").value();
													$("#prevValueHolder").text(prevValue[0]);

Please check the linked Dojo and let me know if the provided solution resolves your issue or if you need further assistance with the current case.

Regards,
Petar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Alexandru - Paul
Top achievements
Rank 1
answered on 09 Apr 2020, 07:15 PM

Hi Petar,

Thank you for replying and I am deeply sorry for my late answer.

I took your example and I tried to make for input textbox.

Also I want to disable or enable reset button which depends of length of value.

Dojo example

I have a question. Is that possible to have multiple fields such as (dropdown, inputs) using your example?

Thank you!

Regards,

Alexandru-Paul

 

0
Petar
Telerik team
answered on 13 Apr 2020, 12:16 PM

Hi Alexandru-Paul,

There is no need to excuse for the timing of the reply.

The way the Button component is used in the provided Dojo example is not the correct one. Using code like this one:

var resetButton = $("#resetButton").kendoButton({
         enable: true
}).data("kendoButton");

initializes anew Button component with each execution. The proper way is to define the above definition once, initialize a button and after that use the enable method of the component.  

Here is an edited version of the Dojo you sent me that demonstrates how we can enable/disable a button using the mentioned method. Based on the logic you want to implement, you can use the demonstrated approach to enable/disable the button.

Regarding your question "Is that possible to have multiple fields such as (dropdown, inputs) using your example?" I am not sure what you want to achieve. Can you give more details about the targeted functionality? 

Looking forward to your reply.

Regards,
Petar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Alexandru - Paul
Top achievements
Rank 1
answered on 13 Apr 2020, 06:06 PM

Hi Petar,

Thank you for your replying and also for sharing me the way the button component is used.

Regarding my question about multiple inputs and dropdownlist, I would like to be able to reset the value for each individual field.

I thought of adding an oldvalue for each input and dropdown so I could store the value for each field.

Dojo example

Thank you!

Regards, 

Alexandru-Paul

 

0
Petar
Telerik team
answered on 15 Apr 2020, 02:38 PM

 Hi Alexandru-Paul,

You can use the approach from the Dojo projects I've provided in my previous replies and store the previous values of each form item in separate variables that will be then loaded back in the inputs. 

In the Dojo you've sent me, to prevent the form submission when the "Reset" button is pressed, we have to define the type of the button element. This can be done using the following code:

<button id="reset" type="button" class="k-button" onclick="onClick()">Reset</button>

If you add the marked in yellow code, the form won't be submitted when the "Reset" is clicked. Then on click, you can load the store values back in the form inputs. Here is a Dojo demonstrating the usage of the above snippet. 

Regards,
Petar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
General Discussions
Asked by
Alexandru - Paul
Top achievements
Rank 1
Answers by
Martin
Telerik team
Alexandru - Paul
Top achievements
Rank 1
Petar
Telerik team
Share this question
or