Automatically update the autocomplete column based on another autocomplete column edited value Razor pages
11 Replies
Hello
Rajapandiyan,
maybe I should ask in a different way.
Is it possible to lunch a server-side query, from autocomplete change event and then bind its data to field values of column grid?
The idea is as I mentioned if I change the value of field "Dobavitelj":
Field "Dobavnica" gets cleared (this is working)
Then I'm able to select only from Dobavnica (Delivery note), which belongs to selected Dobavitelj (Customer). This is also working:
Now the question is: If I clear the field "Dobavtelj". Then I am able to choose from all delivery notes (this is working), but then when I select the "Dobavnica" (Delivery note). I want to update Dobavitelj (Customer) field with the Customer name to which the delivery note belongs.
Like I said: One Customer can have multiple delivery notes, but the delivery note can have only one customer.
So how to solve this?
Currently, I have this code on the front side:
var ObjectDobavnica;
var ObjectDobavitelj;
var ObjectMaterial;
var ElementDobavnica;
var ElementDobavitelj;
var ElementMaterial;
//create query
var queryDobavnica;
var queryDobavitelj;
function dobavnicaStevilkaCreate(args) {
// create a input element
ElementDobavnica = document.createElement('input');
return ElementDobavnica;
}
function dobavnicaStevilkaRead(args) {
// return the value which will be saved in the grid
return ObjectDobavnica.value;
}
function dobavnicaStevilkaDestroy() {
// destroy the custom component.
ObjectDobavnica.destroy();
}
function dobavnicaStevilkaWrite(args) {
// add multiple parameters in the Query
var dobaviteljNaziv;
if (args.rowData.Dobavnica.Dobavitelj.Naziv !== undefined)
dobaviteljNaziv = args.rowData.Dobavnica.Dobavitelj.Naziv;
queryDobavnica = new ej.data.Query();
queryDobavnica.addParams('DobaviteljNaziv', dobaviteljNaziv);
// create a autoComplete control
ObjectDobavnica = new ej.dropdowns.AutoComplete({
//bind the data manager instance to dataSource property
dataSource: new ej.data.DataManager({
url: 'Palete/Index?handler=AutoCompleteDobavnica',
adaptor: new ej.data.UrlAdaptor(),
headers: [{ 'XSRF-TOKEN': $("input:hidden[name=__RequestVerificationToken]").val() }],
crossDomain: true
}),
//bind the current cell value to the Dropdown which will be displayed only when the dropdown dataSource contains that value
value: args.rowData["Dobavnica"]["Stevilka"],
//map the appropriate columns to fields property
fields: { text: 'Dobavnica.Stevilka', value: 'Dobavnica.Stevilka' },
//set the placeholder to DropDownList input
placeholder: "Najdi dobavnico",
change: (e) => {
if (ObjectDobavitelj.value === null && ObjectDobavnica.value != null) {
queryDobavitelj.params[0].value = ObjectDobavnica.value;
}
},
//bind query property
query: queryDobavnica
});
//render the component
ObjectDobavnica.appendTo(ElementDobavnica);
}
function dobaviteljCreate(args) {
// create a input element
ElementDobavitelj = document.createElement('input');
return ElementDobavitelj;
}
function dobaviteljRead(args) {
// return the value which will be saved in the grid
return ObjectDobavitelj.value;
}
function dobaviteljDestroy() {
// destroy the custom component.
ObjectDobavitelj.destroy();
}
function dobaviteljWrite(args) {
var dobavnicaStevilka;
if (args.rowData.Dobavnica.Stevilka !== undefined)
dobavnicaStevilka = args.rowData.dobavnicaStevilka;
queryDobavitelj = new ej.data.Query();
queryDobavitelj.addParams('DobavnicaStevilka', dobavnicaStevilka);
// create a autoComplete control
ObjectDobavitelj = new ej.dropdowns.AutoComplete({
//bind the data manager instance to dataSource property
dataSource: new ej.data.DataManager({
url: 'Palete/Index?handler=AutoCompleteDobavitelj',
adaptor: new ej.data.UrlAdaptor(),
headers: [{ 'XSRF-TOKEN': $("input:hidden[name=__RequestVerificationToken]").val() }],
crossDomain: true
}),
//bind the current cell value to the Dropdown which will be displayed only when the dropdown dataSource contains that value
value: args.rowData["Dobavnica"]["Dobavitelj"]["Naziv"],
//map the appropriate columns to fields property
fields: { text: 'Dobavnica', value: 'Dobavitelj' },
//set the placeholder to DropDownList input
placeholder: "Najdi dobavitelja",
change: (e) => {
if (ObjectDobavitelj.value !== null) {
if (queryDobavnica.params[0].value !== ObjectDobavnica.value) {
ObjectDobavnica.value = null;
}
}
queryDobavnica.params[0].value = ElementDobavitelj.value;
},
//bind query property
query: queryDobavitelj
});
//render the component
ObjectDobavitelj.appendTo(ElementDobavitelj);
}
function materialCreate(args) {
// create a input element
ElementMaterial = document.createElement('input');
return ElementMaterial;
}
function materialRead(args) {
// return the value which will be saved in the grid
return ObjectMaterial.value;
}
function materialDestroy() {
// destroy the custom component.
ObjectMaterial.destroy();
}
function materialWrite(args) {
// create a autoComplete control
ObjectMaterial = new ej.dropdowns.AutoComplete({
//bind the data manager instance to dataSource property
dataSource: new ej.data.DataManager({
url: 'Palete/Index?handler=AutoCompleteMaterial',
adaptor: new ej.data.UrlAdaptor(),
headers: [{ 'XSRF-TOKEN': $("input:hidden[name=__RequestVerificationToken]").val() }],
crossDomain: true
}),
//bind the current cell value to the Dropdown which will be displayed only when the dropdown dataSource contains that value
value: args.rowData["Tip"],
//map the appropriate columns to fields property
fields: { text: 'Tip', value: 'Tip' },
//set the placeholder to DropDownList input
placeholder: "Najdi material",
});
//render the component
ObjectMaterial.appendTo(ElementMaterial);
}
Hi Miha,
Thanks for your update.
Based on your requirement, you want to select the value of Dobavncia column based on the Dobavitelj column’s selected value which described below,
1. First, we need to select a value in Dobavitelj field.
1. First, we need to select a value in Dobavitelj field.
2. Then Dobavncia field’s dataSource is filtered based on the selected value of Dobavitelj field.
3. Now we can select any one of the filtered value.
This is the behavior of cascading autoComplete component.
But with this requirement, you want to do reverse action like if we select the value in Dobavncia field, you want to update the Dobavitelj field when it is undefined. Since this is not the valid case. Because all the actions are performed based on one column. We are not supposed to do vice versa.
For this case, we need to bind validationRules on Dobavitelj field and disable the Dobavncia field. Like in below screenshot.
Screenshot: Disable the Dobavncia column if Dobavitelj has empty value.
|
function countryWrite(args) {
countryObj = new ej.dropdowns.AutoComplete({
dataSource: data,
fields: { value: 'ShipCountry', text: 'ShipCountry' },
change: function(){
if(countryObj.value == "" || countryObj.value == null){
stateObj.enabled = false; // disable the cascade field if have empty value
}
---
},
filtering: function(args){
if(args.text == ""){
stateObj.enabled = false;
}
},
});
countryObj.appendTo(args.element);
}
|
Note: You can also achieve your requirement using Dropdown component with Filtering feature if you want to save the data only from its dataSource.
Regards,
Rajapandiyan S
SIGN IN To post a reply.
