Telerik Forums
Kendo UI for jQuery Forum
4 answers
127 views

Is it possible to display a helper in a template like this? I'm getting errors.  Maybe I'm not formatting it correctly?

 

columns.Template(template => RenderCustomerActions(template.CustomerID, template.HasMoveHistory));

 @helper RenderCustomerActions(int customerID, bool hasMoveHistory)
{
    <button type='button' id='openCustomerEditButton' title='Edit Customer' onclick='openCustomerEditWindow(@customerID, false, this);' class='k-button k-button-icon' data-toggle='tooltip'><span class='k-icon k-edit'></span></button>
    <button type='button' title='Delete Customer' onclick='deleteCustomer(@customerID, @hasMoveHistory);' class='k-button k-button-icon' data-toggle='tooltip'><span class='k-icon k-delete'></span></button>
    <div class="btn-group">
        <button type="button" class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
        <ul class="dropdown-menu" role="menu">
            <li><a onclick="openCustomerPaymentAddWindow(@customerID);">Add Payment</a></li>
        </ul>
    </div>
}

 

I've also tried this the dropdown menu will show but it wont expand:

 

  columns.Template(@<text></text>).ClientTemplate("<button type='button' id='openCustomerEditButton' title='Edit Customer' onclick='openCustomerEditWindow(#=CustomerID#, false, this);' class='k-button k-button-icon' data-toggle='tooltip'><span class='k-icon k-edit'></span></button>" +
            "<button type='button' title='Delete Customer' onclick='deleteCustomer(#=CustomerID#, #=HasMoveHistory#);' class='k-button k-button-icon' data-toggle='tooltip'><span class='k-icon k-delete'></span></button>" +
            "<div class='btn-group'>" +
            "<button type='button' class='btn btn-primary btn-xs dropdown-toggle' data-toggle='dropdown'><i class='fa fa-caret-down'></i></button>" +
            "<ul class='dropdown-menu' role='menu'>" +
            "<li><a onclick='openCustomerPaymentAddWindow(#=CustomerID#);'>Add Payment</a></li>" +
            "</ul>" +
            "</div>").Title("").Width(100);

Alex Gyoshev
Telerik team
 answered on 11 Nov 2015
3 answers
160 views

1) Is there no way to globally just have the editor indent the html when it goes to that mode?

2) How do we stop the wrapping of content with spans having inline styling line-height (BLOATED markup)

Dimo
Telerik team
 answered on 11 Nov 2015
2 answers
156 views

I have a drop down list that gets populated with a CompanyID and CompanyName:

HTML:

  <select id="MerchantList" kendo-drop-down-list="MerchantList" ng-model="MerchantID" k-options="populateCompanies" class="form-control" required validationmessage="Please select a company"></select>​​

 AngularJS:

 //populate the kendo drop down control
    $scope.populateCompanies = {
        dataSource: merchantDataSource,
        dataTextField: "CompanyName",
        dataValueField: "MerchantID",
        //optionLabel: "Please Select Your Company",
        filter: "contains",
        minLength: 3
    };

I also have a user record that contains the CompanyName: $scope.user.CompanyName

How do I select the CompanyName in the drop down list?  

Many thanks,

Jayme

 â€‹

Jayme
Top achievements
Rank 1
 answered on 11 Nov 2015
1 answer
387 views

The PC I'm working on is set to Pacific timezone (America/Los_Angeles). I'm creating a Scheduler in Eastern timezone (America/New_York) and I have a change event setup where I output the value of e.start. If, for example, I click on a 1pm timeslot, I would expect the change event to output 1pm eastern time. It's not, it's outputting 1pm Pacific time. Am I missing something?

Thanks

Here's a small example based on one of the Kendo demos that shows the problem:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>
 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
   
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
    date: new Date("2013/6/13"),
    timezone: "America/New_York",
    selectable: true,
    change: function (e) {
      console.log(e.start);
    },
    dataSource: {
        batch: true,
        transport: {
            read: {
                url: "http://demos.telerik.com/kendo-ui/service/tasks",
                dataType: "jsonp"
            },
            update: {
                url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
                dataType: "jsonp"
            },
            create: {
                url: "http://demos.telerik.com/kendo-ui/service/tasks/create",
                dataType: "jsonp"
            },
            destroy: {
                url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
                dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        schema: {
            model: {
                id: "ID",
                fields: {
                    ID: { type: "number" },
                    title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                    start: { type: "date", from: "Start" },
                    end: { type: "date", from: "End" },
                    description: { from: "Description" },
                    recurrenceId: { from: "RecurrenceID" },
                    recurrenceRule: { from: "RecurrenceRule" },
                    recurrenceException: { from: "RecurrenceException" },
                    ownerId: { from: "OwnerID", defaultValue: 1 },
                    isAllDay: { type: "boolean", from: "IsAllDay" }
                }
            }
        }
    }
});
</script>
</body>
</html>

Vladimir Iliev
Telerik team
 answered on 11 Nov 2015
5 answers
147 views

Hi

We would like a line chart or sparkline overlaying a KPI span (please see attached picture).

How could we achive this? Thank you.

Michael
Top achievements
Rank 1
 answered on 11 Nov 2015
1 answer
324 views

I'm trying to add a tooltip for a custom symbol in a bubble layer.

 

I tried adding it directly to the symbol, and I've tried adding it to the layer.  If I add it to the symbol it throws an error and won't display any.  If I add it to the layer it  just doesn't display the tooltip.

 


            {
                type: "bubble",
                dataSource: SELVEHICLEWITHSTUFF,
                locationField: "Location",
                valueField: "Value",              
                symbol: function (e) {
                    //alert('selVehicle symbol '+e.center+' '+e.location);
                    var map = $("#map2").data("kendoMap");

                    //alert(1);
                    var location = e.location;
                    if (e.location == null || e.location == [0, 0]) {
                        //alert(e.dataItem.Name);
                        var symbol = new draw.Group();
                        return symbol;
                    }
                    else {
                        if (e.dataItem.Type == "Ping") {
                            //alert('hola');
                            var rect = new geom.Rect(
                                e.center,  // Position of the top left corner
                                [e.dataItem.Value, e.dataItem.Value] // Size of the rectangle
                            );
                            var imgString = "/Content/Arrows/Blue/"+e.dataItem.Name+".png";                            
                            var image = new draw.Image(imgString, rect);

                            return image;
                        }
                        else {
                            //alert(2);
                            var circleGeometry = new geom.Circle(e.center, e.dataItem.Value);
                            //var rectGeometry = new geom.Rect([e.center[0] - 20, e.center[1] - 10], [e.center[0] + 20, e.center[1] + 10]);

                            //alert(e.dataItem);
                            //alert(e.shape);

                            // Draw the circle shape
                            //
                            // http://docs.telerik.com/kendo-ui/api/javascript/dataviz/drawing/circle
                            //alert(3);
                            var circle = new draw.Circle(circleGeometry, {
                                fill: {
                                    color: "#0f0",
                                    opacity: 0.7
                                },
                                stroke: {
                                    width: 0
                                }
                            });
                            //alert(4 +' '+e.dataItem.Color);

                            // Draw the text
                            //
                            // http://docs.telerik.com/kendo-ui/api/javascript/dataviz/drawing/text
                            var text = new draw.Text(e.dataItem.Name, e.center, {//e.dataItem.Name
                                font: "12px sans-serif"
                            });
                            //alert(5+' '+e.dataItem.Name);

                            // Align it in the circle center
                            //
                            // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-align
                            // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-vAlign
                            ////////These two lines are throwing errors here, but not in otp.mvc.  Not sure why.
                            //draw.align([text], circle.bbox(), "center");
                            //draw.vAlign([text], circle.bbox(), "center");
                            //alert(6);

                            circle.dataItem = e.dataItem;
                            circle.bubbleType = e.dataItem.Type;
                            //alert(7);
                            text.dataItem = e.dataItem;
                            text.bubbleType = e.dataItem.Type;
                            //alert(8);
                            var symbol = new draw.Group();
                            symbol.append(circle, text);
                            symbol.dataItem = e.dataItem;
                            symbol.bubbleType = e.dataItem.Type;
                            //symbol.kendoTooltip({
                            //    filter: "a",
                            //    content: "Testing",
                            //    width: 220,
                            //    height: 280,
                            //    position: "top"
                            //});
                            //alert(9);

                            return symbol;
                        }
                    }
                },
                tooltip: {
                    content: "Austin, TX"
                },
          
            },

T. Tsonev
Telerik team
 answered on 11 Nov 2015
2 answers
79 views

Hi

I have nested object field in Telerik Platform (everlive data) which I want to display in a grid. 

I could only manage to display such a nested object value when hardcoding the data in JS as follow:

//HARDODED

var data = [ {  "Id": "asdads",  "surname": "asdaassadds", "healthRiskAssessment": { "totalAlcoholPerWeek": "test 59" } }];
var dataSource = new kendo.data.DataSource({
    data: data
});

$("#kendoGridExportAll").kendoGrid({
            dataSource: dataSource,
            columns: [    { field: "Id" },    { field: "surname" },  { field: "healthRiskAssessment.totalAlcoholPerWeek" }   ]
        });​

//---------------

 

But I could not get the "totalAlcoholPerWeek" field to dosplay while using everlive. See telerik data screenshot. Could you please assist?

//EVERLIVE

var dataSource = new kendo.data.DataSource({ type: "everlive", transport: { typeName: "healthRiskAssessment" }});
$("#kendoGridExportAll").kendoGrid({

            dataSource: dataSource,

            columns: [{ field: "Id" }, { field: "surname" }, { field: "healthRiskAssessment.totalAlcoholPerWeek" } ]

});​

​

Anton Dobrev
Telerik team
 answered on 11 Nov 2015
2 answers
83 views

We have a chart that display some metric over the time category axis. We want to correlate the metric data with another widget on the page. For this we need to be able to receive the current position of the crosshair on the time category axis. So the question is - is it possible to subscribe to the crosshair tracking (or some other event) to receive the datetime value from the time category axis when position of crosshair has changed.

Also, when we use time category axis (Date values) and set the baseUnit: "seconds" then chart still shows and plots values only on minute marks. Is there a way to make it more granular (actual seconds) over the datetime axis?

T. Tsonev
Telerik team
 answered on 11 Nov 2015
1 answer
134 views
Hi
I have a view model with some repeating properties that I need to render using the same template.
I specified the template, and bound the viewModel properties using source binding and data-template attribute.

It works well, but according to the kendoUI documentation, pre-compiling and reusing of the template makes sense when it should be rendered several times.

Is there any way to use the advantage of pre-compiled templates along with mvvm (For example, data-template attribute could accept not only the id of the template DOM element, but also model's function name)?
Thanks!
Alexander Popov
Telerik team
 answered on 11 Nov 2015
1 answer
131 views

Team ,

Please help us to add a new row in header or footer section in week view of a scheduler.  

Thanks in advance.

Vladimir Iliev
Telerik team
 answered on 11 Nov 2015
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
Licensing
ScrollView
Switch
TextArea
BulletChart
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
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
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?