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

editor with multiple inputs bound to list

5 Answers 255 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Luis
Top achievements
Rank 1
Luis asked on 06 Jul 2015, 08:58 PM

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?

 

5 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 08 Jul 2015, 02:47 PM

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!
 
0
Danny
Top achievements
Rank 1
answered on 01 Feb 2016, 03:07 AM

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

 

0
Danny
Top achievements
Rank 1
answered on 01 Feb 2016, 03:08 AM
Also, I'm trying to avoid a popup editor.
0
Danny
Top achievements
Rank 1
answered on 02 Feb 2016, 02:13 AM

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

0
Boyan Dimitrov
Telerik team
answered on 02 Feb 2016, 04:07 PM

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!
 
Tags
Editor
Asked by
Luis
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Danny
Top achievements
Rank 1
Share this question
or