HI,
We have requirement to implement drag and drop in Kendo Tree
List.
We would like to check , if Drag and Drop feature is
available in Kendo Tree list ? As per
our requirement we need to drag and drop each nodes across parent nodes. The requirement is not drag and drop the
nodes between parent notes. The parent
node itself should be provided with an option to drag and drop across. and During drop we have validations to perform . hence need to catch the drop event. How this drop event can be catched ?
Thanks
Hello,
I was going through the Scheduler MVVM demo:
http://demos.telerik.com/kendo-ui/scheduler/mvvm
I want to set currentTimeMarker to false, in order to hide the time marker. I want to do it in html by means of data- attribute. So I add this to the div element for the scheduler:
data-current-time-marker="false"I re-run the demo, but the time marker is still there...
Thank you for the answers,
Boris
HI all, i was wondering if it is possible to get beta or preview versions of KendoUI for Angular2 before planned release dates.
I am thinking of using it on one of projects so in way we are interested to be beta testers.
Thank you.
I've been practicing kendo ui with oracle. I made Controller class to get datas in database.
And I tried to put datas in grid columns with jstl.
First, I modified read: "Controller url" in dataSource.
Contoller class returns List<Class>, and I named it "list".
So I put template: "<div class='channelNumber'>#:CH_NO</div>" in columns for first try, but it never seemed to work.
and I tried other way, jstl.
I put template: "<div class='channelNumber'>${list.ch_no}</div>"
and also tried template: "<div class='channelNumber'>" +${list.ch_no}+ "</div>"
but nothing comes up with any of them.
How can I get datas using Oracle?
Do I necessarily use PHP or JSON?
Hi.
I modified a previous example I found on this forum. If you see the following Dojo example, I am not able to bind the TreeMap successfully.
I created this from the following working example (http://dojo.telerik.com/UFuKa), but in this case the tree map is bound after a chart is data bound. I tried to update it so it would work just for the tree map but can't get it to work.
http://dojo.telerik.com/opezO
What am I missing?
Thank you
Is it possible to change the event that is fired when a task is double clicked (showing a task edit dialog)?
Depending on the task, I would like to show a custom dialog.
It would be great if this is possible for both the bar and the description of the task.
The date format does not reflect the column In the code below.
How can I make data on 'START_DATE' column to formatted string like '2011-11-02 00:00' and '2011-11-02 00:00' with codes below :
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
height: 350,
filterable: true,
sortable: true,
pageable: true,
dataBound: function(e) {
console.log("dataBound" + e);
},
columns: [{
field:"RESOURCE_ID",
width: 90
},{
field:"USE_PERCENTAGE",
width: 90
},{
field:"START_DATE",
format :"{0: yyyy-MM-dd HH:mm}",
width: 90
}
]
});
var ds = {
type: "json",
schema: {
model: {
fields: {
RESOURCE_ID: { type: "string" },
USE_PERCENTAGE: { type: "number" },
START_DATE: { type: "date" }
}
}
},
serverPaging: false
}
var mainGridDataSource = new kendo.data.DataSource(ds);
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(mainGridDataSource);
var gridReadFun = function(data){
console.log("DATA::",data);
var gridDataSource = $("#grid").data("kendoGrid").dataSource;
console.log("FIND gridDataSource:",gridDataSource);
gridDataSource.data(data);
}
var gridData = [
{
"START_DATE": "2011-11-02T00:00:00",
"USE_PERCENTAGE": 38,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 32400
},
{
"START_DATE": "2011-11-03T00:00:00",
"USE_PERCENTAGE": 75,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 64800
},
{
"START_DATE": "2011-11-04T00:00:00",
"USE_PERCENTAGE": 71,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 61200
}];
gridReadFun(gridData); // data set
/*
$.ajax({
url: "http://localhost:8080/rnd/DataServlet",
type:'post',
success: function(data){
gridReadFun(data["RESULT_DATA"]);
},
error: function(e){
console.log("e:"+e.responseText)
}
})
*/
});
</script>
I'm using the Kendo UI grid with ASP.NET Web API 2 to post some data to my server. There are 2 objects that are created by the server on CREATE; a work order and work order details. On CREATE the grid accesses the API and sends a work order of 0, telling my API that the work order is new. Once the work order is created, then the ID of the newly created work order is saved and the work order details are added to that work order as a child object. I want to return the ID of the newly created work order to the Grid so that the other rows following the first row use the new work order instead of creating a new work order for each row in the grid. As it is right now the grid sends a 0 to the API creating a new work order for each line item. Here is my code:
$("#grid").kendoGrid({ dataSource: { batch: false, transport: { create: { // url: "http://localhost:53786/api/workorder/0/workorderdetails", url: function(workorder) { var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var WorkOrderDate = new Date($('#datepicker').val()) return 'http://localhost:53786/api/workorder/' + $('#ClientID').text() + '/' + $('#warehouse').val() + '/' + workorder.WorkOrderID + '/' + WorkOrderDate.getFullYear() + '/' + monthNames[WorkOrderDate.getMonth()] + '/' + WorkOrderDate.getDate() + '/1/workorderdetails'; }, contentType: "application/json", type: "POST" }, read: { url: "http://localhost:53786/api/workorder/0/workorderdetails", dataType: "json" }, update: { url: "http://localhost:53786/api/workorder/0/workorderdetails", dataType: "json", type: "PUT" }, destroy: { url: function (workorderdetail) { return "http://localhost:53786/api/workorder/1/workorderdetails" + workorderdetail.WorkOrderDetailID; }, contentType: "application/json", type: "DELETE" }, parameterMap: function (data, operation) { var output = null; switch (operation) { case "create": output = '{ ClientID: ' + $('#ClientID').text() + ', PriceCodeID: ' + data.ShortCode.PriceCodeID + ', Description: "' + data.ShortCode.Description + '", WorkOrderID: ' + data.WorkOrderID + ', Quantity: ' + data.Quantity + ', WorkOrderDate: "' + $('#datepicker').val() + ', WarehouseID: ' + $('#warehouse').val() + '" }'; } // return JSON.stringify(data); return output; } }, schema: { data: "Data", total: "Total", model: { id: "WorkOrderID", fields: { WorkOrderID: { editable: "false", type: "number" }, ClientID: { type: "number" }, PriceCodeID: { type: "number" }, WorkOrderDetailID: { type: "number" }, ShortCode: { defaultValue: { PriceCodeID: 1436, ShortCode: "REF3" } }, Description: { type: "string" }, WorkOrderDate: { type: "string" }, Quantity: { type: "number" } } } } }, pageable: true, allowCopy: true, height: 550, toolbar: ["create", "save", "cancel"], columns: [ { field: "ShortCode", title: "Price Code", editor: shortcodeDropDownEditor, width: "150px", template: "#=ShortCode.ShortCode#" }, { field: "Description", title: "Description", editable: "false" }, { field: "Quantity", title: "Quantity", width: "100px" }, { command: ["edit", "destroy"], width: "300px" }], editable: true, save: function(e) { if (e.values.hasOwnProperty('ShortCode')) { var test = e.model.set("Description", e.values.ShortCode.Description); var test = e.model.set("PriceCodeID", e.values.ShortCode.PriceCodeID); } }, saveChanges: function (e) { if ($('#ClientID').text() === "") { e.preventDefault(); alert("Please select a Client before saving the Work Order."); } else if ( Object.prototype.toString.call( $('#datepicker').val())) { e.preventDefault(); alert("Please select a valid date before saving the Work Order."); } else { window.location.href = "http://localhost:53786/admin" } }});Here is the code for my API that gets called by the grid on CREATE:
<HttpPost, Route("api/workorder/{WorkOrderID:int}/workorderdetails")>Public Function PostWorkOrderDetails(ByVal newWorkOrderDetail As WorkOrderDetail, WorkOrderID As Integer) As IHttpActionResult Dim newWorkOrder As New WorkOrder ' If a 0 is passed into the function then it's a new WorkOrder. We need to create it in this function If newWorkOrderDetail.WorkOrderID = 0 Then ' Fill in work order properties (omitted) _db.WorkOrders.Add(newWorkOrder) _db.SaveChanges() Else newWorkOrder = _db.WorkOrders.Find(WorkOrderID) End If ' Now that we have the new work order assign the work order detail to it. newWorkOrderDetail.WorkOrderID = newWorkOrder.WorkOrderID ' Add other properties to the object (omitted) _db.WorkOrderDetails.Add(newWorkOrderDetail) _db.SaveChanges() Dim response As HttpResponseMessage = Request.CreateResponse(HttpStatusCode.Created, newWorkOrderDetail) Return CreatedAtRoute("DefaultApi", New With {.WorkOrderID = newWorkOrderDetail.WorkOrderID}, newWorkOrderDetail)End Function
Hello
I would like to use a kendoComboBox in a specific way. It might be easier to give you an example than describe what I want:
The kendoComboBox has the following list to choose:
- Enter value
- Choice A
- Choice B
If the user chooses "Choice A" or "Choice B" the behaviour is as it should work in kendoComboBox: The value will be be displayed in kendoComboBox as its chosen. If the user chooses "Enter value" the input field of the kendoComboBox will be enterable and masked for only numeric values like "123". I don't want to transform the kendoComboBox into a kendoMaskedTextBox because the user must be able to choose another entry from the kendoMaskedTextBox. So I tried to use a js class to mask the kendoComboBox: http://digitalbush.com/projects/masked-input-plugin/ This javascript class works fine as long as I don't put a kendoComboBox on the input field. But as soon as the input field turns into a kendoComboBox the masked functionality is ignored. I also can live with the fact that I would make the kendoComboBox readonly after entering anything else than "Enter value".
To give you a better picture my code looks like this:
$("#objectcounter").kendoComboBox({ dataValueField: "objectCounterId", dataTextField: "objectCounterText", select: function(e) { // Get chosen value var objectCounter = this.dataItem(e.item.index()).objectCounterId; if (objectCounter === "value") { // Mask textbox on choosing "value" $("#c_objectcounter"+conditionNumber).mask('Z999',); }); } }, dataSource: activeSource["condition"+conditionNumber].objectCounter});Is there a way?
Regards