Questions on Kendo UI for jQuery Forum

1 answer

280 views

Mulitselect drag and drop not working from 1 listview to another

Hi,

I am trying to implement Multi select items drag and drop from 1 listview to another.

I know that both selectable and draggable listen to the same event Select, hence directly we cannot do. Can someone help with some work around?

Here is my working code for single selection drag and drop: I want to make it work for selecting multiple drag and drop.

var dataSourceSalesRole = new kendo.data.DataSource({

data: salesRole,

pageSize: 21

});

var dataSourceSalesRoleContainer = new kendo.data.DataSource({

data: salesRoleContainer,

pageSize: 21

});

$("#listViewSalesRole").kendoListView({

dataSource: dataSourceSalesRole,

template: kendo.template($("#templateSalesRole").html())

});

$("#listViewSalesRoleContainer").kendoListView({

dataSource: dataSourceSalesRoleContainer,

template: kendo.template($("#templateSalesRoleContainer").html())

});

$("#listViewSalesRole").kendoDraggable({

group: "salesRole",

filter: ".move",

hint: function (element) {

return element.clone();

}

});

$("#listViewSalesRoleContainer").kendoDropTarget({

group: "salesRole",

dragenter: function (e) {

e.draggable.hint.css("opacity", 0.6);

},

dragleave: function (e) {

e.draggable.hint.css("opacity", 1);

},

drop: function (e) {

var count = 0;

var dropItem = dataSourceSalesRole.getByUid(e.draggable.hint.data().uid);

var salesRoleId = dropItem.SalesRoleId;

var saleRoleContainerData = dataSourceSalesRoleContainer.data();

$(saleRoleContainerData).each(function () {

if (this.SalesRoleId == salesRoleId) {

alert('Sales Role already exist! Cannot add.');

count++;

}

});

if (count == 0) {

dataSourceSalesRoleContainer.add(dropItem);

dataSourceSalesRole.remove(dropItem);

}

});

Drag and Drop

answered on 14 Oct 2016

1 answer

368 views

kendo upload - angular-js + jax-rs (java on backend) gives unsupported media type (415 error)

Hi,

I've been trying kendo-upload with angular.

I keep getting unsupported media type from the server (error: 415). I am wondering if the

boundary=----WebKitFormBoundaryARilQnC5oS7lnLVU

is making server have any issues or is there something else that's causing this?

Can you please provide guidance on how to have java service (jax-rs) based handle the request from UI? (in the same way you've given for asp.net)

Here's the angular configuration

<div class="demo-section k-content" ng-controller="UploadController"><input name="files" id="files" type="file" kendo-upload="uploader" k-select="onSelect" k-async="{ saveUrl: 'http://localhost:8080/path/to/upload', autoUpload: true }"/></div>

The java server side code for handling post

@POST@Consumes(MediaType.MULTIPART_FORM_DATA)public void uploadFiles(@FormDataParam("files") List<InputStream> files) {System.out.println("Reached UploadFiles");}

This is the request made as seen on Chrome/Developer tools/Network

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryARilQnC5oS7lnLVURequest Payload------WebKitFormBoundaryARilQnC5oS7lnLVUContent-Disposition: form-data; name="files"; filename="test_blah.txt"Content-Type: text/plain ------WebKitFormBoundaryARilQnC5oS7lnLVU--

Upload

answered on 14 Oct 2016

3 answers

333 views

[Solved] Delete only first row o a grid

Can anyone help me how to delete only the first row of a kendo grid.

if there is an option to hide the delete button for all rows except the first one. That is to only allow me to remove the last row entered.

I will wait for your answers.

Grid

answered on 14 Oct 2016

3 answers

80 views

Clicked event on the title in KindleChart

Our customer wants to make the title work like an hyperlink. I did a bit of research and found that it is not quite supported in the current version. I am not even sure if it is possible to receive any click event when the title is clicked.

Could anyone give me a suggestion?

Charts

answered on 13 Oct 2016

5 answers

662 views

Setting min value on datepicker initialisation messes with the default format string?

I've setup a kendo datepicker with kendo mvvm binding as detailed below, and if I enable the "min" value during the datepicker initialisation, the bound date becomes of the format: "Sat Mar 31 2012 00:00:00 GMT+1000 (E. Australia Standard Time)", whereas if I remove the setting of the "Min" value, the format becomes "2012/03/31" which is what I expect it to do with the "min" value set.

Is this a bug in kendo? Tested in latest chrome browser with kendo release 2012.1.322.

view code:
<div id="container">
<input id="dateFrom" class="datePicker" data-role="datepicker" data-bind="value: startDate"/>
</div>

javascript:
$(document).ready(function() {
var viewModel = kendo.observable({
startDate: new Date("2012/03/31") });
kendo.bind($("#container"), viewModel);

$(".datePicker").width(182).kendoDatePicker(
{
format: "yyyy/MM/dd",
min: new Date() // this line right here causing the format to change of the databound value
});
});

DatePicker

answered on 13 Oct 2016

1 answer

668 views

Telerik Grid (Error Handling + MasterView)

Hi,

I have a a form with a couple of fields and a kendo grid , and im implementing my own custom navigations using the enter and tabe keys.

I got the navigation inside of the form working perfectly, however im having some problems tso i would like to get some assistance to help me acomplish a few things, namely :

1 -Open grid on focus : If the cursor is on the last field on my form (the field just before the grid), and i press tab, i would like to open the last line on the grid on edit mode. However i cannot catch the focus event on the grid.

2 -If a row on the grid is selected, i cannot put that row on edit mode by pressing the enter key. I have already figured out how to catch the keydow event, but as it stands the grid only catches the keydown event when its already in edit mode.

3 -I have the navigation inside the grid partially sorted out, the problem emerges when i get to the last column. When i'm exiting the last cell/colum on a row, i want to save the row and then add a new row to the grid. The complicated bit is that i only want the new row to be added if the current row is saved sucessfully.
In my code if the row is valid i call the save row method.

if( grid.editable && grid.editable.validatable.validate()){

grid.saveRow();

// follow up logic

}

However dispite of the row validation returning true, sometimes the validations on the server side still fail. So far I have no problem displaying the errors returned by the ModelState inside the grid on the respective fields. I want the grid to keep that row, selected, open, and in edit mode displaying the validations errors when the model state is not valid. But if there are not any erros i would like to close the current row ro be close and a new row to be added.

The issue here is that the error even is part of the datasource and not part of the grid, so i don't really know here to put that logic; especially because i also do not know how to check if the saveRow() method returned any errors (from the server side) or executed sucessfully.

<p>Eg : <br>if(grid.dataSource.saveRow(()){ <br>//current row is saved + new row is added. <br> } <br>//else will be handled by the grid error handler</p><p><div class="reCodeBlock" style="border:solid 1px #7f9db9;width:;height:;overflow-y:auto;"><div style=" background-color: #fff;"></div></div></p>

Or check if the error handler executed, and do not do anything, but if the error handler did not execute do X, Y and Z?

4 - As i said before my grid is part of a master form, and it is required that the grid is submited at once with the form, therefore i do not want the grids to immediatly propagate the changes to a remote location in case of insert, update or delete. But at the same time i do not want the changes teh users make on the grid to be reverted in case of a datasource.read() or grid.cancelChanges(). So i would like to have the data saved on the grid, just do not want it to be saved to the db before the data on the form is saved.

Thanks in advance for your assistance.

Grid

answered on 13 Oct 2016

2 answers

4.6K+ views

Validation on DatePicker Control

I have been through all your documentation and there is not a single informative section on how to do this properly.

The question I have is this - how do I prevent somebody from entering any old rubbish in a datepicker field? I can handle the case where the field is left empty as I can set the required attribute.

But if I enter some random text in the field it validates when it shouldn't. I notice that when I look at this control in Firebug its input type is "text" - surely this can';t be right? Why isn't input type = "date" then all the validation would be handled automatically surely?

I really can't believe that I have to set a pattern and validate against that? I was doing this sort of thing 15 years ago.

Not impressed.

DatePicker

answered on 13 Oct 2016

1 answer

168 views

Upload multiple files in custom edit template of CRUD not able to get data in backend.

<div class="k-edit-label">
<label for="ClientPayments_client_id">Client</label>
</div>
<div class="k-edit-field" data-container-for="ClientPayments_client_id">
<input required
validationMessage="Is required"
name="ClientPayments_client_id"
data-bind="value:ClientPayments_client_id"
data-value-field="value"
data-text-field="text"
data-source="ds_clients"
data-option-label="Please choose"
data-role="dropdownlist" />
</div>

<div class="k-edit-label">
<label for="ClientPayments_FileRecords_name">Files</label>
</div>

<div class="k-edit-field" data-container-for="ClientPayments_FileRecords_name">
<div class="k-edit-field k-button k-upload-button" aria-label="files" style="width:100%">
<input name="files" id="files" type="file" data-role="upload" data-async='{"saveUrl":"http://dev.eqrcp.com/db/api/admin/client_payments.json", "autoUpload":"true"}'/>

<span>Files</span>
</div>
</div>

<div class="k-edit-label">
<label for="ClientPayments_amount">Amount</label>
</div>

<div class="k-edit-field" data-container-for="amount">
<input required validationMessage="Amount is required" type="number" class="k-input k-textbox" name="ClientPayments_amount" data-bind="value:ClientPayments_amount">
</div>
</div>
</div>
</div>
</script>
<script>
$(document).ready(function() {
console.log("In files click");
$("").kendoUpload();
});
</script>

Upload

answered on 13 Oct 2016

1 answer

170 views

AngularJS Function to HTML

I am trying to create a function that changes the awesome icon before the test based on what the text is.

I can't get it to read the html from the return. I have attach an image of what I am trying to create.

field: "ProductName", title: "Status", template: " {{ setStatus(dataItem.ProductName) }} #=ProductName# "

$scope.setStatus = function(name) {
if (name === 'Chai') {
return "<i class='fa fa-check-circle' style='color:green; font-size: 150%'></i>";
}
else if (name === 'Chang') {
return "<i class='fa fa-times-circle' style='color:red; font-size: 150%'></i>";
}
}

Grid

answered on 13 Oct 2016

1 answer

341 views

Changing the input control type in the edit template, but keeping binding.

I've got a Kendo Grid that has an editor template with about 4 fields. 2 of those fields work together in that depending on the first field's value, I need to change the second <input> to be a calendar control, dropdownlist, etc. This seems to work once if I leave a blank <input> and then in Javascript just do a $(#mycontrol).calendar() or equivalent to flip to a different type. It seems, though, that there's not a way to easily tell an input to remove the calendar control portion and just go back to a regular input so that it can be changed to another type, without removing it entirely and adding another one, which breaks the binding back to the grid. Does anyone have a suggestion or pointer for the best way to do this in Kendo? Thanks!

Grid

answered on 13 Oct 2016