Telerik Forums
Kendo UI for jQuery Forum
1 answer
134 views

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?

Su-Jin
Top achievements
Rank 1
 answered on 09 Jun 2016
2 answers
250 views

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

 

Yoly
Top achievements
Rank 2
 answered on 08 Jun 2016
1 answer
300 views

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.

 

Veselin Tsvetanov
Telerik team
 answered on 08 Jun 2016
1 answer
387 views

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>

Alexander Popov
Telerik team
 answered on 08 Jun 2016
1 answer
833 views

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

 

 

 

Boyan Dimitrov
Telerik team
 answered on 08 Jun 2016
2 answers
188 views

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

Alexander Popov
Telerik team
 answered on 08 Jun 2016
7 answers
287 views
Good afternoon,

Recently I have had to create a chart with daily plotted points on a weekly x axis.  The way I went about this was using a scatterLine chart as with the following:

http://dojo.telerik.com/uGulI

I also have to create an area chart the same way, similar to a scatterLine with shading below the line.  I ran across this post from a few years ago, is it possible to roll this into an upcoming release?  This would be great, I'm sure others would want to see a daily chart with a weekly/monthly/yearly axis.

http://www.telerik.com/forums/shading-a-scatterline-chart#rrQk2nXu906c_chcElNROw

Thanks in advance for the help guys!
Iliana Dyankova
Telerik team
 answered on 08 Jun 2016
1 answer
251 views

I have a field in my Scheduler's dataSource schema that's referenced in a resource to provide custom colors to the Schedule events.  The resource gets the color definitions dynamically.   When the "editable" and "edit" properties are commented out in my example, the scheduler uses the standard edit popup, and the drop-down is populated correctly (see standardEdit.png).  When the properties are uncommented, the scheduler uses my custom definition, but the contents of the drop-down display incorrectly (see customEdit.png).  How do I define a custom template so the drop-down diaplays the same as in the standard template?

 

Vladimir Iliev
Telerik team
 answered on 08 Jun 2016
3 answers
114 views

Hello.

When I close a kendowindow in Safari it blinks but it does not close. After that, the close button disappeared and I can not close it.

This is just in safari

thanks in advance

Dimo
Telerik team
 answered on 08 Jun 2016
7 answers
1.2K+ views

Hi,

I am trying to use the Kendo Upload control to post my file to a web server on a different domain.  Ultimately I intend to host my front end as pure html and my API which is built on ASP.Net on different servers.

For my API I have added the below headers which works fine for JSON requests however the Upload component is failing with the following error

XMLHttpRequest cannot load http://10.0.1.14/TransformWS/UploadFile.aspx. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

I have tested the component on the same server as the upload script and I can confirm that it works perfectly.

HttpContext
.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            
if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
{
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers","Content-Type, Accept");
HttpContext.Current.Response.AddHeader("Access-Control-Max-Age","1728000");
 HttpContext.Current.Response.End();
}

Is it possible to do cross domain posts with Upload?

Kind regards,


Nic

Dimiter Madjarov
Telerik team
 answered on 08 Jun 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
Licensing
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?