hello all, is it possible in kuib builder 1.1 to have column with drop down list inside, which is populated with existing information from particular column. for example when i want to add new record or upgrade existing one, chosen column have to have option with dropdownlist which contains informaiton entered in same grid before that. but it should not lose option where client can enter new one, i just need to give it a try, pick from existing or enter new. something in that shape
Hello,
It looks like you are trying to use the column.values property and the columns.editor property at the same time.
(You are probably getting some errors in the JavaScript Console.)
You should use one approach or the another.
If you use the approach with columns.values, your code in onShow() would look like the following:
$scope.grid0.options.columns[3].values = [
{ text: "Massachussets", value: "NH" },
{ text: "New Hampshire", value: "MA" }
];
If you use the columns.editor approach, your code would look like the following:
$scope.grid0.options.columns[3].editor = function (container, options) {
// create an input element
var input = $("<input/>");
// set its name to the field to which the column is bound ('State' in this case)
input.attr("name", options.field);
input.appendTo(container);
input.kendoDropDownList({
dataTextField: "StateName",
dataValueField: "State",
dataSource: [
{ State: "NH", StateName: "New Hampshire" },
{ State: "MA", StateName: "Massachussets" }
]
});
};
Please notice that when using this approach, you would also need to set columns.template if you want to display the text for the associated value (StateName in this example). Otherwise, you would only see the text when entering edit mode.
You mention that SubContractor is an OpenEdge service.
In this case, your dataSource definition should look like the following:
dataSource: {
type: "jsdo",
transport: {
jsdo: "SubContractor"
}
}
(Here is a sample of the DataSource definition: oemobiledemo.progress.com/.../j.html.)
I hope this helps.
Hello,
Here are some suggestions to implement what you are asking. (I am assuming that you are using an editable grid in a view created with the Blank view option.)
You can implement the drop down list using the colums.values property of the grid:
demos.telerik.com/.../foreignkeycolumn
You would need to specify the columns.values property prior to the instantiation of the grid.
For example you can do the following in the onShow event of the view:
$scope.grid0.options.columns[3].values = [
{ text: "Text 1", value: "V1" },
{ text: "Text 2", value: "V2" }
];
This approach provides a drop down list and a way to associate a display text to key values.
Another approach is to use columns.editor property:
With the editor property you can specify a widget to input values.
The documentation provides an example using the AutoComplete control which would allow you to enter a value in addition to providing values from a list.
I also found the following thread in the Kendo UI forum:
www.telerik.com/.../autocomplete-in-grid-editor
Here is an example using a DropDownList::
demos.telerik.com/.../editing-custom
Please notice that you can create data sources programmatically for any resource defined in a loaded catalog.
I hope this helps.
thanks, i managed it, and have droped down list in column, my next interest, is it possible to bind 2 tables? i have table unit and table subcontractor, in unit i have column subCon where i wish to have dropdownlist which gaves me oprotunity to choose subcontractos from subcontractor table, subcontractor has a name and unic id, in unit i have to save only int from it, for example, Dropdownlist in unit, column subnum, dropdownlist shows Jon Doe 1, when i choose jon doe 1 it saves only 1 in units column, actual place of jon doe is in subcontractor table.
Hello,
Yes, you can bind the two tables as you described it.
The key is that the DropDownList is associated with the field in the first table (unit.subCon) but its definition uses the 2nd table, parent table of the foreign key (subcontractor), and specifies the name as the display field and subnum as the value field,
In addition to the example with the grid above, you can do this with a form.
Here is an example using a form (check the code in the view-factory.js):
oemobiledemo.progress.com/.../
github.com/.../GridWithFormJFP
Please let me know how it you have issues or if you need more information.
prtty hard to follow github example, where is country where is salesrep coud not find out. i tryed something like this, from docs page
this.scope.trunit.options.columns[2] = function dropDownList(container,options){
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Name",
dataValueField "SubNum",
dataSource:{
type; "json",
transport:{
read: "SubContractor"
}
}
});
}
but it did not worked, i have filling that i'm onright way, but missing something
Hello,
Yes, it seems that you are very close.
I am guessing that that your data (SubContractor) is exposed as an OpenEdge service.
In that case, the way that you would access it is by creating a DataSource of type jsdo.
Like in the following example:
oemobiledemo.progress.com/.../j.html
$("#salesPeople").kendoDropDownList({
filter: "startswith",
dataTextField: "RepName",
dataValueField: "SalesRep",
enable: true,
optionLabel: "Select",
dataSource: {
type: "jsdo",
transport: {
jsdo: "Salesrep"
}
}
});
});
In this example, the dataSource is defined inline.
An alternative is to define it as dataSource: <data-source-reference> and use a DataSource instance defined in the view.
I can look into providing a sample for you on this later when I have more time.
I hope this helps.
P.S.:
In sample, the country is defined using local data from an array and Salesrep is defined via Data Source instance.
You can see the local array at:
yes SubContractor is OE Service. i gave a try and entire colums has disappeared from Grid :)))
I will be happy to see the sample you are going to provide.
i'm trying to do something like this.
$scope.trunit.options.columns[2].values=[
{editor: SubDropDownEditor}
];
this is a column where i wish to have dropdowlist
and this is a function which have to gave me access to aother table from where i take value and text
function SubDropDownEditor(container, options) {
$('<input required data-text-field="Name" data-value-field="SubNum" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "json",
transport: {
read: "SubContractor"
}
}
});
what i'm doing wrong?
Hello,
It looks like you are trying to use the column.values property and the columns.editor property at the same time.
(You are probably getting some errors in the JavaScript Console.)
You should use one approach or the another.
If you use the approach with columns.values, your code in onShow() would look like the following:
$scope.grid0.options.columns[3].values = [
{ text: "Massachussets", value: "NH" },
{ text: "New Hampshire", value: "MA" }
];
If you use the columns.editor approach, your code would look like the following:
$scope.grid0.options.columns[3].editor = function (container, options) {
// create an input element
var input = $("<input/>");
// set its name to the field to which the column is bound ('State' in this case)
input.attr("name", options.field);
input.appendTo(container);
input.kendoDropDownList({
dataTextField: "StateName",
dataValueField: "State",
dataSource: [
{ State: "NH", StateName: "New Hampshire" },
{ State: "MA", StateName: "Massachussets" }
]
});
};
Please notice that when using this approach, you would also need to set columns.template if you want to display the text for the associated value (StateName in this example). Otherwise, you would only see the text when entering edit mode.
You mention that SubContractor is an OpenEdge service.
In this case, your dataSource definition should look like the following:
dataSource: {
type: "jsdo",
transport: {
jsdo: "SubContractor"
}
}
(Here is a sample of the DataSource definition: oemobiledemo.progress.com/.../j.html.)
I hope this helps.
it has worked perfectly. thanks a lot egarcia