Telerik Forums
Kendo UI for jQuery Forum
1 answer
79 views

````

$("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    },
                    pageSize: 15
                },
                height:600,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSize: 15,
                    pageSizes: [15,30,50,'all'],
                    buttonCount: 5
                },
                columns: [{
                    template: "<div class='customer-photo'" +
                    "style='background-image: url(https://demos.telerik.com/kendo-ui/content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                    "<div class='customer-name'>#: ContactName #</div>",
                    field: "ContactName",
                    title: "联系人",
                    width: 210
                }, {
                    field: "ContactTitle",
                    title: "职位"
                }, {
                    field: "CompanyName",
                    title: "公司"
                }, {
                    field: "Country",
                    title: "国家",
                    width: 150
                }]
            });

```````

Stefan
Telerik team
 answered on 02 Jul 2018
1 answer
241 views

TLDR: I want to draw a trend line on a stock chart.

I would like to be able to draw arbitrarily on the stock chart in an on render method, as well as in the series configuration of the chart, based on the charts data points.

I am wanting to use the kendoStockChart of type candlestick with ohlc data provided as a remote datasource, and plot a trend line by providing another series of type line. This second series is not rendered, unless I change the object to be kendoChart, in which case I lose the required stock chart features such as zoom and visualisation.

Is there any way to achieve what I am describing please?

Tsvetina
Telerik team
 answered on 29 Jun 2018
4 answers
507 views

Hi everyone, 

We have special requirements to enable multiple row selection on Gantt. Idea is that we select a few tasks and propagate information further into directives and enable some sort of bulk change. 

Is it possible to achieve this and how?

Thanks

Vedad
Top achievements
Rank 3
Bronze
Bronze
Iron
 answered on 29 Jun 2018
1 answer
98 views

Hello,

Can someone supply a current, up to date documentation for the Switch widget?

In my own research, I am finding very little info on how to use the Switch widget with MVVM. What little info I find is contradictory or incomplete, like this https://www.telerik.com/forums/kendo-mobile-switch-not-updating-viewmodel

 

Then I found this resource, which is definitely incomplete. It is also false, because I can't get any events to fire.

https://demos.telerik.com/kendo-ui/m/switch/mvvm.

 

I am in the process of converting the checkboxes of my app to switches, as per client. I am using traditional inputs, klendo dropdowns, kendo autocomplete, etc. Everything is initialized via mvvm. But for some reason, the switch widget is not working, as none of my events are binding. I must be able to listen to a change or click event, but no luck. How do i bind to the change event on a switch widget?

 

Also, could you include the CSS of the switch widget with the rest of the kendo widgets? If the switch widget is in the kendo javascript file by default, shouldn't the default css files also include the switch widget?

Plamen
Telerik team
 answered on 29 Jun 2018
1 answer
4.1K+ views

I created a separate class in .js file to create grid for me,my class is simple as following:

 

function createDynamicGrid(chartId, source, column, titleOfGrid,onChange) {
        chartId.kendoGrid({
        toolbar: titleOfGrid,
        dataSource: {
            data: source,
        },
       change: onChange,
        height: 350,
        scrollable: true,
        sortable: true,
        filterable: true,
        columns: column,
        noRecords: {
            template: "No data"
        },
        });
}

 

in my cshtml file ,i call the above class ,pass the parameters and get the grid,but the onChange event does not trigger :

createDynamicGrid($("#grid"), dataSource, clmns, change);

function onChange(e){

 

//here i should get the clicked event ,but cant!

}

 

 

 

Alex Hajigeorgieva
Telerik team
 answered on 29 Jun 2018
1 answer
123 views

If I set the max property to "new Date()" the time picker does not allow me to pick a time later than now yesterday.

If "new Date()" is 27-June-2018 17:48 I can't select 26-June-2018 18:00

Is there a work-a-round? Or can I somehow have the max only affect the datepicker and not the timepicker?

 

            $("#date-of-control").kendoDateTimePicker({
                value: new Date(),
                dateInput: true,
                format: "dd-MMM-yyyy HH:mm",
                timeFormat: "HH:mm",
                weekNumber: true,
                interval: 30,
                max: new Date()
            });

Viktor Tachev
Telerik team
 answered on 29 Jun 2018
3 answers
716 views

Hi support,

on a page (asp.net mvc 461) where first load is critical (and where I just need the kendo datetimepicker) I'm trying to "just include the required kendo.xxx.min.js files" (instead of just including kendo.all.min.js) (using the Audit tab in Chrome I'm told that the change reduces the load time from 11 sec to less than 3 sec). 

From this page https://docs.telerik.com/kendo-ui/intro/supporting/scripts-editors I setup my bundle like this:

    bundles.Add(
        new ScriptBundle("~/bundles/minimalJs")
            .Include("~/Scripts/jquery-3.3.1.min.js")
            .Include("~/Scripts/bootstrap.min.js")
            .Include("~/Scripts/kendo/kendo.core.min.js")
            .Include("~/Scripts/kendo/kendo.data.min.js")
            .Include("~/Scripts/kendo/kendo.binder.min.js")
            // req for datetimepicker (see https://docs.telerik.com/kendo-ui/intro/supporting/scripts-editors)
            .Include("~/Scripts/kendo/kendo.userevents.min.js")
            .Include("~/Scripts/kendo/kendo.selectable.min.js")
            .Include("~/Scripts/kendo/kendo.calendar.min.js")
            .Include("~/Scripts/kendo/kendo.popup.min.js")
            .Include("~/Scripts/kendo/kendo.datepicker.min.js")
            .Include("~/Scripts/kendo/kendo.timepicker.min.js")
            .Include("~/Scripts/kendo/kendo.datetimepicker.min.js")
            .Include("~/Scripts/moment.min.js") // todo consider moving to view
            .Include("~/Scripts/fingerprint2.min.js") // todo consider moving to view
            .Include("~/Scripts/minimal.js")
        );

In my view I do this:

<input id="datetimepicker" />

$("#datetimepicker").kendoDateTimePicker({
  value: new Date()
});

The input element does not, however, render into a kendoui datetimepicker (see screenshot date-time-picker-1.png)

NB if I use the example from https://demos.telerik.com/kendo-ui/datetimepicker/index and initialize using the option dateInput: true I'm getting the following error:Uncaught TypeError: k.DateInput is not a constructor

I have also prepared an example the illustrate my issue: https://dojo.telerik.com/UXEbUMiY/3

What files must I include as a minimum to be able to use the kendo ui datetimepicker?

Thanks in advance.

Best regards

Morten

 

 

Viktor Tachev
Telerik team
 answered on 29 Jun 2018
19 answers
383 views
I am going to use the Kendo UI theme builder to create an on-brand theme for the company I work for based on the Flat UI theme.

However I also need to create a set of graphic elements in Photoshop that match the UI set so our designers can use them to create consistent mockups for several different projects we are working on.

My question is: Does anyone know of a photoshop template of the flat UI theme I can obtain and edit for this purpose?
It would save me from having to recreate the elements myself and cut out a bunch of time.
Lili
Telerik team
 answered on 28 Jun 2018
5 answers
625 views

The KendoUI grid code in my application is like this:

 

<kendo-grid id="myGrid" options="mainGridOptions"><br>        <kendoGridToolbarTemplate><br>                <button kendoGridExcelCommand>Export to Excel</button><br>             <kendo-grid-excel fileName="GridData.xlsx"><br>               </kendo-grid-excel><br>        </kendoGridToolbarTemplate><br>        <div k-detail-template><br>            <br>            <kendo-tabstrip> Some DIVs and fields here </kendo-tabstrip><br>        </div><br>       <kendo-grid-excel fileName="Products.xlsx"></kendo-grid-excel><br>    </kendo-grid>

 

The data source to this grid is attached on run-time. I am trying to make the Export to Excel button workable but it is not working. What am I doing wrong?

Nabeel
Top achievements
Rank 1
 answered on 28 Jun 2018
7 answers
384 views
Hello,

I have a simple question - how to bind data to grid. I have service that returns JSON data as this one.

01.<div id="example" class="k-content">
02.    <div id="grid"></div>
03. 
04.    <script>
05.      var test = [
06.        {
07.           "ID":1,
08.           "ISIN (SML)":"test"
09.        }
10.      ]
11. 
12. 
13.        $(document).ready(function() {
14.            $("#grid").kendoGrid({
15.                dataSource: {
16.                    data: test
17.                }
18.            });
19.        });
20.    </script>
21.</div>


Tried to bind it to grid, but it doesn't work. I know it is because of field "ISIN (SML)" name, and grid is trying to create property with this name. But how to do it? I can't change service I'm consuming. Data are dynamic and field name is the same as column name.

Regards
René
Stefan
Telerik team
 answered on 28 Jun 2018
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
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?