How to modify user's input?

7 posts, 0 answers
  1. Robert
    Robert avatar
    41 posts
    Member since:
    Aug 2015

    Posted 13 Dec 2016 Link to this post

    Hi,

    We have a grid, which has 2 columns, "Name" "Age". if user enters the Age as negative, then it will convert to positive all the time. eg, -32 to 32

     

    In the grid event we have "event save" to trigger it to make positive value all the time by using Math.abs(Age). We can see the datasource has updated value, also after refresh() everything look good inside the "save" method, once it is out of the "save", the value gets rollback to the user's input as = -32 again. it seems like kendo has methods which puts it back. How can I get round it? 

     

    This happens only when we try to modify user's input in the same field. There is no problem if user change their name column, and we code to change age to positive

     

    I set a breakpoint after "$("#NameAgeGrid").data("kendoGrid").refresh();" in the following code, and everything looks good. once I continue, it went to kendo's code "set: function (field, value) " and "set: function (field, value, initiator)" and then the value gets put back

     

    thanks!

    in cshtml:
     
    .Events(e => e.Save("NameAgeGrid_onSave"))
     
    in JS:

    if ("Age" in e.values && e.values.Age != "") {
              e.model.set("Age", Math.abs(e.values.Age));
                     
            e.model.Age = Math.abs(e.values.Age);
                     
            var datarow = $("#NameAgeGrid").data("kendoGrid").dataSource.getByUid(e.model.uid);
            datarow.Age = Math.abs(e.values.Age);
                      
            $("#Age").val(Math.abs(e.values.Age)).change();
     
            $("#NameAgeGrid").data("kendoGrid").refresh();
                }
  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1153 posts

    Posted 15 Dec 2016 Link to this post

    Hi,

    Is the age field not a number? Have you tried using a numeric text box as editor? If the editor is a numeric by setting a min and max values you should be able to resolve the problem automatically without including custom logic.

    Please share with us the view code so we could examine the implementation and further advice you. Additionally please elaborate on the Age field type.

    Regards,
    Angel Petrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Robert
    Robert avatar
    41 posts
    Member since:
    Aug 2015

    Posted 15 Dec 2016 in reply to Angel Petrov Link to this post

    Thank you Angel,

    The Age field is not numeric which is a free text field.

    For example, if the item's age is before year 0, then they can enter like "-200y 3m" or "BC 200y 3m" or "AD -200y 3m", we have a regex to handle all the check and convert the value to the standard format. For example, if the user enters "BC 200y 3m" it will convert and display as"-200y 3m" after the user hits enter key or blur out the textbox inside the grid.

    Thank you

     

     

  4. Robert
    Robert avatar
    41 posts
    Member since:
    Aug 2015

    Posted 15 Dec 2016 in reply to Robert Link to this post

    Therefore,  the original question just tries to simplify the situation and remove all the additional regex and other methods. sorry perhaps, I made it too simple in the original question.

     

  5. Angel Petrov
    Admin
    Angel Petrov avatar
    1153 posts

    Posted 19 Dec 2016 Link to this post

    Hi,

    Thank you for providing the additional info. I would suggest subscribing to the Age field editor's blur event and altering its value according to your requirements. That way it should get changed before saving and there will be no need for additional logic in the save event.

    If the provided suggestion does not resolve the matter please share with us the view code so we could examine the setup and provide an alternative solution.

    Regards,
    Angel Petrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Robert
    Robert avatar
    41 posts
    Member since:
    Aug 2015

    Posted 19 Dec 2016 in reply to Angel Petrov Link to this post

    it seems like the textbox is generated dynamically by the Kendo. It seems like I should use clienttemplate to add onblur='xxx'?

    thanks.

     

     

  7. Angel Petrov
    Admin
    Angel Petrov avatar
    1153 posts

    Posted 21 Dec 2016 Link to this post

    Hi Robert,

    The client template is visible when the row is not in edit mode. In order to have more control over the editor I suggest creating a custom editor as shown in this demo.

    Regards,
    Angel Petrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top