Hi I'm doing my first app mobile using telerik appBuilder and I can't get the Kendo datasource to work with a dropdown list.
The result of my webservices is below but I can't get the correct data-bind for that result.
{"d":[{"id":2209,"nom":"Test 1"},{"id":23608,"nom":"Test 2"},{"id":24061,"nom":"Test 3"},{"id":24741,"nom":"Test 4"},{"id":27347,"nom":"Test 5"}]}
Pls, any ideas? Thanks a lot.
/* product.html*/
<div id="product" data-role = "view"
data-layout = "sharedlayout" data-model="app.productService.viewModel">
<div class="view-content">
<form >
<div data-role="listview" data-style="inset">
<div>
Products:
<select id="product" data-role="dropdownlist"
data-bind="source: productsdataSource "
data-text-field="id"
data-value-field="product">
<option value="0"> </option>
</select>
</div>
</div>
</form>
</div>
</div>
ProductViewModel.js
(function (global)
{
var ProductsViewModel,
app = global.app = global.app || {};
ProductsViewModel = kendo.data.ObservableObject.extend (
{
getProducts: function() {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "urlexample",
type:"post",
contentType: "application/json; charset=utf-8",
dataType: "json"
}
},
schema: {
data: "d"
},
type: 'json'
});
}
});
app.productService = { viewModel: new ProductsViewModel() };
})(window);
I'm not sure exactly where your problem lies, but i've got a few ideas...
Why are you extending the observable? Why not just use kendo.observable({})?
Your viewModel is returning a function, not an object which is what Kendo UI would be expecting.
I think you might be over-complicating this slightly. I've put together a dead simple example...
http://plnkr.co/edit/T41nZqZNLqtOTfjG8upK?p=preview
Might I also suggest that you drop the data-role="dropdownlist"? Mobile devices have their own select list implementations and this way you can use the native select ability on the device.
Related
Beginner question:
I have an MVC app where there are three dropdowns on a page. Currently I'm using AJAX to evaluate a drop down on form submission and modify a CSS class to display feedback if the answer to the question is wrong.
HTML:
<form method="post" id="formQuestion">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<p>This is a question:</p>
</div>
<div class="col-md-4">
<select id="Question1">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="col-md-4 answerResult1">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-success" type="submit" id="btnsubmit">Submit Answer</button>
</div>
</div>
</form>
AJAX:
#section scripts {
<script>
$(document).ready(function () {
$("#formQuestion").submit(function (e) {
e.preventDefault();
console.log($('#Question1').val())
$.ajax({
url: "/Home/DSQ1",
type: "POST",
data: { "selectedAnswer1": $('#Question1').val() },
success: function (data) { $(".answerResult1").html(data); }
});
})
});
</script>
}
Controller:
public string DSQ1(string selectedAnswer1)
{
var message = (selectedAnswer1 == "3") ? "Correct" : "Feed back";
return message;
}
I have three of these drop downs, that all get evaluated by AJAX in the same way. My question is, how would I go about evaluating all three and then returning a particular View if all three are correct.
I would like to avoid using hard-typed http:// addresses.
You could declare a global script variable prior to your document ready function, this will determine if the fields are valid. See var dropdown1Valid = false, ....
Then on your ajax success function, you could modify the values there. Say in the ajax below, your answering with first dropdown, if your controller returned Correct, set dropdown1Valid to true.
Lastly, at the end of your submit function, you could redirect check if all the variables are true, then redirect using window.location.href="URL HERE or use html helper url.action window.location.href="#Url.Action("actionName");
#section scripts {
<script>
var dropdown1Valid = false;
var dropdown2Valid = false;
var dropdown3Valid = false;
$(document).ready(function () {
$("#formQuestion").submit(function (e) {
e.preventDefault();
console.log($('#Question1').val())
$.ajax({
url: "/Home/DSQ1",
type: "POST",
data: { "selectedAnswer1": $('#Question1').val() },
success: function (data) {
$(".answerResult1").html(data);
if(data == "Correct"){
// if correct, set dropdown1 valid to true
dropdown1Valid = true;
}
// option 1, put redirect validation here
if(dropdown1Valid && dropdown2Valid && dropdown3Valid){
// if all three are valid, redirect
window.location.href="#Url.Action("actionName","controllerName", new { })";
}
}
});
// option 2, put redirect validation here
if(dropdown1Valid && dropdown2Valid && dropdown3Valid){
// if all three are valid, redirect
window.location.href="#Url.Action("actionName", "controllerName", new { })";
}
})
});
</script>
}
I'm learning Angular (1.6.6), so I'm hoping/assuming I'm missing something basic.
I'm populating a drop-down menu on ng-init, which is working as expected. I'm returning JSON from the DB, and console.log() shows me that the JSON is pulling through as expected.
I'm stuck with ng-repeat, trying to display the data in another div.
My Controller
app.controller('RandomTownCtrl', [
'$scope',
'$http',
function($scope, $http){
window.MY_SCOPE = $scope;
$scope.getAllRegions = function() {
$http({
method: 'GET',
url: '/all-regions'
}).then(function successCallback(response) {
$scope.regions = response.data;
}, function errorCallback(response) {
console.log('error');
});
};
$scope.getRandomTown = function() {
var guidEntity = $scope.guidEntity;
if (typeof guidEntity === 'undefined') { return };
$http({
method: 'GET',
url: '/region-name?region-guid=' + guidEntity
}).then(function successCallback(response) {
$scope.randomTown = response.data;
console.log($scope.randomTown);
}, function errorCallback(response) {
});
};
}
]);
The Markup
<div class="column col-sm-5 content-column">
<form ng-controller= "RandomTownCtrl" ng-init="getAllRegions()" ng-submit="getRandomTown()">
<h3>Generate Random Town</h3>
<div class="form-group">
<select name="nameEntity"
ng-model="guidEntity"
ng-options="item.guidEntity as item.nameEntity for item in regions">
<option value="" ng-if="!guidEntity">Choose Region</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Generate!</button>
</form>
</div>
<div class="column col-sm-5 content-column" id="output-column">
<div class="header">
<h4>Region Name:</h4>
</div>
<div ng-controller='RandomTownCtrl'>
<p ng-repeat="item in randomTown">
{{ item.name_region }}
</p>
</div>
</div>
You are mixing $scope and self together, you need also ng-repeat needs an array not an object.
$scope.randomTown = response.data;
Beginner Angular mistake: I didn't understand that the ng-controller directive created an isolate scope, and the output I was expecting wasn't happening because the data simply wasn't there in that scope.
Currently Developing web Application using AngularJS using with Kendo. When I save inline edit grid need to hide my save button and want to show back the Add button. For Show and Hide I use *ngIf. In this class I define public isAddEdit: Boolean; I cannot access the variable in success scope.
update: function (options) {
$.ajax({
url: HttpUrl.UpdateBlog,
contentType: "application/JSON",
type: "POST",
data: JSON.stringify(options.data.models),
success: function (result) {
options.success(result);
this.isAddEdit = false;
$('#save').remove();
$('#grid').data('kendoGrid').dataSource.read();
},
})
This is my view
<div id ="btndiv" class="col-sm-12">
<button *ngIf="!isAddEdit" id="addblog" class="k-button grid-top-button-override k-primary add-button page-name" (click)="addStock()">{{'Addblog' | translate}}</button>
<button *ngIf="isAddEdit" id ="save" class="k-button grid-top-button-override k-primary save-button page-name" (click)="clicksave()">{{'Save' | translate}}</button>
</div>
<div class="row grid-override">
<div id="grid"></div>
</div>
I think that the this is related to the AJAX callback function therefore you are not accesing the variable you want.
Try it with an arrow function:
success:(result) => {
options.success(result);
this.isAddEdit = false;
$('#save').remove();
$('#grid').data('kendoGrid').dataSource.read();
},
This is hpw i'm filing my dropdown box
$.ajax({
url: "CheckinRelatedMember",
type: "POST",
data: { ClubId: localStorage.getItem("ClubId"), memacctno: localStorage.getItem("memacctno") },
async: false,
success: function (data) {
var RelatedMembers;
RelatedMembers = JSON.parse(data.CheckinRelatedMemberResult);
self.RelMembers(RelatedMembers);
How to get Option value from knockout dropdown list. I had successfully binded an dropdown box. but my problem is while i retrieve value from tag. option value unable to appear.
function FillCheckInRec() {
submemacctno = document.getElementById("RelateMem")[0].value;
i need to pass selected option value to FillCheckInRec() method.
<p>
<label>
Select Member
</label>
<select id="RelateMem" class="input-medium" data-bind="options: RelMembers, optionsText:'Name',optionvalue:'AcctNo', value: 'AcctNo'"></select>
</p>
But while i pass select value into FillCheckinRec() method, value comes like this (""). how to get AcctNo From dropdown list. Please Help Me!
Try something like this
view:
<p>
<label>Select Member</label>
<select data-bind="options: RelMembers, optionsText:'Name',optionsValue:'AccNo', value:AcctNo"></select>
</p>
<hr/>
<b><label data-bind="text:AcctNo"></label></b>
viewModel:
var ViewModel = function () {
var self = this;
self.RelMembers = ko.observableArray();
self.AcctNo = ko.observable();
$.ajax({
url: '/echo/json/',
type: "POST",
data: {},
success: function (data) {
var RelatedMembers = [{
'Name': 'One',
'AccNo': 1
}, {
'Name': 'Two',
'AccNo': 2
}, {
'Name': 'Three',
'AccNo': 3
}]
self.RelMembers(RelatedMembers);
}
});
};
ko.applyBindings(new ViewModel());
working sample here
Well I got fix this issue, Here is my code.
var submemacctno = $("#RelateMem").val();
<select id="RelateMem" class="input-medium" data-bind="options: RelMembers, optionsText:'Name',optionsValue:'AcctNo', value:'AcctNo'"></select>
This is my HTML Code, Rest of everything are same.
Thank You!
I want to bind JSON that I fetch from a remote source to elements on a page. I was hoping to use the Kendo DataSource to manage the transport and use MVVM to display and update the data.
I need help as I cannot work out how to display the remote data:
http://jsfiddle.net/digory/zxoLpej9/
Here is my JS:
$(function(){
var dataSource = new kendo.data.DataSource({
transport: {
read: {
//using jsfiddle echo service to simulate JSON endpoint
url: "/echo/json/",
dataType: "json",
type: "POST",
data: {
json: JSON.stringify({
"ItemA": "A",
"ItemB": "B"
})
}
}
},
schema: {
model: {
fields: {
ItemA: { type: "string" },
ItemB: { type: "string" }
}
}
}
});
var vm = kendo.observable({
source: dataSource,
foo: 42,
change: function(e) {
console.log("Changed!");
},
save: function() {
console.log("Saved!");
}
});
kendo.bind($("#my-container"), vm);
vm.source.read();
});
And here is the UI display code that I am trying to use to render the data:
<div id="my-container">
<div>
<label for="ItemA">Item A</span>
<input id="ItemA" data-bind="value: source.data.ItemA, events: { change: change }" />
</div>
<div>
<label for="ItemB">Item B</span>
<input id="ItemB" data-bind="value: source.data.ItemB, events: { change: change }" />
</div>
<div>
<label for="Foo">Foo</span>
<input id="Foo" data-bind="value: foo, events: { change: change }" />
</div>
<div>
<button data-bind="click: save, enabled: hasChanges" class="k-button k-primary">Save</button>
</div>
</div>
I've been playing around a bit more and think I might have found a suitable approach.
The key finding was to set the data in the view model from within the dataSource's change function:
http://jsfiddle.net/digory/yyunxgcw/
change: function() {
var view = this.view()[0];
vm.set("data", view);
},
I'm sure it can be more elegant, but it seems to be working!