Telerik Forums
Kendo UI for jQuery Forum
0 answers
148 views

I realize that Telerik has posted a roadmap to releasing an Angular 2 version for Kendo UI.  That's awesome, however; our company has already begun developing using Angular 2 and our release map is not inline with Telerik's.  One strategy we are considering is to use KendoUI Angular 1 directives and the Angular 2 UpgradeAdapter.  This will enable us to use Angular 1 directives inside of a Angular 2 implementation.

Has anyone used the UpgradeAdapter to leverage Kendo UI Angular 1 directives inside of Angular 2 using upgradeNg1Component?

Thanks!

Andy
Top achievements
Rank 2
 asked on 16 Mar 2016
4 answers
600 views

Hi Telerik team,

I have a grid with some columns have empty values. When i click sort on the empty values column, the grid still do the sort. It just happen only in Chrome.

you can see the example here

http://dojo.telerik.com/oYaTa/16  

 

Thank you

Dimiter Topalov
Telerik team
 answered on 16 Mar 2016
1 answer
327 views

Hello:

 

We have been struggling for a few days with inline editing with a nested Grid.

currently the grid is constructed as follows:

 

<div data-role="grid" data-source="{transport:{read:function(e){ e.success(eqCharges)}, update: function(e){ e.success(); }, destroy: function(e){ e.success();}, error:function(e){debugger;}},schema:{model:{id:'sbwrkordrchrge_rn'}}}" data-editable="{mode: 'inline'}" data-scrollable="false" data-toolbar="['create']" data-columns="[ {command:'edit', attributes: {style:'width:10%;'}}, {field: 'sbwrkordrchrge_rn', hidden:true}, {field: 'sbwrkordrchrge_qntty', title:'Quantity', type:'number'}, {field: 'sbwrkordrchrge_dscrptn', title: 'Description'}, {field: 'sbwrkordrchrge_unt_cst', title: 'Unit Price', format: '{0:c}'}, {field: '', title: 'Price', format: '{0:c}'}, {field: '', title: 'Status'}, {command: 'destroy', attributes: {style:'width:10%;'}} ]"></div>

 

the Grid displays as expected.  the Edit command enables editing as it should.  the problem arises when "update" or "cancel" are pressed while editing: neither has any function.

 

digging into the kendo.all.js file shows that upon cancel or update the data-uid's become mismatched- this appears to happen in the 'pristine data' function.

 

Any assistance at all is appreciated.

Nikolay Rusev
Telerik team
 answered on 16 Mar 2016
3 answers
225 views

I'm looking at using the Pivot grid to allow some simple data analysis, attaching to an OLAP data source using msmdpump.  One of the dimensions of the cube I am working with has rather a lot of rows (~15000) which is giving me a performance problem.  Typically users would only want to compare 3 or 4 of these rows - but the dimension filter doesn't seem to handle such long lists of options.  Similarly, expanding the whole grid with that dimension selected isn't really an option, as no one could sensibly use 15000 rows of data, even if they could be rendered in a timely manner.

Is there some way to just request a subset of a particular dimension from the cube, so that users could preselect the information for that particular dimension, allowing the Pivot Grid itself to deal with more sensible data sizes?

Georgi Krustev
Telerik team
 answered on 16 Mar 2016
3 answers
275 views

Is there a way to prevent default in the autocomplete change handler?

I don't want them to exit unless they type in a valid value from the data source. I tried e.preventDefault() but it doesn't seem to work.

 

 

Kiril Nikolov
Telerik team
 answered on 16 Mar 2016
2 answers
818 views

Hi
I am trying to center align a TextBox in a diagram.

I tried using http://docs.telerik.com/kendo-ui/api/javascript/dataviz/diagram/layout#configuration-alignContent, however there is very little information available on how to use it and I couldn't get it to work.

I also tried creating an html template and applying css styles (vertical-align: center / margin:0 auto) to it to center the text and it messes up the diagram completely.

I can't seem to create a dojo snippet at this time. Please edit the Diagram example (http://demos.telerik.com/kendo-ui/diagram/index) and center the text.

Casper
Top achievements
Rank 1
 answered on 16 Mar 2016
1 answer
150 views

I am wondering if its possible to use Nunjucks to iterate through local data that populates into a Kendo UI grid. This is my first time using both Kendo and JS template engines so I am very new to this. Basically, I want to have Nunjucks iterate through my data (in script) and then have it populate into the Kendo grid. I am building this for demo purposes so there is no need to get remote data, now. I am not sure how to accomplish this. Can someone point me to the right direction. Thanks! Here is my code: 

<table id="grid">
    <colgroup>
        <col style="width: 150px" />
        <col style="width: 300px" />
        <col style="width: 120px" />
        <col style="width: 120px" />
        <col style="width: 120px" />
        <col style="width: 120px" />
    </colgroup>
    <thead>
        <tr>
            <th data-field="clientLogo" data-template="<img src='#= clientLogo #' />">Client Logo</th>
            <th data-field="companyName" data-template="<a href='\\#'>#= companyName#</a>">Company Name</th>
            <th data-field="clientID">Client ID</th>
            <th data-field="lastEdited">Last Edited</th>
            <th data-field="lastEditedBy">Last Edited By</th>
            <th data-field="status">Status</th>
        </tr>
    </thead>
</table>
<script>
    //nunjucks to iterate through data below
    var clients = [ { clientLogo: "/images/lowes.png",
                companyName: "Lowe's Home Improvement",
                clientID: 123456,
                lastEdited: "02/15/2016",
                lastEditedBy: "Barbara Johnson",
                status: "In Progress"},
                { clientLogo: "/images/verizon.png",
                companyName: "Verizon Wireless",
                clientID: 123456,
                lastEdited: "02/15/2016",
                lastEditedBy: "Barbara Johnson",
                status: "In Progress"},
                { clientLogo: "/images/mcdonalds.png",
                companyName: "McDonald's Corporation",
                clientID: 123456,
                lastEdited: "02/15/2016",
                lastEditedBy: "Barbara Johnson",
                status: "In Progress"},
                { clientLogo: "/images/att.png",
                companyName: "AT&T Wireless & Network Information",
                clientID: 123456,
                lastEdited: "02/15/2016",
                lastEditedBy: "Barbara Johnson",
                status: "In Progress"},
                { clientLogo: "/images/stjoseph.png",
                companyName: "St Joseph Healthcare System",
                clientID: 123456,
                lastEdited: "02/15/2016",
                lastEditedBy: "Barbara Johnson",
                status: "In Progress"},
                { clientLogo: "/images/proteinbar.png",
                companyName: "Protein Bar",
                clientID: 123456,
                lastEdited: "02/15/2016",
                lastEditedBy: "Barbara Johnson",
                status: "In Progress"},
                { clientLogo: "/images/invision.png",
                companyName: "InVisionApp",
                clientID: 123456,
                lastEdited: "02/15/2016",
                lastEditedBy: "Barbara Johnson",
                status: "In Progress"} ];

// end iteration

    $("#grid").kendoGrid({
        dataSource: clients //inline data - to change to remote data
    });
</script>

Radoslav
Telerik team
 answered on 16 Mar 2016
6 answers
3.3K+ views
I have a grid with data in it and multiple columns (say col 1, 2, and 3). Columns 1, 2, 3 need to be able to be edited (or preventing editing) based off the values of each other. This is row specific.

For instance, if column 1 (date) is < column 2 (date) then column 3 is not allowed to be edited. 

I know it's simple enough to disable or enable an entire column but my requirements are row specific. So row 1 could have column 3 enabled and row 2 could have column 3 disabled.

Any thoughts?
Konstantin Dikov
Telerik team
 answered on 16 Mar 2016
6 answers
209 views

Hello 

I would like to "remove" a set widget and replace it by another widget, depending on what is chosen on a kendouidropdownlist (called "A" to reference it later on).

The input HTML element with ID = "eventobjectvalue" on which I want to set the widget will be appended before putting a widget on it: 

$('#eventmaskdiv0').append( 
...
  +"<div name='eventobjectvaluediv' id='eventobjectvaluediv' style='float:left;'>"
    +"<input id='eventobjectvalue' />"
  +"</div>"
+"</div>"
);

Before attaching a widet on it, it looks like a simple and unformatted input element.
Now I set a kendoNumericTextBox widget on the element "eventobjectvalue" by choosing "Set numericbox" from the dropdownlist "A". Fine, will be done...
In the next step I choose "Set dropdown" from dropdownlist "A" and what happens can be seen in attached files (doubled). That brought me to the idea I have to delete a Widget first before attaching another one...

After some research I found the KendoUI functions remove, empty and destroy: http://docs.telerik.com/KENDO-UI/intro/widget-basics/destroy

Playing around with it doesn't help (because I'm probably doing something wrong). 

$("#eventobjectvalue").empty(); -> same visual effect as in attached file doubled
$("#eventobjectvalue").data("kendoNumericTextBox").destroy(); -> same visual effect as in attached file doubled (even when making sure a numerictextbox is set on element eventobjectvalue)
kendo.destroy($("#eventobjectvalue")); -> same visual effect as in attached file doubled
$("#eventobjectvalue").remove(); -> The Widget is removed BUT the element eventobjectvalue as well (so unable to attach another Widget on it)

What am I doing wrong and which mentioned function do I have to use?  I would like to switch between the Widget kendoNumericTextBox and kendoDropDownList attached to the same HTML element (if possible). The switch should happen depending on what is chosen from apersistent dropdownlist "A" (onchange).

Regards 

 

 

Tayger
Top achievements
Rank 1
Iron
Iron
 answered on 15 Mar 2016
2 answers
641 views

Hello 

I had a hard time to find/focus the problem and can't find any solution. I have several cascading Kendoui dropdownlists in my project. I can't use the functionality "cascadeFrom" because I have to fill dropdownlist dynamically. But I assume the problem covers also the functionality "cascadeFrom" as mentioned here.

Here is a working example to reproduce the wrong behaviour. To see the problem you have to follow the steps after the code section:

<!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>
 
<input id='dropdownfirst'/>
<input id='dropdownsecond'/>
 
<script>
$("#dropdownfirst").kendoDropDownList({
    dataTextField: "showtext",
    dataValueField: "id",
    optionLabel:  {
        showtext: "Choose option...",
        id: "-1"},
    dataSource: {
        data: [{"id": "1", "showtext": "A"}, {"id": "2", "showtext": "B"}]
    },
    change: function(e) {
        // Empty datasource of dropdownsecond
        $("#dropdownsecond").data("kendoDropDownList").dataSource.data([]);
 
        // Refill datasource of dropdownsecond
        var newDataSource = [{"id": "1", "showtext": "3"}, {"id": "2", "showtext": "4"}];
        $("#dropdownsecond").data("kendoDropDownList").dataSource.data(newDataSource);
    }
});
 
$("#dropdownsecond").kendoDropDownList({
    dataTextField: "showtext",
    dataValueField: "id",
    optionLabel:  {
        showtext: "Choose option...",
        id: "-1"},
    dataSource: {
        data: [{"id": "1", "showtext": "1"}, {"id": "2", "showtext": "2"}]
    },
    change: function(e) {
        alert ("change event of dropdownsecond fired");
    }
});
 
</script>
</body>
</html>

After starting the code snippet you should see 2 dropdownlists. Now proceed the following steps to see when the change event of dropdownsecond will not fire:

  1. Choose "A" from first dropdownlist (dropdownfirst)
  2. Choose "4" from second dropdownlist (dropdownlistsecond)
    -> The change event of second dropdownlist fires and show message
  3. Choose "Choose option..." from first dropdownlist
    -> The second dropdownlist will be emptied and will be set back to "Choose option..."
  4. Now choose again "4" from second dropdownlist
    -> This time the change event of the second dropdownlist does not fire!

I assume that the second dropdownlist is internally still set to "4" after step 3 and therefore will not fire on step 4 because no change was detected. My project heavily depends on a proper working change event with up to four dropdownlists in a row. I guess this problem came up after Telerik has removed the optional value from DOM (see documention in blue box below "OptionLabel").I don't mind the optionLabel is no more put into DOM but the dropdownlist should, even in such a case, brought into a state where the change event still will fire.

What do you suggest me to do to solve this problem? Workaround?

Regards

What do you suggest me to do

 

 

Tayger
Top achievements
Rank 1
Iron
Iron
 answered on 15 Mar 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
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?