Telerik Forums
Kendo UI for jQuery Forum
1 answer
2.7K+ views

Hi,

We have the following issue when we are using Kendo UI Templates

Our application is translation labels directly into the Kendo UI Template. But when we get special characters, like we have in the danish language like æøå and ÆØÅ, it will translate it to xml codes  æøå and ÆØÅ.

Because that it is using the character #, it will break the inline code also. Do Telerik have consider a way to handle situations like this, or is the only way to take care of it, on the client site through JavaScript code.

We are aware of, that we can make a escape code \ before the #, but we hope that Telerik have a better solutions for this ?

 

Thanks

 

 

Peter Beyer

CRM-Byggefakta




Alexander Valchev
Telerik team
 answered on 11 Jun 2015
8 answers
427 views
Hi,

I'm using ajax() binding on my grid datasource. (MVC Server Wrappers)
I have a PopUp Editor comming up showing my data i want to edit.

I want to display multiple checkboxes for one value. (have a look at the attached screenshot)
But when i select one checkbox, all other checkboxes get selected as well.

Do you have any clue?

Best regards,
Daniel
Saquib
Top achievements
Rank 1
 answered on 10 Jun 2015
2 answers
108 views
On adding a new task, I am wondering if there is a way to designate columns as particular element types (such as a dropdownlists) that way the user can be limited as to how each task is structured.  
Aaron
Top achievements
Rank 1
 answered on 10 Jun 2015
4 answers
1.2K+ views

I'm using Kendo templates for the first time, and used a previous grid example to create a datasource object for my template. As a result, my template datasources all have a schema > model > fields section, which I've determined I (probably?) don't need. The issue I'm having, however, is that attempting to remove these bits of code causes a low-level error in the Kendo JS:

TypeError: e.slice is not a function   
 
..._pristineTotal=a._total,a._pristineData=e.slice(0),a._detachObservableParents(),...
 
     
kendo.all.min.js (line 11, col 23501)

Here's the original datasource code:

var datasource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/Controllers/MainController.cfc?method=getConfig",
            type: "get",
            dataType: "json",  
            data: {
                ID: id
            }
        }          
    },
    schema : {
        type: "json",
        data: "Config",
        model: {
            fields: {
                CategoryIcon: { field: "CategoryIcon", type: "string" },
                Category: { field: "CategoryName", type: "string" },
                Page: { field: "PageName", type: "string" },
                TileVisible: { field: "TileVisible", type: "number" },
                ListVisible: { field: "ListVisible", type: "number" },
                DefaultView: { field: "DefaultView", type: "string" },
                SearchVisible: { field: "SearchVisible", type: "number" },
                GroupByVisible: { field: "GroupByVisible", type: "number" },
                GroupByDefault: { field: "GroupByDefault", type: "string" },
                SortByVisible: { field: "SortByVisible", type: "number" },
                SortByDefault: { field: "SortByDefault", type: "string" },
                TagsVisible: { field: "TagsVisible", type: "number" },
                TagsDefault: { field: "TagsDefault", type: "string" },
                EnrolledVisible: { field: "EnrolledVisible", type: "number" },
                CompletedVisible: { field: "CompletedVisible", type: "number" },
                CatalogueVisible: { field: "CatalogueVisible", type: "number" }
            }  
        }
    }
});

And here's some sample JSON returned from the function:

{"Config":{"CatalogueVisible":0,"GroupByVisible":1,"PageName":"Enrolled","TagsVisible":1,"ListVisible"
:1,"SortByVisible":1,"EnrolledVisible":1,"GroupByDefault":"Group","CategoryName":"Category 1","TagsDefault"
:"first tag","SearchVisible":1,"DefaultView":"tile","Tags":[{"Name":"Ceci est une phrase française que
 je suis en train d'utiliser pour tester les caractères spéciaux"},{"Name":"first tag"},{"Name":"random
 tag"},{"Name":"taggggggggg"},{"Name":"taggity"},{"Name":"this is a super long tag to test the new responsive
 learner dashboard for testing purposes wheeeeeee"},{"Name":"นี้เป็นประโยคฝรั่งเศสที่ฉันพยายามที่จะใ
ช้ในการทดสอบตัวอักษรพิเศษ"}],"CompletedVisible":0,"TileVisible":1,"SortByDefault":"Course","CategoryIcon"
:"fa-icon-university"}}

I started off trying to remove the whole model section, but got the error above. I then tried to remove the whole schema section, but got the same error. Then I thought it might be a specific field causing the error, so I went field by field, removing them one at a time until I got the error again. Unfortunately, it doesn't seem to be a specific field, since it's not until I got rid of all of them that there's an error again.

Here's an example of how I'm using these fields in my template:

<div class="row k-block k-block-no-radius">
    <div class="col-xs-12 col-sm-9 action-row padding">
        # if (data.TileVisible == 1) { #
            <a href="\#" onclick="javascript: generateCourseView('tile', #= data.EnrolledVisible #, #= data.CompletedVisible #, #= data.CatalogueVisible #);" data-role="button" class="k-button" role="button" aria-disabled="false" tabindex="0">
                <i class="fa-icon-th-large"></i>
            </a>
        # } #
        # if (data.ListVisible == 1) { #
            <a href="\#" onclick="javascript: generateCourseView('list', #= data.EnrolledVisible #, #= data.CompletedVisible #, #= data.CatalogueVisible #);" data-role="button" class="k-button" role="button" aria-disabled="false" tabindex="0">
                <i class="fa-icon-th-list"></i>
            </a>
        # } #
        <select id="display" class="content-box">
            <option value="Default">Display</option>
            <option value="All">All</option>
            # if (data.EnrolledVisible == 1) { #
                <option value="Enrolled">Enrolled</option>
            # } #
            # if (data.CompletedVisible == 1) { #
                <option value="Completed">Completed</option>
            # } #
            # if (data.CatalogueVisible == 1) { #
                <option value="Catalgoue">Catalogue</option>
            # } #
        </select>
        # if (data.GroupByVisible == 1) { #
            <select id="groupby" class="content-box">
                <option value="Default">Default</option>
                <option value="Category">Category</option>
                <option value="Group">Group</option>
            </select>
        # } #
        # if (data.SortByVisible == 1) { #
            <select id="sortby" class="content-box">
                <option value="Default">Default</option>
                <option value="Course">Course</option>
                <option value="DueAsc">Due (asc)</option>
                <option value="DueDesc">Due (desc)</option>
            </select>
        # } #
        # if (data.TagsVisible == 1) { #
            <select id="category" class="content-box">
                <option value="Default">Default</option>
                # for (t = 0; t < data.Tags.length; t++) { #
                    <option value="#= data.Tags[t].Name #">#= data.Tags[t].Name #</option>
                # } #
            </select>
        # } #
    </div>
    <div class="clearfix visible-xs-block"></div>
    # if (data.SearchVisible == 1) { #
        <div id="search" class="col-xs-12 col-sm-3 action-row padding pull-right xs-margin-up">
            <span class="k-textbox k-button k-space-left col-xs-12 search-box">
                <i class="fa-icon-search"></i>
                <input value="Search..." />
            </span>
        </div>
    # } #
</div>

I'm guessing it has something to do w/ the boolean checks I'm using in the template, but I'm not sure how to cast the values as booleans w/o using the schema model. 

So two questions - do I need to have the schema model for a template? And if not, how do I prevent the errors I'm receiving when I remove it?

Ashleigh L
Top achievements
Rank 1
 answered on 10 Jun 2015
4 answers
213 views
Hey there,

I spent the last half day or so hunting a really annoying problem.  Maybe this Information can provide others meanings to get this sorted out quicker...

I created a Barchart which is filled by a  grouped DataSource. The Barchart is configured to stack the dataitems and group them by a category.  So far so good.

The Chart is displayed in Firefox without a problem, everything adds up and the stacks are correctly aligned. But when I display the same chart with Chrome the stacks are wrong. Meaning that the stack of category A contains elements with category B and vice versa.
After thorough investigation we narrowed the problem down to the default sort of the datasource. It seems that the chart depends on data that is correctly sorted by the category field, so that the items of every group are in the SAME ORDER. In Firefox that is the case, probably because my original data was already sorted in that way, but in Chrome (which apparently uses QuickSort (for arrays with 10 or less elements ) => NOT STABLE) the order for one entity is wrong. And so the elements in the chart are mixed up. If you ask me the charts implementation for dividing the categories MUST NOT rely on correctly sorted Datasources or if so it should enforce are correct sorting.

We fixed the problem by explicitly providing a sort-clause to the datasource specifying both the group field and after that the category field.
Heres a Fiddle to reproduce the issue:
http://jsfiddle.net/zaCPt/3/
Use Chrome if you want to see the difference! Or look at the attached screenshot, both charts use the same data. Top is unsorted datasource, Bottom is sorted
Chrome Version is 28.0.1500.95 m

Regards,
Kristoffer Witt


T. Tsonev
Telerik team
 answered on 10 Jun 2015
6 answers
95 views
I bind to list of columns, some of them are complex like "ProfileDetails" property.
If we bind to a complex column like “ProfileDetails.FullAddress” while “ProfileDetails” object is null in received data  
we get an exception on JavaScript code and no data appear. 

can any one tell me how to fix it 
Boyan Dimitrov
Telerik team
 answered on 10 Jun 2015
11 answers
1.3K+ views

I'm trying to use the databound event with an MVC Kendo Grid, but DataBound is not in the list of options.  I really need a javascript method to fire after the data is rendered to make use of it, and based research, I really can only do it with the databound event.  I'm using version 2015.1.429.340 of the dll, which is the most recent I could find. I have Sync, Push, RequestEnd, many other events available.  Just not DataBound.  

 

My code looks like this:

 

@(Html.Kendo().Grid<type>()
                .Name("name")
                .Columns(columns =>
                {
                    column stuff
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                            .Read(read => read.Action("method", "controller", new { id = "idstuff" }))
                            .Events(events => events.DataBound("method") )      
                )                
                .ToClientTemplate()

)

 

I hover over the red squiggly on DataBound and I see:

 

Kendo.Mvc.UI.Fluent.DataSourceEventBuilder does not contain a definition for DataBound and no extension method for DataBound accepting the first argument of type 'Kendo.Mvc.UI.Fluent.DataSourceEventBuilder' could be found.

 

Can someone please help me rectify this issue?

 

Thanks!

 

 

Alex
Top achievements
Rank 1
 answered on 10 Jun 2015
1 answer
153 views

Are we able to bind the left and right side of the sliders to ng-models? For example, this is what I expect to be able to do:

http://dojo.telerik.com/OCuTI/73

Kiril Nikolov
Telerik team
 answered on 10 Jun 2015
5 answers
1.2K+ views

Short summary:

 - Enabled virtual scrolling of Grid

 - Using Remote data source with paging

 - When the user resizes our UI, it may adjust the Width of the Grid

 - If this happens, our columns are set to wrap their contents

 - After columns wrap, it appears the internal Kendo GRID logic does not recalculate the virtual scrolling offset/height/position so rows at the bottom of the grid are "lost" and can no longer be reached.

 Best seen via demo: http://dojo.telerik.com/@nkoterba@blackpointcyber.com/EMeqI/3

 Run the demo.  Then scroll down to the very last record, which has ID 11077.

 Then use the resizer in the DOJO window to **reduce** the width of the grid...notice how rows disappear and record 11077 is no longer even reachable.

 

Thoughts? Suggestions? on how to handle/fix this?  It seems like the Kendo Grid should watch for resize activity and when it happens, ensure the internal scrolling logic is re-calculated so that users can reach bottom of list.

Dimo
Telerik team
 answered on 10 Jun 2015
3 answers
1.5K+ views
For strings which are too long for a column, an ellipsis is appearing at the end of the string. When I hover over that text, shouldn't I get some "bubble help" or something which shows the entire string?
Per
Top achievements
Rank 1
 answered on 10 Jun 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?