i need help about a kendo autocomplete widget...
Maybe this is a stupid question, but i just can't reach the solution!!!
My kendoAutoComplete widget, gets data from a c# webservice:
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false)]
[WebMethod]
public string getComuniList()
{
using (PrintInvoicesDataContext context = new PrintInvoicesDataContext())
{
List<comuni_italia> comuni = new List<comuni_italia>();
comuni = context.comuni_italia.ToList();
var jsonStr = JsonConvert.SerializeObject(comuni, Formatting.Indented);
return jsonStr;
}
}
this method returns a long object array like this:
[ {id_comune: 1, des_comune: "Milano", cod_comune: "A130", cap_comune: "64022"},
{id_comune: 2, des_comune: "Torino", cod_comune: "A131", cap_comune: "64100"},
....
]
so, when i choose an item into the kendo autocomplete widget, on the select event, i need to save the whole selected object in a variable.
var comuneAutoComplete = $("#comune_w").kendoAutoComplete({
minLength: 3,
dataSource: dataSource,
placeholder: "Inserisci comune...",
dataTextField: "des_comune",
dataValueField: "id_comune"
}).data("kendoAutoComplete").bind("select", function (data) {
//here i want to save the object
var comune = ????????
});
so that i could get fields values like this:
var id_com = comune.id_comune;
var des_com = comune.des_comune;
..........
this is the model of the datasource:
model: {
fields: {
id: "id_comune",
id_comune: { type: "string" },
des_com: { type: "string" },
des_prv: { type: "string" },
des_reg: { type: "string" },
cod_com: { type: "string" },
cod_prv: { type: "string" },
cod_res: { type: "string" }
}
Is it possible??
hope someone can help me!
thanks in advance.
Getting the data from the dataSource for the selected item is:
var comuneAutoComplete = $("#comune_w").kendoAutoComplete({
minLength: 3,
dataSource: dataSource,
placeholder: "Inserisci comune...",
dataTextField: "des_comune",
dataValueField: "id_comune"
}).data("kendoAutoComplete").bind("select", function (data) {
//here i want to save the object
var comune = this.dataItem(e.item.index());
...
});
Related
I am trying to create an API with MongoDB, Express Js, Node and GraphQl. I have a collection called characters, with the following schema:
const CharacterSchema = Schema({
page:{
type: Number,
required: true
},
data:{
type: Array,
required: true
}
});
I have 25 objects in my database with the above schema. I have a query to query the characters, passing the page number by parameter:
type Character {
_id: ID
name: String!
status: String!
species: String!
type: String!
gender: String!
origin: String!
image: String!
episode: [String]
location: String!
created: String!
}
type Page {
page: Int!
data: [Character]!
}
type Query {
characters(page: Int!): Page!
}
And this is its resolver:
export const resolvers = {
Query: {
characters: async (_, args) => {
let data = await Character.findOne({ page: args.page });
return data;
},
},
};
This is the query Im using to fetch the data:
query($page: Int!) {
characters(page: $page) {
page
data {
name
status
species
type
gender
origin
image
episode
location
created
}
}
}
Executing the query by passing the page number, it returns perfectly the information I ask for.
Now I want to get only one character by its ID. I created a query and a type to fetch only one character by its id:
type CharacterById {
result: Character
}
type Query {
characters(page: Int!): Page!,
character(id: ID): CharacterById
}
This is its resolver:
export const resolvers = {
Query: {
//this works perfectly
characters: async (_, args) => {
let data = await Character.findOne({ page: args.page });
return data;
},
//returns obj but show me null
character: async (_, args) => {
//first method returns the object perfectly
let data = await Character.aggregate([
{ $unwind: "$data" },
{ $match: { "data._id": args.id } },
]);
return data[0].data // returns object
//second method returns the object perfectly
let data = await Character.findOne({"data._id": args.id})
let character = data.data.find(item => item._id === args.id)
return character // returns object
},
},
};
I explain the above: The query “character” is the resolver that I created to get from the database the character with the id passed by parameter.
I try it with two methods. Both of them return me perfectly the object with the id passed by parameter, but when I try to use the query:
query($characterId: ID!) {
character(id: $characterId) {
result {
name
status
species
type
gender
origin
image
episode
location
created
}
}
}
It returns me a null, when it should return me the object:
{
"data": {
"character": null
}
}
why doesn't it bring me the object?
please help me I am very stressed and frustrated that this is not working for me :(
I have a grid js defined as follows. I have select all check box on which I want to select/deselect all the rows. I am able to perform select all but deselect all does not work. Can anyone please help. Thanks.
const grid = new gridjs.Grid({
columns: [
{
id: "selectId", name: "Select",
plugin: {
component: gridjs.plugins.selection.RowSelection,
props: {id: (row) => row.cell(1).data}
}
},
{ id: "columnName", name: "Column Name" },
{ id: "dataType", name: "Data Type"}
],
data: [],
});
function init(){
grid.render("#data-grid);
}
function loadGrid(){
$.get("/someURL",function(response) {
if(response.success){
fileSchemaGrid.updateConfig({
data: response.data
}).forceRender();
}
});
}
function toggle(){
if($("#checkbox-select-all-rows").is(":checked")){
//This block works
fileSchemaGrid.config.columns[0].data = true;
fileSchemaGrid.forceRender();
}else{
//*** This block does not work***
fileSchemaGrid.config.columns[0].data = false
fileSchemaGrid.forceRender();
}
}
I had the same issue and found that this works - but its a bit hacky.
function toggle(){
if($("#checkbox-select-all-rows").is(":checked")){
//This block works
fileSchemaGrid.config.columns[0].data = true;
fileSchemaGrid.forceRender();
}else{
//*** This block should now work***
fileSchemaGrid.config.columns[0].data = null;
fileSchemaGrid.config.plugin.get('selectId').props.store.state.rowIds = [];
fileSchemaGrid.forceRender();
}
}
I am trying to prefill a form with data from a vuex store.In the code provided is the expected result, I need but I know that this is not the way to do it. I am fairly new to Vue/Vuex. The inputs use a v-model thats why i cant use :value="formInformation.parentGroup" to prefill.
data() {
return {
groupName: { text: '', state: null },
parentName: { text: '', state: null },
};
},
computed: {
formInformation() {
const groups = this.$store.getters.groups;
const activeForm = this.$store.getters.activeForm;
if (activeForm.groupIndex) {
const formInfo = groups[0][activeForm.groupIndex][activeForm.formIndex]
this.groupName.text = formInfo.name // Is there a way to not use this unexpected side effect ?
return formInfo;
} else {
return 'No Form Selected';
}
},
},
I searched for an answere for so long now that i just needed to ask it. Maybe i am just googling for something wrong, but maybe someone here can help me.
You are doing all right, just a little refactoring and separation is needed - separate all the logic to computed properties (you can also use mapGetters):
mounted() {
if (this.formInformation) {
this.$set(this.groupName.text, this.formInformation.name);
}
},
computed: {
groups() {
return this.$store.getters.groups;
},
activeForm() {
return this.$store.getters.activeForm;
},
formInformation() {
if (this.activeForm.groupIndex) {
return this.groups[0][this.activeForm.groupIndex][
this.activeForm.formIndex
];
}
}
}
You could either make groupName a computed property:
computed: {
groupName() {
let groupName = { text: '', state: null };
if (formInformation.name) {
return groupName.text = formInfo.name;
}
return groupName;
}
Or you could set a watcher on formInformation:
watch: {
formInformation: function (newFormInformation, oldFormInformation) {
this.groupName.text = formInfo.name;
}
},
Avoid mutating data property in computed.
Computed are meant to do some operation (eg. reduce, filter etc) on data properties & simply return the result.
Instead, you can try this:
computed: {
formInformation() {
const groups = this.$store.getters.groups;
const activeForm = this.$store.getters.activeForm;
if (activeForm.groupIndex) {
const formInfo = groups[0][activeForm.groupIndex][activeForm.formIndex]
// this.groupName.text = formInfo.name // <-- [1] simply, remove this
return formInfo;
} else {
return 'No Form Selected';
}
}
},
// [2] add this, so on change `formInformation` the handler will get called
watch: {
formInformation: {
handler (old_value, new_value) {
if (new_value !== 'No Form Selected') { // [3] to check if some form is selected
this.groupName.text = new_value.name // [4] update the data property with the form info
},
deep: true, // [5] in case your object is deeply nested
}
}
}
how can I implement 3 dependent selects with autoform in meteor?
Here is an example of what I need to achieve http://www.ajaxray.com/Examples/depend.html
Thanks in advance for any help
You could add an event listener to your select and when it changes, update the select helper for the next select (or all select's) you have in your form. It would be something similar to the following example, but update the "options" object depending on what was selected by a different select input.
http://autoform.meteor.com/select
This is the way I solved it. However for the third select to return the selected value once the first select is updated I had to use JQuery. This might help to someone in need of something similar. But if there is a better way to do it please let me know.
Organizaciones = new Mongo.Collection('organizaciones');
Organizaciones.attachSchema(new SimpleSchema({
provincia: {
type: String,
label: 'Provincia',
autoform: {
type: 'select',
firstOption: '',
options: function () {
return DPA.find({grupo: 'Provincia'}).map(function (dpa) {
return {label: dpa.descripcion, value: dpa.codigo};
});
}
}
},
canton: {
type: String,
label: 'Cantón',
autoform: {
type: 'select',
firstOption: '',
options: function () {
var codigoProvincia = AutoForm.getFieldValue('provincia');
var cantones = new RegExp('^' + codigoProvincia + '[\d]{2}$');
return DPA.find({codigo: {$regex: cantones}}).map(function (dpa) {
return {label: dpa.descripcion, value: dpa.codigo};
});
}
}
},
parroquia: {
type: String,
label: 'Parroquia',
autoform: {
type: 'select',
firstOption: '',
options: function () {
$('#provincia').change(function() {
$('#parroquia option[value!=""]').remove();
});
var codigoCanton = AutoForm.getFieldValue('canton');
var parroquias = new RegExp('^' + codigoCanton + '[\d]{2}$');
return DPA.find({codigo: {$regex: parroquias}}).map(function (dpa) {
return {label: dpa.descripcion, value: dpa.codigo};
});
}
}
}
}));
I've created this view. If I activate responsive, nothing is displayed. If I deactivate responsive I see the rows. What can be the reason?
createContent : function(oController) {
var oTileTemplate = new sap.ui.commons.layout.HorizontalLayout("tileTemplate");
var oEmployeeDetailsTemplate = new sap.ui.commons.layout.VerticalLayout("employeeDetailsTemplate");
//Name
var oEmployeeNameText = new sap.ui.commons.TextView( {
text: {
parts: [
{ path: "title" },
{ path: "firstname" },
{ path: "lastname" }
]
},
});
oEmployeeDetailsTemplate.addContent(oEmployeeNameText);
//Company
var oEmployeeCompanyText = new sap.ui.commons.TextView( {
text: "{company}",
});
oEmployeeDetailsTemplate.addContent(oEmployeeCompanyText);
//Plant
var oEmployeePlantText = new sap.ui.commons.TextView( {
text: "{plant}",
});
oEmployeeDetailsTemplate.addContent(oEmployeePlantText);
//Orgunit
var oEmployeeOrgunitText = new sap.ui.commons.TextView( {
text: "{orgunit}",
});
oEmployeeDetailsTemplate.addContent(oEmployeeOrgunitText);
oTileTemplate.addContent(oEmployeeDetailsTemplate);
var oViewRepeater = new sap.suite.ui.commons.ViewRepeater("tilesViewReapeater", {
title: new sap.ui.commons.Title({text: "Employee View", level: sap.ui.commons.TitleLevel.H1}),
noData: new sap.ui.commons.TextView({text: "Sorry, no data available!"}),
showViews: false, // disable view selector
showSearchField: false,
//set view properties directly to the repeater
responsive: true,
itemMinWidth: 210,
numberOfRows: 5, // view property NumberOfTiles has legacy name here
rows: {
path: "/employees",
template: oTileTemplate
}
});
return oViewRepeater;
In HTML-Output is nothing rendered in the ViewRepeaters body ul-element.
I don't understand why the element is only rendered correctly when responsive is true? Has anybody an idea?
Thanks!
I don't see any model-binding being done, probably this is missing. (or going wrong)