editor with multiple inputs bound to list

6 posts, 0 answers
  1. Luis
    Luis avatar
    27 posts
    Member since:
    Jun 2014

    Posted 06 Jul 2015 Link to this post

    Hello all

    I have the following model

     

    public class MyModel
        {
            public MyModel()
            {
                SomeList = new List<string>();
            }
            public int ServiceId { get; set; }   

            [UIHint("ModifierListEditor")]
            public List<string>SomeList  { get; set; }
        }

     This has an editor bound to a list of string. I want the editor to consist of 4 kendo autocomplete elements. Each element will be an element of the list.

    How do I accomplish this?

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 08 Jul 2015 Link to this post

    Hello Luis,

     

    As far as I understand the you are using Kendo Grid widget trying to implement custom editor for the SomeList field of the model. 

     

    Could you please share the concept of using 4 kendo autocomplete widgets as editor for a field of the model? What kind of edit mode should be used and etc?

     

    Any additional information will be very helpful. 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Danny
    Danny avatar
    3 posts
    Member since:
    Nov 2015

    Posted 31 Jan in reply to Boyan Dimitrov Link to this post

    Hi all,

       I'm interested in having a multiple input editor for a cell. The requirement is to be able to set how many days, hours, minutes, and seconds a timer will be set for. Note this is not setting a calendar event. Our first attempt was to append multiple inputs to the container in the editor function which displayed OK but did not work functionally. The issue is the editor does not behave like a unified editor. i.e. when a change occurs for one of the inputs, the editing stops and you can't continue editing another input. Ideally I'd like to be able to change each input then when you leave the cell it changes.

    Multiple inputs script: 

    var editor = (container:any, options:any) => {

    var days = options.field == "CycleTime" ? options.model.CycleTimeDays : options.model.StopTimeDays;
    var hours = options.field == "CycleTime" ? options.model.CycleTimeHours : options.model.StopTimeHours;
    var mins = options.field == "CycleTime" ? options.model.CycleTimeMinutes : options.model.StopTimeMinutes;
    var secs = options.field == "CycleTime" ? options.model.CycleTimeSeconds : options.model.StopTimeSeconds;
    $('<input name="days' + options.field + '" id="days' + options.field + '" style="width:25%" onchange="'+onChangeFunc()+ '" />')
    .appendTo(container)
    .kendoNumericTextBox({
    step: 1,
    spinners: false,
    min: days.Minimum,
    max: days.Maximum,
    });
    $('<input name="hours' + options.field + '" id="hours' + options.field + '" style="width:25%"/>')
    .appendTo(container)
    .kendoNumericTextBox({
    step: 1,
    spinners: false,
    min: hours.Minimum,
    max: hours.Maximum,
    });
    $('<input name="mins' + options.field + '" id="mins' + options.field + '" style="width:25%"/>')
    .appendTo(container)
    .kendoNumericTextBox({
    step: 1,
    spinners: false,
    min: mins.Minimum,
    max: mins.Maximum,
    });
    $('<input name="secs' + options.field + '" id="secs' + options.field + '" style="width:25%"/>')
    .appendTo(container)
    .kendoNumericTextBox({
    step: 1,
    spinners: false,
    min: secs.Minimum,
    max: secs.Maximum,
    });
    $("#" + options.field).kendoTooltip({
    autoHide: true,
    position: "bottom",
    //filter: filter,
    width: 200,
    content: "Hook up soon"
    }).data("kendoTooltip");
    }
    return editor;
    }

    Using this approach I tried overriding the individual inputs change event but had no success

     

    Another option would be to have another grid within the cell as the cell editor. This would make the cell editing back to one input editor per cell.

     Any help appreciated,

    Dan

     

  5. Danny
    Danny avatar
    3 posts
    Member since:
    Nov 2015

    Posted 31 Jan in reply to Danny Link to this post

    Also, I'm trying to avoid a popup editor.
  6. Danny
    Danny avatar
    3 posts
    Member since:
    Nov 2015

    Posted 01 Feb in reply to Danny Link to this post

    I've investigated using the MaskedTextBox to provide the same functionality without 4 inputs and it looks to provide a solution to the problem. 

    Any foreseeable issues using this approach? I see that pressing enter does not fire the change event, which we have to do manually. Anything else?

     

    Cheers,

    Dan

  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 02 Feb Link to this post

    Hello Danny,

     

    Actually using a single input/widget as an editor is our recommended approach. I made a sample example of using a Kendo UI MaskedTextBox as custom editor and the change event is fired properly. 

     

    Please refer to the http://dojo.telerik.com/esEQE example. 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready