editor with multiple inputs bound to list

[Luis]

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?

 

[Boyan Dimitrov]

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

 

 

[Danny]

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

 

[Danny]

Also, I'm trying to avoid a popup editor.

[Danny]

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

[Boyan Dimitrov]

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