We Keep Coding

Kendo UI javascript : remote bind form

I'm having trouble getting started with binding a Form to a remote Datasource in Kendo UI for javascript
I have verified that the ajax call returns the correct JSONP payload, e.g:
jQuery31006691693527470279_1519697653511([{"employee_id":1,"username":"Chai"}])
Below is the code:
<script type="text/javascript">
$(document).ready(function() {
var viewModel = kendo.observable({
employeeSource: new kendo.data.DataSource({
transport: {
read: {
url: baseUrl + "/temp1",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
return options;
}
},
batch: true,
schema: {
model: {
id: "employee_id",
fields:{
employee_id: { type: "number" },
username: { type: "string" }
}
}
}
}),
hasChanges: false,
save: function() {
this.employeeSource.sync();
this.set("hasChanges", false);
},
change: function() {
this.set("hasChanges", true);
}
});
kendo.bind($("#item-container"), viewModel);
viewModel.employeeSource.read();
});
</script>
<div id="item-container">
<div class="row">
<div class="col-xs-6 form-group">
<label>Username</label>
<input class="form-control k-textbox" type="text" id="username" data-bind="value: username, events: { change: change }" />
</div>
</div>
<button data-bind="click: save, enabled: hasChanges" class="k-button k-primary">Submit All Changes</button>
</div>
No errors are thrown, but I was expecting my username text form field to be populated with the value 'Chai', and so on.. but it doesn't

Your textbox is bound to a username property but this doesn't exist on your view-model, nor is it being populated anywhere. Assuming your datasource correctly holds an employee after your call to read(), you will need to extract it and set it into your viewmodel using something like this:
change: function(e) {
var data = this.data();
if (data.length && data.length === 1) {
this.set("employee", data[0]);
this.set("hasChanges", true);
}
}
And modify the binding(s) like this:
<input class="form-control k-textbox" type="text" id="username"
data-bind="value: employee.username, events: { change: change }" />
You should also be aware that the change event is raised in other situations, so if you start using the datasource to make updates for example, you'll need to adapt that code to take account of the type of request. See the event documentation for more info. Hope this helps.

VueJS2: Control logic using JSON?

I am a newbie to JavaScript. I am trying to figure out what is the best way to write the control logic for my application. I have a list of checkboxes that hide and show different elements depending on certain options that are checked.
For example, I have the following HTML:
<label>
<input type="checkbox" name="productType" value="magazines" v-model="selectedProductType"> Magazines
</label>
<label>
<input type="checkbox" name="productType" value="books" v-model="selectedProductType"> Books
</label>
<label>
<input type="checkbox" name="productType" value="comics" v-model="selectedProductType"> Comics
</label>
<label>
<input type="checkbox" name="productType" value="videos" v-model="selectedProductType"> Videos
</label>
...snip...
And then I am hiding/showing things based on the checkmarked items
above, like so (this is just one example of some of the conditions I need to check):
<section v-if="(selectedOffice.jira) && (selectedProductType == 'comics') || (selectedProductType == 'videos')" id="booksInfo">Some info here</section>
...snip...
The issue is that I have to check different values in the data/model that looks like this:
//selectedOffice: '',
selectedProductType: [],
officeList: [
{
code: 'Blue Office',
jira: true
},
{
code: 'Red Office',
jira: false
}
...snip...
],
productList: [
{
type: 'comics',
url: 'www.comicsurl.com'
},
{
type: 'videos',
url: 'www.videosurl.com'
}
....snip...
]
Does anyone have any advice on the best way to approach the logic for my application? Better flexibility? My plan is to use an API for the data (Wordpress JSON REST API) and I will be able to customize the key/value properties on my own, but need help with the conditional stuff.
Thanks for any help!

Instead of using v-model, use #click or v-on:click to handle the click event instead. I like to keep most logic inside Vue instead of in the HTML so I recommend making use of methods and computed to determine what data to show.
const app = new Vue({
el: '#app',
data: {
selectedProductTypes: {
magazines: false,
books: false,
comics: false,
videos: false
},
productList: [],
typeList: [
{
type: 'magazines',
name: 'Magazines',
text: 'Check out new magazines'
},
{
type: 'books',
name: 'Books',
text: 'Check out new books'
},
{
type: 'comics',
name: 'Comics',
text: 'Check out new comics'
},
{
type: 'videos',
name: 'Videos',
text: 'Check out new videos'
}
]
},
computed: {
dataToBeShown() {
return this.productList
.filter(product => this.selectedProductTypes[product.type] === true) || [];
}
},
created() {
// get json data here
// assignning data here for demo
this.productList = [
{
type: 'magazines',
url: 'www.magazineurl.com'
},
{
type: 'books',
url: 'www.booksurl.com'
},
{
type: 'comics',
url: 'www.comicsurl.com'
},
{
type: 'videos',
url: 'www.videosurl.com'
}
]
},
methods: {
selectProductType(input) {
this.selectedProductTypes[input] = !this.selectedProductTypes[input];
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
<div class="control">
<div v-for="item in typeList">
<label>
<input type="checkbox" #click="selectProductType(item.type)"> <b>{{item.name}}</b>&nbsp<span>{{item.text}}</span>
</label>
</div>
</div>
<hr/>
<section v-for="item in dataToBeShown">
<div>Type: {{item.type}}</div>
<div>Url: {{item.url}}</div>
</section>
</div>

Issues in Implementing a Drop Down with Knockout

I am trying to replace a text box in the existing website with a dropdown menu with few options in it. Everything is working fine expect the value is not being stored/registered when the person hits register. But with the text box it works fine. Please see the code below that i have made for the drop down:
</label>
<label class="label-4 lcol1" for="d_name-suffix"><small>(optional)</small>
<select id="d_name-suffix" style="width:auto; height:auto" data-bind="options: $root.nameSuffix, value: nameSuffix, optionsText: 'options1'" />
</label>
JS:
self.nameSuffix = ko.observable([
{ options1: "Mr" },
{ options1: "Mrs" },
{ options1: "Miss" }
]).extend({ pattern: NineElevenRegistries.inputValidation.name });
And here is the code that was implemented for the textbox:
self.nameSuffix = ko.observable().extend({
maxLength: NineElevenRegistries.inputValidation.nameSuffixMaxLength,
pattern: NineElevenRegistries.inputValidation.name
});

You need to use an array for the values and store the value in an observable.
self.nameSuffixes = ko.observableArray([
{ options1: "Mr" },
{ options1: "Mrs" },
{ options1: "Miss" }
]);
self.nameSuffix = ko.observable();
And in your view -
<select id="d_name-suffix" style="width:auto; height:auto" data-bind="options: $root.nameSuffixes, value: nameSuffix, optionsText: 'options1'" />

So actually i figured out the solution to this problem. Instead of making Mr, Mrs etc as objects, i created string using the following array:
self.nameSuffixes = ko.observableArray([ "","Mr.","Mrs","Miss"]);
self.nameSuffix = ko.observable();

Dependent combo box populating in Dojo Dijit?

I have a dojo combobox which when the options are changed i need to populate a related second combo box
which is co dependent on the value of the first combo box. How can i achieve this. The code i have tried so far is below
html code:
<div class="gis_SearchDijit">
<div class="formContainer">
<div data-dojo-type="dijit.form.Form" data-dojo-attach-point="searchFormDijit">
<table cellspacing="5" style="width:100%; height: 49px;">
<tr>
<td>
<label for="Customer">Customer:</label>
<div data-dojo-type="dijit.form.ComboBox" id="Customer"></div> <br />
<label for="Attributes">Search Attribute:</label>
<div data-dojo-type="dijit.form.ComboBox" id="Attributes"></div>
<br />
Enter Attribute Value:<input id="searchText" type="text" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="name:'searchText',trim:true,required:true,style:'width:100%;'"
/>
</td>
</tr>
</table>
</div>
</div>
<div class="buttonActionBar">
<div data-dojo-type="dijit.form.Button" data-dojo-props="busyLabel:'searching',iconClass:'searchIcon'" data-dojo-attach-event="click:search">
Search
</div>
</div>
postCreate: function () {
this.inherited(arguments);
this.populateCmbCustomer(Memory);
var comboBoxDigit = registry.byId("Customer");
comboBoxDigit.on('change', function (evt) {
alert('on change'); //This alert is triggerd
this.populateCmbCustomerAttribute(Memory);
});
populateCmbCustomer: function (Memory) {
var stateStore = new Memory({
data: [
{ name: "Cust Data", id: "CUST" },
{ name: "Owner Data", id: "Owner" },
{ name: "Applicant", id: "Applicant" }
]
});
var comboBoxDigit = registry.byId("Customer");
//console.log("COMBO: ", comboBoxDigit);
comboBoxDigit.set("store", stateStore);
},
populateCmbCustomerAttribute: function (Memory) {
var custAttribute = new Memory({
data: [
{ name: "Custid", id: "Cust" },
{ name: "Applicant Id", id: "Applicant" },
{ name: "Owner_Id", id: "Owner" }
]
});
var CmbCustomerAttribute = registry.byId("Attributes");
CmbCustomerAttribute.set("store", custAttribute);
},
Note: the above is just part of the code of my widjet.js.
I am able to load the first combobox with the options. So now when i chose 'Cust Data' in my first combobox then custid should be the only option in second combo box. In the same way Owner Data in first then Owner_id in second...But so far i am not able to populate the second combo-box.. Can some one please guide me
Than You in advance

you should use the query property of the second combo it should look something like this
comboBoxDigit.on('change', function (evt) {
var CmbCustomerAttribute = registry.byId("Attributes");
CmbCustomerAttribute.set("query", {filteringProperty: this.get('value')}); //if you dont understand this check out the stores tutorials
});
EDIT: tutorials referenced in above code snippet helps clear up the ambiguity of "filteringProperty" quite a bit.
I would also recomend to populate your sencond combo from the beggining with something like this
var CmbCustomerAttribute = registry.byId("Attributes");
CmbCustomerAttribute.set("store", store);
CmbCustomerAttribute.set("query", {id:'nonExistantId'}); //so nothing shows in the combo
I think somthing like this is what you are seraching for, any doubts just ask. as cant say mucho more whitout a fiddle or actual code

Item selection MVC view with KnockoutJS

I am trying to implement a generic ASP.net MVC view. The UI should display a list of available and selected items loading data (basically list of string) from server. User can make changes into the list i.e. can select new items from available item list and also can remove items from selected list.
I wanted to do it using KnockoutJS as to take advantage of binding.
I manage to complete it upto the point everything is working except showing selected item as checked when the view is initialized in available list. E.g. As Shown Here
I tried various options (using template (closest to what I want to achieve), Checked attr, possible options), the issue is if I manage to display item checked some other functionality breaks. Tried defining a template but could not get it to work in my case.
HTML:
<div class='moverBoxOuter'>
<div id='contactsList'>
<span data-bind="visible: availableItems().length > 0">Available countries: </span>
<ul data-bind="foreach: availableItems, visible: availableItems().length > 0">
<li>
<input type="checkbox" data-bind="checkedValue: $data, checked: $root.selectedItems" />
<span data-bind="text: title"></span>
</li>
</ul>
<span data-bind="visible: selectedItems().length > 0">Selected countries: </span>
<ul data-bind="foreach: selectedItems, visible: selectedItems().length > 0">
<li>
<span data-bind="text: title"></span>
Delete
</li>
</ul>
</div>
JS:
var initialData = [
{
availableItems: [
{ title: "US", isSelected: true },
{ title: "Canada", isSelected: false },
{ title: "India", isSelected: false }]
},
{
selectedItems: [
{ "title": "US" },
{ "title": "Canada" }
]
}
];
function Item(titleText, isSelected) {
this.title = ko.observable(titleText);
this.isSelected = ko.observable(isSelected);
}
var SelectableItemViewModel = function (items) {
// Data
var self = this;
self.availableItems = ko.observableArray(ko.utils.arrayMap(items[0].availableItems, function (item) {
return new Item(item.title, item.isSelected);
}));
self.selectedItems = ko.observableArray(ko.utils.arrayMap(items[1].selectedItems, function (item) {
return new Item(item.title, item.isSelected);
}));
// Operations
self.selectItem = function (item) {
self.selectedItems.push(item);
item.isSelected(!item.isSelected());
};
self.removeItem = function (removedItem) {
self.selectedItems.remove(removedItem);
$.each(self.availableItems, function (item) {
if (item.title === removedItem.title) {
item.isSelected = false;
}
});
};
}
var vm = new SelectableItemViewModel(initialData);
$(document).ready(function () {
ko.applyBindings(vm);
});
Could you please help, see jsfiddle below:
http://jsfiddle.net/sbirthare/KR4a6/6/
**Update: Follow up question below **
Its followup question:
I need to add a combobox on same UI e.g. for US state. The available items are counties, based on user selection in state combo I need to filter out counties. I am getting data from server using AJAX and its all successful BUT the displayed list is not refreshing. I was expecting having binding setup correctly, if we change the observable array in viewmodel, the UI should change. I tried forcing change to availableItems but it just display all items. Please see if you can spot the problem in below code where I am updating ViewModel observable array.
function multiselect_change() {
console.log("event: openmultiselect_change");
var selectedState = $("#stateDropdownSelect").val();
var propertyName = $("#PropertyName").val();
var searchId = #Model.SearchId;
var items;
var model = { propertyName: propertyName, searchId: searchId, stateName: selectedState };
$.ajax({
url: '#Url.Action("GetFilterValues", "Search")',
contentType: 'application/json; charset=utf-8',
type: 'POST',
dataType: 'html',
data: JSON.stringify(model)
})
.success(function(result) {
debugger;
items = JSON.parse(result);
vm.availableItems(items.AvailableItems);
//vm.availableItems.valueHasMutated();
//var item = document.getElementById('availableItemId');
//ko.cleanNode(item);
//ko.applyBindings(vm, item);
vm.filter(selectedState);
})
.error(function(xhr, status) {
alert(status);
});
}

As user3426870 mentioned, you need to change the value you passed to the checked binding to boolean.
<input type="checkbox" data-bind="checkedValue: $data, checked: isSelected" />
Also, I don't think you need to have selectedItems in the initial data.
Instead in the viewModel, you can do something like:
self.selectedItems = ko.computed(function() {
return ko.utils.arrayFilter(self.availableItems(), function (item) {
return item.isSelected();
});
});

It's because you give an array to the binding checked while it's supposed to be a value comparable to true or false (like undefind or an empty string).
I would use a function checking if the $data is in your array and returning a boolean to your binding.
Something like that!