Checkboxes when using class="k-checkbox" are unclickable. They are clickable if those classes ommited.
<script id="user-groups-li-edit" type="text/x-kendo-template">
<li>
<input type="checkbox" name="group[]" value="#:data.id#" id="#:data.id#" class="k-checkbox" # if (data.checked) { # checked # } #>
<label class="k-checkbox-label" for="#:data.id#">#:data.nazwa#</label>
</li>
</script>
<script id="document-edit-template" type="text/x-kendo-template">
<div id="document-groups">
<ul class="fieldlist-groups" data-role="listview"
data-template="user-groups-li-edit"
data-bind="source: groupsData">
</ul>
</div>
<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: API_URL+"getusergroups/"+id,
dataType: "json"
}
}
});
var viewModel = kendo.observable({
groupsData: dataSource,
});
kendo.bind($("\#document-groups"), viewModel);
<\/script>
</script>
Related
I want to delete the image in the preview box, as well as delete it in the database using ajax. Deleting the image in the preview box was successful, but deleting it from the database didn't work.
here my ajax:
$(document).ready(function() {
document.getElementById('pro-image').addEventListener('change', readImage, false);
$(".preview-images-zone").sortable();
$(document).on('click', '.image-cancel', function() {
let no = $(this).data('no');
let idData = $(this).data('id');
$(".preview-image.preview-show-" + no).remove();
$.ajax({
type: 'POST',
url: '{{url("unit/API/simpan")}}',
data: {
'id': idData
},
success: function(data) {
alert('success');
}
});
});
});
My Html:
<!-- Percobaan Preview -->
<fieldset class="form-group">
<div class="offset-md-2 col-md-6">
Upload Gambar
<input type="file" id="pro-image" name="gambarku[]" style="display: none;" class="form-control" multiple>
</div>
</fieldset>
<div class="preview-images-zone offset-md-2 col-md-8">
<!-- Gambar Utama -->
<div class="preview-image preview-show-1">
<div class="image-cancel" data-no="1">x</div>
<div class="image-zone"><img id="pro-img-1" src="{{asset('storage/rumah/'.$rumahku->gambar_rumah)}}"></div>
</div>
<!-- Gambar Tambahan -->
<?php $counter = 2 ?>
#foreach($rumahku->gambar as $rows)
<div class="preview-image preview-show-{{$counter}}">
<div class="image-cancel" data-no="{{$counter}}" data-id="{{$rows->id_gambar}}">x</div>
<div class="image-zone"><img id="pro-img-{{$counter}}" src="{{asset('storage/rumah/'.$rows->gambar_unit)}}"></div>
</div>
<?php $counter++ ?>
#endforeach
</div>
<!-- /preview -->
my route
Route::post('unit/API/simpan/{id}', 'partner\UnitController#simpanGambar');
my controller
public function simpanGambar($id)
{
$gambar = Gambar::find($id);
$gambar->delete();
}
you can try this
Route::post('unit/API/simpan', 'partner\UnitController#simpanGambar');
and
public function simpanGambar(Request $request)
{
$gambar = Gambar::find($request->id);
$gambar->delete();
}
or in ajax
$.ajax({
type: 'POST',
url: '{{url("unit/API/simpan")}}' +'/'+ id, <---------- pass id here
I've got created a widget(combobox) with data from an external server.
I just want the value that I select from that combobox see into the label from another widget.
Source of the widget from the combobox:
<div id="exampleCombo">
<div class="demo-section k-content">
<h4>Facility</h4>
<input id="fac" style="width: 30%;" />
</div>
<script>
$(document).ready(function (user) {
$("#fac").kendoComboBox({
dataTextField: "client",
dataValueField: "client",
order: "ascending",
height: 400,
dataSource: {
// type: "odata",
type: "json",
transport: {
read: "/mvc/controllers/UserfacilitiesCombo/get/" + user
},
group: { field: "facility" }
},
});
});
Source of the widget with the label on it:
<div id="exampleLabel">
<div class="demo-section k-content">
<ul class="forms">
<li>
<label>FacilityName</label>
<input id="FacPass" name="FacPass" value="Test" class="k-textbox" style="width: 100%;" />
</li>
</ul>
</div>
Can anybody help me on this?
You can use the change event. Put this after your dataSource and add a class name to your target label
change: function(e) {
var value = this.value();
$('.yourLabelClass').html(value);
}
Here is some more info about the available events
https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox/events/change
I have a very simply page at the moment. It has a first name input, last name input, and a list of names added. You can add your first and last name to the text box, press add. It adds it the peopleList I have and adds a new listItem with their name.
My issue is when I add to the peopleList in my code, it does not update the listView. I think I need to use observable, but I am not exactly sure how to do it. My list shows it has 25 items added to it after I click btnMany, which is how many it show have.
here is the body of my code:
<!--Load Some Data-->
<div id="peopleDefaultView"
data-role="view"
data-model="ViewModel"
data-layout="default">
<!--View-->
<input type="text" data-bind="value: firstName" id="fName" />
<input type="text" data-bind="value: lastName" id="lName" />
<a data-bind="click: addName" data-role="button" id="btnOne">Add</a>
<a data-bind="click: setValues" data-role="button" id="btnMany">Add Many</a>
<div style="margin-top: 10px">
People List:
<ul data-template="people-l-template" data-bind="source: peopleList" id="pList"></ul>
</div>
</div>
<!-- Kendo Template-->
<script id="people-l-template" type="text/x-kendo-template">
<li>
FirstName: <span data-bind="text: first"></span>
LastName: <span data-bind="text: last"></span>
<a data-bind="click: removeName" data-role="button" id="btnRemoveName">X</a>
</li>
</script>
And here is my script to go along with it
<script>
var ViewModel = {
firstName: '',
lastName: '',
peopleList: [],
addName: function (e) {
this.get("peopleList").push({
first: this.get("firstName"),
last: this.get("lastName"),
});
this.set("firstName", '');
this.set("lastName", '');
},
removeName: function (e) {
this.set("peopleList", jQuery.grep(this.peopleList, function (item, i) {
return (item.firstName != e.data.firstName && item.lastName != e.data.lastName);
}));
},
setValues: function (e) {
GetValueFromServer();
}
};
var GetValueFromServer = function () {
$.ajax({
type: "GET",
url: "GetPeopleService.svc/GetPersonById/",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
response.forEach(function (person) {
ViewModel["peopleList"].push({
first: person.firstName,
last: person.lastName
});
});
alert(ViewModel.peopleList.length);
},
error: function (response) {
console.log(response);
}
});
};
var application = new kendo.mobile.Application(document.body);
</script>
There were a few things wrong with the code you provided, the most notably being that you didn't set the role for your <ul> element. You need to change it to have the attribute data-role="listview". You also can't use an <li> element as the root element for a listview template (KendoUI automatically takes care of this for you), otherwise you'll get an error when the list is bound.
Here's an example on JS Bin.
And here's the code:
<!--Load Some Data-->
<div id="peopleDefaultView"
data-role="view"
data-model="viewModel"
data-layout="flat">
<!--View-->
<input type="text" data-bind="value: firstName" id="fName" />
<input type="text" data-bind="value: lastName" id="lName" />
<a data-bind="click: addName" data-role="button" id="btnOne">Add</a>
<div style="margin-top: 10px">
People List:
<ul id="pList"
data-role="listview"
data-template="people-l-template"
data-bind="source: peopleList">
</ul>
</div>
</div>
<!-- Kendo Template-->
<script id="people-l-template" type="text/x-kendo-template">
FirstName: <span>#:first#</span>
LastName: <span>#:last#</span>
<a id="btnRemoveName"
data-role="button"
data-bind="click: removeName"
data-first="#:first#" data-last="#:last#">
X
</a>
</script>
...
var viewModel = {
firstName: null,
lastName: null,
peopleList: [],
addName: function (e) {
var me = this;
me.get('peopleList').push({
first: me.get('firstName'),
last: me.get('lastName')
});
me.set('firstName', '');
me.set('lastName', '');
},
removeName: function (e) {
var me = this;
me.set('peopleList', $.grep(me.peopleList, function (item, i) {
return item.first != e.target.data('first')
&& item.last != e.target.data('last');
}));
}
};
var application = new kendo.mobile.Application(document.body);
I use RESTAdapter with Ember Data. How to make Ember controller handle server validation errors? I think this code should be in the line "console.log(todo.errors);" but I have no idea how to achieve rendaring needed template...
App.TodosRoute = App.AuthenticatedRoute.extend({
model: function () {
return App.Todo.find();
}
});
App.TodosController = Ember.ArrayController.extend({
createTodo: function(todo) {
var data = this.getProperties('title', 'priority', 'due_date');
var todo = App.Todo.createRecord(data);
var self = this;
todo.on('becameInvalid', function(todo) {
// show errors on the form. code goes here
console.log(todo.errors);
});
todo.on('didCreate', function() {
// render list. code goes here
self.set('title', '');
self.set('priority', '');
self.set('due_date', '');
});
todo.save();
}
});
<script type="text/x-handlebars" data-template-name='todo/_edit'>
{{input type='number' class="input" placeholder="Priority" value=priority}}
{{input class="input" placeholder="What needs to be done?" value=title}}
{{input type='date' class="input" placeholder="Due date" value=due_date}}
</script>
<script type="text/x-handlebars" data-template-name="todos">
<section id="todoapp">
<header id="header">
{{partial 'todo/edit'}}
<button {{action "createTodo"}}>Save</button>
</header>
<section id="main">
<ul id="todo-list" class="sortable">
{{#each controller itemController='todo'}}
{{#unless isNew}}
<li {{bindAttr class="isEditing:editing"}} data-id="{{unbound id}}">
{{#if isEditing}}
{{partial 'todo/edit'}}
<button {{action "saveTodo"}} class="save-button">Save</button>
{{else}}
<label>{{priority}}</label>
<label>{{title}}</label>
<label>{{date due_date}}</label>
<button {{action "editTodo"}} class="edit-button">Edit</button>
<button {{action "removeTodo"}} class="destroy">Delete</button>
{{/if}}
</li>
{{/unless}}
{{/each}}
</ul>
</section>
</section>
</script>
Finally I got code like this:
App.TodosNewController = Ember.ObjectController.extend({
create: function() {
var data = this.getProperties('title', 'priority', 'due_date');
var todo = App.Todo.createRecord(data);
var self = this;
todo.on('becameInvalid', function(todo) {
self.set('model', todo);
});
todo.on('didCreate', function() {
self.set('priority', '');
self.set('title', '');
self.set('due_date', '');
self.transitionToRoute('todos');
});
todo.save();
}
});
Hope, it will help somebody
i create a kendo-datasource and assign it to a kendo-listview. its work fine. But i added a search functionality for the list-view. the problem is after search the datasoruce is updated but my listview does not reflect the changes. please help me here is the code bellow. thanks
<script type="text/javascript">
var shareDataSource; var title = $('#blogTitle').val() || "";
shareDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "api/BlogPosts/?title=" + title
}
},
pageSize: 15
});
$("#listView").kendoListView({
dataSource: shareDataSource,
template: kendo.template($("#template").html()),
autoBind: true
});
function searchByTitle() {
var title = $('#blogTitle').val();
shareDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "api/BlogPosts/?title=" + title
}
},
pageSize: 15
});
shareDataSource.read();
}</script>
<div>
<input type="text" id="blogTitle" size="5" />
<input type="button" value="Search" onclick="searchByTitle();" />
</div> <div id="listView"></div>
<script type="text/x-kendo-tmpl" id="template">
<div class="post">
<div class="post-meta">
<h2 class="post-title"> <a title="" rel="bookmark" href="">${Title}</a></h2>
<hr/>
<p class="post-metadata">November 29, 2012 in <a rel="category tag" title="View all posts in .net" href="">.net</a>,
<a rel="category tag" title="View all posts in SQL Server R2" href="">SQL Server R2</a> | Tags: <a rel="tag" href="">software</a>,
<a rel="tag" href="">technology</a> | <a title="" href="">Leave a comment</a></p>
</div> <div class="post-content"> ${Content}
</div>
</div>
</script>
Hasib,
you have already defined kendo datasource on the top, try not to recreate it again in your search method. In theory to update your ListView you need to call read on your data source :
function searchByTitle() {
shareDataSource.read();
}
update the datasource [read]. But should use parametrMap. Bobby_D mention above.
//---------------------------------------------------------------------------
var shareDataSource;
shareDataSource = new kendo.data.DataSource({
transport: {
read: {
url: function(){ var title = $('#blogTitle').val() || "";
return "api/BlogPosts/?title=" + title;}
}
},
pageSize: 15
});
//----------------- better -----------------------------
var shareDataSource;
shareDataSource = new kendo.data.DataSource({
transport: {
read: {
url:"api/BlogPosts/",// "api/Blogposts/",//
data: {
title: function () { return ($('#blogTitle').val() || ""); } // sends the value of the input as the title id
}
}
},
pageSize: 15
});