Replace displayed value in Edit Mode

3 posts, 1 answers
  1. daniel.ostheimer
    daniel.ostheimer avatar
    2 posts
    Member since:
    Oct 2019

    Posted 26 Feb 2020 Link to this post

    Hey guys,

    I have a simple telerik grid in my asp.net core app which basically consists of two columns:"Activity", "Share of total". 

    "Share of total" is the only (inCell) editable column and consists of percentage values between 0 and 100. 

    Now I have the following problem, which I haven't been able to solve yet: 

    If not in edit mode, the cells of the "Share of total" should display "0"-Values just normal. But when entering edit-mode, I want those zeros to not be displayed in the input-field. Instead it should just be empty, so that new values can easily be entered.

    Especially in internet explorer, the cursor is positioned in front of the zero, which leads to entering for example 20 instead of 2, which is quite annoying for quick inputs.

    Do you have a solution for that?

    Best regards

  2. daniel.ostheimer
    daniel.ostheimer avatar
    2 posts
    Member since:
    Oct 2019

    Posted 26 Feb 2020 Link to this post

    As I wasn't able to find an edit button for my first post here in this forum, I am now using the reply for a short addition.

    The ideal case for my problem would be, if the whole value in the input-field in edit mode would be selected after entering edit mode.

    This would be great, as it wouldn't overwrite zeros and would delete the previous value when entering new numbers.

  3. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 28 Feb 2020 Link to this post

    Hello, Daniel,

    You can use the Edit() event handler of the Kendo UI Grid and select the input when it is available. Since IE is a much slower than other browsers, you might need to increase the timeout value. 

    .Events(e=>e.Edit("onEdit"))
    
    <script>
     function onEdit(e){
      var container = e.container;
          setTimeout(function(){
            container.find("input").select();
          },100);
     }
    </script>

    Here is a runnable Dojo for your reference: https://dojo.telerik.com/OFeKipEx

    Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top