Telerik Forums
Kendo UI for jQuery Forum
1 answer
180 views

Hi,

I need to use the kendo-ui grid with local data virtualization. And also, I need sorting functionality.

Your sample in Grid / Virtualization of local data shows 500.000 items in less than 1 second.

When I edit this sample in dojo (with adding 'sortable: true'), sorting the grid is resulting with nearly impossible scrolling (very slow).

Is there any acceptable way of using virtual scrolling (especially with local data) and sorting (and/or filtering) functionalities together?

Thanks.

Mahmut Zemheri

Konstantin Dikov
Telerik team
 answered on 13 Apr 2016
2 answers
322 views
I am trying to select an event from UI after unselecting it programmatically. Even though the event is shown as selected the change event is not getting triggered. Please see the code snippet for the same:

http://dojo.telerik.com/omUPU

Steps to replicate:

1.Open the developer tools to see the console.log messages.
2. Click on any event.
3. Now click on button'Reset all'. This will unselect any selected events.
4. Now try to select the same event as in Step 2.

The event gets selected in UI, however no change event console.log is seen.

Note: The change event will be triggered when selecting any event other than the one selected in Step 2.

How do I fix this issue?
Lloyd
Top achievements
Rank 1
 answered on 12 Apr 2016
1 answer
244 views

Hi,

I would like to have a private method that creates a Datasource to be used. This method can create a datasource either with a data object to send to the URL or one without a data object to send to the URL.

How can I go about achieving this?

 

   ChangeGridDataSource: function (newDatasourceUrl, gridName, dataToSend) {
            // Sets the grid to a new datasource and forces it to read
            var gridId;
            if (gridName[0] !== '#') {
                gridId = '#' + gridName;
            } else {
                gridId = gridName;
            }

            var newDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: newDatasourceUrl,
                        type: 'POST',
                        dataType: 'JSON'
                    }
                },
                pageSize: 20,
                schema: {
                    model: {
                        fields: {
                            // the model fields have to specified that it is of a date type object.
                            dSECSYSTimeStampDate: { type: 'date' },
                            dExecutedDateValue: { type: 'date' },
                            dEffectiveDateValue: { type: 'date' }
                        }
                    },
                    data: 'Data',
                    parse: function (response) {
                        // This will parse the dates and transform it into the proper date format. This is done 
                        // after the date has been retrieved in a JSON format. This will allow the formatting of the dates
                        // to be done in the grids.
                        return Transactions.Methods.ParseDatesFromKendoGrid(response);
                    },
                    total: function (response) {
                        return response.Total;
                    }
                }
            });

            if (typeof dataToSend !== 'undefined') {
                // Does not seem to work.
                newDataSource.transport.read.data = dataToSend;
            }

            console.log(newDataSource);
            console.log(dataToSend);
            $(gridId).data('kendoGrid').setDataSource(newDataSource);
        },

 

I have the above and the line 'newDataSource.transport.read.data = dataToSend' doesn't seem to work for some reason. Is there a method that I can call or a different property that can be used to change a Data Object to send in side the data source?

Rosen
Telerik team
 answered on 12 Apr 2016
1 answer
430 views

Hi,

I am developing an application using angularjs and kendo ui. I have a requirement to apply custom template to the treeview based on the type of data.

For eg: consider the tree below:

A

     1

     2

B

     3

     4

 

I need to use different templates for letters and numbers. I was trying to define a template selector from the control but it did not work. Is there any sample using angularjs? Most of the code samples are not mentioning what attributes can be used from angular.

 

Appreciate any help.

 

Thanks

Alex Gyoshev
Telerik team
 answered on 12 Apr 2016
1 answer
632 views

Hi guys,

 

I have a problem using the DropDownList with Angular and Angular Translate. Here is an example:

http://dojo.telerik.com/URUYO

 

Basically I use a simple template to appy an Angular filter to the value key. From my point of view this is a standard scenario, if I have a DropDownList expressing a foreign-key column from a database. The value is a key (such as a user status), but within the GUI I want a translated text to be displayed. Within the example everything works fine except the filter function of the DropDownList. The filter parses the key value, not the displayed text, as a user would expect. If you enter "KEY_2" a row will be found, entering the displayed text will result in no entries - irritating the user.

Is this a bug or am I doing something wrong?

 

Thanks & cheers,

Nikola

 

Georgi Krustev
Telerik team
 answered on 12 Apr 2016
1 answer
6.2K+ views
How can I add a custom class name to the grid CELL (not the buttons) of a command cell, and have it so that when new rows are added in batch edit mode, the classes are attached. I see no "attributes" attribute for the command cell.
Konstantin Dikov
Telerik team
 answered on 12 Apr 2016
3 answers
403 views

Hello,

In experimenting with line chart and differing date ranges have run into a couple discrepancies.  Outlined below with examples.

Issue 1
With ‘roundToBaseUnit’ set to true (default behavior) it looks like the weeks always start on Sundays.  You can see the middle week in the example is adding data for both Sundays, so 8 days total, while the 3rd week in the example (starting on the 20th) does not take Sunday the 20th data into its total.

http://jsbin.com/yejage/9/edit

Issue 2
When you set ‘roundToBaseUnit’ to false, it looks like the chart gets cutoff according the remainder of the base unit.  In the example, since there is less than a half week for the third data point, you aren’t even able to see the third data point.  We are looking for the ability to have weeks that don't always start on Sunday, but instead the first day of the date range, which is why we're setting this option to false.

http://jsbin.com/yejage/11/edit

Issue 3
With ‘baseUnitStep’ set to “auto” it is possible to display one more date group than is set in ‘maxDateGroups.’  For instance, in the example, maxDateGroups is set to 5 and you can see 6 date groups are displaying.

Note: To view example 3 properly you will need to change the version of Kendo that is loaded to be the most recent internal build (2016.1.322).  The example is referencing 2016.1.226.

http://jsbin.com/yejage/13/edit

 

Machine used for testing is on PDT.

Daniel
Telerik team
 answered on 12 Apr 2016
1 answer
194 views

Hi,

When we load data into a TreeList and then use your prescribed method for expanding nodes, the rows section always overflows the viewport by a couple of rows. (The "k-grid-content" section appears to be too big)

This is "sometimes" rectified if we then expand a node that wasn't previously expanded - but not always. This looks like a refresh problem after manually expanding. How can I cause the control to re-draw itself (without reloading the DS etc...) and re-render its viewport ("k-grid-content") correctly ?

I'm sorry but I can't attach a screenshot as the data is sensitive and I'd be shot...

(version 2016.1.226)

Alex Gyoshev
Telerik team
 answered on 12 Apr 2016
1 answer
160 views

I have been unable to get the kendo page turn effect to work acceptably in chrome. The appearance is staggered and on android mobile, which I am targeting for my application, it does not appear to work at all.
Below is plunkr http://plnkr.co/edit/aWIthiWY1UEPret8BOkT?p=preview

 

<html>
 
<head>
    <meta charset="utf-8">
    <title>Kendo UI Mobile Loves AngularJS</title>
    <meta http-equiv="Content-Security-Policy" content="default-src http://ajax.googleapis.com/ http://code.jquery.com/ http://demos.telerik.com/kendo-ui/ ; http://cdn.kendostatic.com/ https://static.pexels.com/ 'self'    https://localhost:44309/   https://localhost:44300/  https://caredarestorage.blob.core.windows.net/ 'unsafe-eval' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src http://cdn.kendostatic.com/ 'self' 'unsafe-inline'; media-src *">
 
    <!-- the application CSS file -->
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-sanitize.js"></script>
    <style>
        #wrap {
            background-image: url("../content/web/fx/pageturn/book.png");
            width: 100%;
            height: 90%;
            margin: 2.5em auto 4em;
            position: relative;
        }
 
        #book {
            position: relative;
            width: 85%;
            height: 85%;
            margin: 0 auto;
            padding: 0;
            list-style-type: none;
        }
 
            #book > li {
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: #fff;
            }
 
        #actions {
            overflow: hidden;
            margin: 0 auto 3em;
            width: 650px;
        }
 
        #previous, #next {
            text-decoration: none;
            text-indent: -999em;
            overflow: hidden;
            display: block;
            height: 100%;
            width: 50%;
            position: absolute;
            top: 0;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            opacity: .5;
        }
 
            #previous:hover, #next:hover {
                opacity: 1;
            }
 
        #previous {
            background-image: url('content/css/imagesrotator/arrow-left.png');
            left: 0;
        }
 
        #next {
            background-image: url('content/css/imagesrotator/arrow-right.png');
            right: 0;
        }
 
        .first-page #previous,
        .last-page #next {
            display: none;
        }
 
        .preloadSlide * {
            -webkit-transition: none !important;
            -moz-transition: none !important;
            -ms-transition: none !important;
            -o-transition: none !important;
        }
 
        .divSection {
            display: table;
            width: 100%;
            height: 100%;
            z-index: 0;
        }
 
        .divRandomText {
            height: 100%;
            font-size: large;
            line-height: 130%;
            padding: 10% 15% 15% 15%;
            display: table-cell;
            vertical-align: middle;
            white-space: normal;
        }
 
        .divBackgroundImage {
            background-color: white;
            height: 100%;
            width: 100%;
            position: absolute;
            right: 0px;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            *z-index: -1;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000', GradientType=1);
        }
    </style>
</head>
 
<body kendo-mobile-application ng-app="sushiMobileApp">
 
 
    <kendo-mobile-view k-layout="'default'" ng-controller="indexController" k-stretch="'true'" k-on-show="show(kendoEvent)">
        <kendo-mobile-header>
            <kendo-mobile-nav-bar>
 
                Veterinary Wellness
 
            </kendo-mobile-nav-bar>
        </kendo-mobile-header>
 
        <div id="divHome">
          
            Slides {{slides.length}}
            Slide {{currentIndex}}
            <div fill-height id="divWholePageWrapper" style="height: 100%; width: 100%;  ">
 
                <div id="wrap" class="first-page">
                    <ul id="book">
                        <li ng-repeat="slide in slides">
                            <div no-wrap="noWrapSlides" class="divWholePageNew" ng-style="{'background-image': 'url(' + slide.image + ')'}" style="height: 100%; width: 100%; background-repeat:no-repeat; background-position:center;  ">
 
                                <div class="divSection ">
                                    <div class="divRandomText">
                                        <div style="position: relative;height:100%;background-color: white; opacity: .85;  border:2px solid gainsboro;">
                                            <div class="row">
                                                <div class="col-md-2">
                                                    <div class="circle color-1 color1-box-shadow" style="position:absolute;left:-20px;top:20px">
                                                        <p>
                                                            <div style="margin-top:-10px; font: italic 29px/32px Cambria, serif;text-shadow: black 0 1px 0;">{{slide.careCardDate | date:'d'}}</div>
                                                            <div style="margin-top:-8px;display: block;font: Georgia, serif;font-size: 12px;text-transform: uppercase;font-weight: bold;text-shadow: black 0 1px 0;">{{slide.careCardDate | date:'MMM'}}</div>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="col-md-8"><h3 style="text-align:center">{{slide.careCardName}}</h3></div>
                                                <div class="col-md-2">
 
                                                </div>
                                            </div>
                                            <center>
                                            </center>
 
                                            <p style="text-align:center" class="cardTextNew" ng-bind-html="slide.task"> </p>
 
                                        </div>
                                    </div>
 
                                </div>
 
                            </div>
                        </li>
                        <li class="current">
                            <div no-wrap="noWrapSlides" class="divWholePageNew" style="height: 100%; width: 100%;background-image:url(https://static.pexels.com/photos/1230/landscape-mountains-nature-sky.jpg)">
 
                                <div class="divSection ">
                                    <div class="divRandomText">
                                        <div style="position: relative;height:100%;background-color: white; opacity: .85;  border:2px solid gainsboro;">
                                            <div class="row">
                                                <div class="col-md-2"></div>
                                                <div class="col-md-8"><h3 style="text-align:center">Welcome</h3></div>
                                                <div class="col-md-2">
                                                </div>
                                            </div>
                                            <center>
                                            </center>
 
                                            <p style="text-align:center" class="cardTextNew"> Daily inspiration self care wellness message.</p>
 
                                        </div>
                                    </div>
 
                                </div>
 
                            </div>
                        </li>
                    </ul>
 
                    <a href="#" ng-click="previous($event)" id="previous">Previous page</a>
                    <a href="#" ng-click="next($event)" id="next">Next page</a>
                </div>
            </div>
        </div>
 
 
 
    </kendo-mobile-view>
 
    <script>
        angular.module('sushiMobileApp', ['kendo.directives', 'ngSanitize'])
            .controller('indexController', ['$scope', function ($scope) {
                $scope.slides = [];
 
                var slidesData = [
                    {
                        "id": 1,
                        "cardName": "Facial",
                        "cardDescription": "Schedule a facial once a month",
                        "image": "https://static.pexels.com/photos/31256/pexels-photo-31256.jpg"
                    },
                        {
                            "id": 2,
                            "cardName": "Stairs",
                            "cardDescription": "Take the stairs instead of the escalator",
                            "image": "https://static.pexels.com/photos/29280/pexels-photo-29280.jpg"
                        },
                        {
                            "id": 3,
                            "cardName": "Lunch",
                            "cardDescription": "Find time to eat lunch",
                            "image": "https://static.pexels.com/photos/4718/sky-buildings-windows-blue-sky.jpg"
                        },
                        {
                            "id": 4,
                            "cardName": "Vow",
                            "cardDescription": "Vow to eat healthy",
                            "image": "https://static.pexels.com/photos/3768/sky-sunny-clouds-cloudy.jpg"
                        },
                        {
                            "id": 5,
                            "cardName": "Walk",
                            "cardDescription": "Walk your dog for 20 minutes today",
                            "image": "https://static.pexels.com/photos/67101/pexels-photo-67101.jpeg"
                        },
                        {
                            "id": 6,
                            "cardName": "Breathe",
                            "cardDescription": "Take 10 deep breaths",
                            "image": "https://static.pexels.com/photos/1084/sky-clouds-sun-desert.jpg"
                        },
                        {
                            "id": 7,
                            "cardName": "After 9pm",
                            "cardDescription": "Turn off your phone after 9pm",
                            "image": "https://static.pexels.com/photos/4607/landscape-sky-clouds-cloudy.jpg"
                        },
                        {
                            "id": 8,
                            "cardName": "Don't Check",
                            "cardDescription": "Don't check your phone from your bed",
                            "image": "https://static.pexels.com/photos/2330/dawn-landscape-sky-sunset.jpg"
                        },
                        {
                            "id": 9,
                            "cardName": "Spark",
                            "cardDescription": "Ask yourself, does the spark joy? If it doesn't, take the time to figure out how to make it better",
                            "image": "https://static.pexels.com/photos/2596/dawn-sunset-flying-clouds.jpg"
                        } ,
                        {
                            "id": 10,
                            "cardName": "Caffeine",
                            "cardDescription": "Try to limit your caffeine intake to 1 to 2 cups a day.",
                            "image": "https://static.pexels.com/photos/4655/city-dawn-sky-sunset.jpg"}
 
                ]
 
 
 
                $scope.show = function (e) {
 
                    $scope.startDate = new Date();
 
                    for (var i = 0; i < slidesData.length; i++) {
                        $scope.addSlide(slidesData[i], i);
                    };
 
 
                }
 
 
                $scope.addSlide = function (slide, index) {
                    $scope.slides.push({
                        image: slide.image + '?v=1',
                        careCardName: slide.cardName,
                        task: slide.cardDescription,
                        careCardDate: $scope.startDate,
                        id: index,
                        userTaskId: slide.id,
                        index: index
                    });
                };
 
                $scope.previous = function (e) {
                    e.preventDefault();
                    $scope.current(Math.max(1, $scope.current() - 1));
                }
 
                $scope.next = function (e) {
                    e.preventDefault();
                    $scope.current(Math.min($scope.slides.length, $scope.current() + 1));;
                }
 
                $scope.current = function (page) {
 
                    var book = $("#book"),
                        pages = book.children(),
                        pagesCount = pages.length,
                        current = pages.filter(".current"),
                        currentIndex = pagesCount - current.index(),
                        newPage;
                    $scope.currentIndex = currentIndex;
 
                    if (!arguments.length) {
                        return currentIndex;
                    }
 
                    if (book.data("animating")) {
                        return;
                    }
 
                    $("#wrap").toggleClass("first-page", page == 1)
                              .toggleClass("last-page", page == pagesCount);
 
                    if (page != currentIndex) {
                        current.removeClass("current");
                        newPage = pages.eq(pagesCount - page).addClass("current");
 
                        if (page > currentIndex) {
 
                            kendo.fx(book).pageturnHorizontal(current, newPage).play();
 
                        } else {
                            kendo.fx(book).pageturnHorizontal(newPage, current).reverse();
 
                        }
                    }
 
                }
            }]);
 
    </script>
 
</body>
 
</html>

Petyo
Telerik team
 answered on 11 Apr 2016
3 answers
396 views

Is there any way to set a column to be editable or not simply based by name?

For example, I want to pass in via ViewData a list of column names and then make those columns uneditable. How could I go about doing this in such a way that I can add very little code to all of my Views and be able to to turn these columns to be editable/uneditable?

Boyan Dimitrov
Telerik team
 answered on 11 Apr 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
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
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?