Kendo Combobox - set multiple combobox values all coming from the database - javascript

I am having a lot of trouble with setting the values of my combo-boxes. The problem is that I have multiple combo-boxes, each dependent on the previous selected value from a combo-box. All the values are stored in a database. When I run an ajax request to get the values and set the combo-box values, every time I refresh my page the text on the combo-boxes are INCORRECT. And every time I load the page different text is displayed on the combo-box even though nothing has been changed. Has this got something to-do with the way I set the values? Or should there be a particular order considering each is dependent on the previous value? Can someone please help???
E.g.
Sports (selected from 1st combo-box),
Football (selected from 2nd combo-box),
David Beckham (selected from 3rd combo-box)
Once all of this data is selected and saved to the database. On document ready I call an ajax request to get this data and set the combo-box values but, either the saved values is not displayed and shows a different value from the data-source or shows nothing at all. Every time the page is loaded it shows something else even the the right values is coming from the database.

To have three dependent combo-boxes, it is better to use "cascadeFrom" property of kendo combo-box.
A simple example:
<div>
<input id="category" />
<input id="sports" />
<input id="player" />
</div>
<script>
$("#category").kendoComboBox({
dataTextField: "categoryName",
dataValueField: "categoryId",
dataSource: [
{ categoryName: "Sports", categoryId: 1 },
{ categoryName: "Music", categoryId: 2 }
]
});
$("#sports").kendoComboBox({
cascadeFrom: "category",
dataTextField: "sportsName",
dataValueField: "sportsId",
dataSource: [
{ sportsName: "Football", sportsId: 1, categoryId: 1 },
{ sportsName: "Cricket", sportsId: 2, categoryId: 1 },
{ sportsName: "Pop", sportsId: 3, categoryId: 2 },
{ sportsName: "Rock", sportsId: 4, categoryId: 2 }
]
});
$("#player").kendoComboBox({
cascadeFrom: "sports",
dataTextField: "playerName",
dataValueField: "playerId",
dataSource: [
{ playerName: "David Beckham", playerId: 1, sportsId: 1 },
{ playerName: "Leonel Messi", playerId: 2, sportsId: 1 },
{ playerName: "Xavi", playerId: 3, sportsId: 1 },
{ playerName: "Raina", playerId: 4, sportsId: 2 },
{ playerName: "Gambhir", playerId: 4, sportsId: 2 },
{ playerName: "YXZ", playerId: 4, sportsId: 3 },
{ playerName: "ABC", playerId: 4, sportsId: 3 }
]
});
// To set value in combo-box
$("#category").data('kendoComboBox').value(1);
$("#sports").data('kendoComboBox').value(1);
$("#player").data('kendoComboBox').value(2);
</script>
Here, I have hard coded the value to set in combo-box. You can pull data from database and set here.
Its good to save the value field of combo-box and use that to display the data.
Hope this helps.
Reference Link

Related

Unflattening line items in inputData when rendered by function

I have dynamic children input fields that need to be rendered in a function, but when they are, then they are not included in inputData properly/not under the parent input field's key. When the children are included directly in the inputFields, it works as expected, but I can't use a function within the children array with Zapier.
Here is the inputData currently, when the line items are rendered in a function, the LI_ denotes that it is a child input key -
"inputData": {
"supplier": "1",
"LI_budget": 1,
"LI_tax": 1,
"company": "1",
"currency": "1",
"LI_price": "1",
"LI_description": "1"
}
I'm expecting ("parent" is the inputField parent key here):
"inputData": {
"supplier": "1",
"parent": [{
"LI_budget": 1,
"LI_tax": 1,
"LI_price": "1",
"LI_description": "1"
}],
"company": "1",
"currency": "1",
}
This is the function I'm using to pull in the parent and children input fields:
const getLineItems = async (z, bundle) => {
let lineItem = {
key: 'parent',
children: [{
key: 'LI_description',
label: 'Description',
required: true
},
{
key: 'LI_budget',
required: true,
label: 'Budget',
dynamic: 'budget.id'
},
{
key: 'LI_price',
required: true,
type: 'number',
label: 'Unit price',
helpText: 'Example: 50.25'
},
{
key: 'LI_tax',
required: true,
label: 'Tax Rate',
dynamic: 'tax_rate.id'
},
]
}
return [lineItem];
};
There are dynamic fields generated in the getLineItems function that I took out to simplify. TIA
Caleb here from Zapier Platform Support. This is a tough one! We have a pretty long-standing issue report on our platform for supporting custom fields with parent keys (it boils down to a chicken vs the egg problem that really makes my head spin when I read the discussion on the issue). Your inputFields function is spot-on, it's just a matter of properly storing it in the bundle on our part.
I think we could cobble together a workaround to unflatten it. Before I do that though, could you give this a test in the editor and submit actual line items from a previous step to this step? I'm not sure what the inputData looks like (e.g. if multiple items are split like 1,2,3 or in some other fashion). If you want to iterate on this, it might be better to switch over to our public developer Slack (http://zpr.io/ttvdr); then we can post the results here for the next person to run into this. 😁

Kendo grid removes row, but does not call destory URL

I have a Kendo grid where I'm trying to add a delete feature. My datasource looks like:
var datasource = new kendo.data.DataSource({
transport: {
read: {
url: Router.action("Admin", "GetScansForMailItem", { mailItemIdnt: detailinit.data.MailItemIdnt }),
dataType: "json"
},
destroy: {
url: Router.action("Admin", "DeleteScan"),
type: "post"
}
},
model: {
id: "ScanIdnt",
fields: {
ScanIdnt: {editable: false, nullable: false}
}
},
pageSize: 5
});
I added the model part because this answer, however it made no difference.
The actual grid looks like:
.kendoGrid({
dataSource: datasource
scrollable: false,
sortable: true,
pageable: true,
editable: "inline",
columns: [{
field: "ScanIdnt",
title: "Scan ID"
}, {
field: "CreatedDate",
title: "Created",
template: "#= kendo.parseDate(CreatedDate, 'yyyy/MM/dd') #"
}, {
field: "ScanDocumentRelativePath",
title: "File Path",
template: "<a href='/CAMP/Admin/Download?scanIdnt=#= ScanIdnt #'>#= ScanDocumentRelativePath.substring(1) #</a>"
}, {
field: "ScanUserIdnt",
title: "Scanned By"
},{
command: "destroy",
title: ""
}]
});
Strangely, clicking the delete button removes the from the gird on the UI, but there is absolutely no Ajax call is made the the destroy URL. I can't seem to figure out why. Any ideas?
EDIT I'd like to point out that this grid is in fact a nested grid inside of another grid (like here) I discovered that the parent grid handles actually makes a call, but to the wrong function. For some reason, it clicking delete on a to level item calls the read function of the nested grid, however, the nested grids do nothing
Figured it out (sorta). While I think there were many issues with my code and the grid, It seems that when it came down to it, Kendo didn't like how I had my data.
In the Kendo docs related to hierarchical grids, the data for the child grid is stored in a field of the data for the parent. For example, given the following JSON:
"ParentItems": [
{
"Id": 12345 ,
"Name": "Test1",
"ChildItems": [
{"Id": 1, "Name": "Test"},
{"Id": 2, "Name": "Test"}
]
},
{
"Id": 12346 ,
"Name": "Test2",
"ChildItems": [
{"Id": 1, "Name": "Test"},
{"Id": 2, "Name": "Test"}
]
}
]
In the parent grid, each ParentItem would display it's respective ChildItems in the child grid.
On the other hand, I was pulling both data sets separately. Basically, I pulled the ParentItems like:
"ParentItems": [
{
"Id": 12345,
"Name" : "Test1"
},
{
"Id": 12346,
"Name" : "Test2"
}
]
And then made a second request to pull the child items, based on the parent's id.
"ChildItems": [
{"Id": 1, "Name": "Test", "ParentId": "12345"},
{"Id": 2, "Name": "Test", "ParentId": "12345"}
]
I was able to modify the server side code to serve the data like in the very first example and managed to get things working. The specific document that helped me out can be found here

hiding the Inactive Items form the Suggestions in kendo Multiselect

I have a multiselect in our application. I have a requirement where we should not show the Inactive users in the multi-select dropdown suggestions list. We have the flag in the model. So need to know we can filter the dropdown using that flag. Please find the attached screenshot to get the Idea.
We can filter the data in the ajax call using that flag. But need to get the Names of the already selected Inactive users. So I am trying to hide the Inactive users from the suggestions list only.
So need to show the selected Inactive users, but from the suggestions need to hide inactive users.
Not sure if this is the best way, but you can try applying a filter on the dataSource in open event and removing it in close event:
$("#multiselect").kendoMultiSelect({
dataSource: {
data: [{Name: "test 1", Active: true, Id: 1},
{Name: "test 2", Active: true, Id: 2},
{Name: "test 3", Active: false, Id: 3},
{Name: "test 4", Active: true, Id: 4},
{Name: "test 5", Active: false, Id: 5}]
},
value: [1, 3],
dataTextField: "Name",
dataValueField: "Id",
filter: "startswith",
open: function(e) {
this.dataSource.filter({ field: "Active", operator: "eq", value: "true" });
},
close: function() {
this.dataSource.filter(null);
}
});
Demo

Adding JSON object-related link to Dynatable rows

I am trying out Dynatables and, so far, I am able to display my data correctly and update its contents when a certain event happens. So far, this is what I have: http://jsfiddle.net/pDVvx/28/
$(document).ready( function() {
var allSales = [{
locationId: 1001,
location: "Store A",
item: "Soap",
quantity: 2,
amount: 99.50
},{
locationId: 1002,
location: "Store B",
item: "Tissue",
quantity: 1,
amount: 49.75
}];
var allSales2 = [{
locationId: 2001,
location: "Store C",
item: "Bag",
quantity: 1,
amount: 10000.00
},{
locationId: 2002,
location: "Store D",
item: "Shoe",
quantity: 2,
amount: 5999.50
}];
var locationDetails = [{
locationId: 1001,
location: "Store A",
address: "some address here",
manager: "Pepito Manaloto"
},{
....
}];
var updateDynaTable = function(argument){
console.log("argument for updateDynaTable");
console.log(argument);
dynatable.settings.dataset.originalRecords = argument;
dynatable.process();
}
var dynatable = $('#my-final-table').dynatable({
dataset: {
records: allSales
}
}).data('dynatable');
$("#button1").click(function(){
updateDynaTable(allSales);
})
$("#button2").click(function(){
updateDynaTable(allSales2);
})
});
Furthermore, I want to make each location (Store A, Store B, etc.) a clickable link with the respective locationID associated with it. I need this so that whenever I click a store link, the corresponding store details (as shown in locationDetails table) will be prompted.
For example, if sales1 button is clicked and Store A is also clicked, a prompt (could be an alert) will show the store's address and manager (from locationDetails table).
If anyone can suggest any solution, that would be very helpful. Thank you!
I've been looking at this for the past 20 minutes or so and I'm coming to the conclusion that this is not going to be easy if you build your dynatable from JSON. I think that the countries example at the top of the dynatable site is probably built as a regular html table on the server side and then dynatable is just being used for sorting/pagination/etc.
Seems like the other likely option would be to return, in your JSON, the full content of the cells you want to create, including any links, etc (or postprocess the JSON in javascript to mangle it into the form you want).

Using an input element to reference a json

bit of background: when a user clicks an element, it loads a form retrieved by an ajax call. I save a copy of the json in the controller, and when they change a value, it is to update the local json.
Let's say the json is something like this:
{
name: "questions!",
id: "0",
questions: [{
id: "1",
text: "ninjas or pirates?",
type: "radio",
answers: [{
id: "1",
text: "ninjas"
} , {
id: "2",
text: "pirates"
}],
}, {
id: "3",
text: "why?",
type: "text"
answers: []
}]
}
the element returned is a jquery-ized version of the input that was selected.
While I could iterate through each field and check, I can't help but feel like there is a better way to do it and reference it more directly. How would this be done?

Categories

Resources