Telerik Forums
Kendo UI for jQuery Forum
3 answers
761 views
We have a string column where a user types in "foo" and wants to return "alphafoo", "dogfoodog" as well as "foo". How can I change the column filter to allow automcomplete to use contains logic instead of starts with?
Kiril Nikolov
Telerik team
 answered on 03 Feb 2016
2 answers
516 views

 I would like to run code in the viewModel after the page has loaded/rendered.

e.g.  <div id="terminalForm" data-bind="events: {onload: addValidator}" >

My problem I'm trying to solve is attaching a validator , which can only be done after the template has been rendered. 

$("#terminalForm").kendoValidator().data("kendoValidator");

 

 I'm building a spa app, and not sure it it's preventing the onload event firing or if the kendo bind doesn't support it.

 any help appreciated.

cheers,

 

 

David
Top achievements
Rank 1
 answered on 02 Feb 2016
3 answers
414 views

I'm stumped on how to implement a foreign Key dropdownlist in a custom popup editor template for a grid.  The scenario is quite common so I'm curious as to why I can't find an implementation of this.  For example, say you have an Orders table with an inter column called CustomerId.  This is a foreign key to a table called Customer, which also has the column CustomerName.  Now I build a grid for orders and I want to use a custom popup editor template because I want to change the layout.  How do I provide my user the ability to use a "Customer" dropdownlist that is populated with all the customers and id edit mode, is pre-selected to the current dataItems CustomerId?

I have tried creating a custom dropdown editor template with it's own datasource and it seems to work for the non-custom template, but it DOESN'T work for a custom one.  How do you bind this?   There does not appear to be an easy way to get to $scope to set the widget's datasource.

 Environment:  Kendo 2016.1.112,  AngularJS v1.3.15,  Windows 7 64bit,  Google Chrome Version 38.0.2125.111 m

            $scope.customers = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: 'api/customers',
                        dataType: 'json',
                        type: 'GET'
                    },
                },
                schema: {
                    model: {
                        id: "customerId",
                        fields: {
                            customerId: { type: "number" },
                            customerName: { type: "string" },
                        }
                    }
                },
                serverPaging: false,
            }),

            $scope.customerDropDownEditor = function customerDropDownEditor(container, options) {
                //specify the value field in the "data-bind" attribute
                $('<input required data-text-field="customerName" data-value-field="customerId" data-bind="value:customerId"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataSource: $scope.customers
                });
            },

Alexander Valchev
Telerik team
 answered on 02 Feb 2016
5 answers
387 views

Hello all

I have the following model

 

public class MyModel
    {
        public MyModel()
        {
            SomeList = new List<string>();
        }
        public int ServiceId { get; set; }   

        [UIHint("ModifierListEditor")]
        public List<string>SomeList  { get; set; }
    }

 This has an editor bound to a list of string. I want the editor to consist of 4 kendo autocomplete elements. Each element will be an element of the list.

How do I accomplish this?

 

Boyan Dimitrov
Telerik team
 answered on 02 Feb 2016
4 answers
336 views

Hello,

After upgrading to lastest version (2016Q1) the dropdownlists in my application using custimized templates stopped working with the following error: The 'optionLabel' option is not valid due to missing fields.

my code is similar to:

$("#mylist").kendoDropDownList({
    optionLabel: "Select ...",
    autoBind: true,
    dataSource: recordDataSource,
    dataTextField: "recordId",
    dataValueField: "recordId",
    filter : "contains",
    template: '#: firstName # #: lastName #',
    valueTemplate: '#: firstName # #: lastName #'
});

Datasoruce is made by 3 columns recordId, firstName, lastName


Bob
Top achievements
Rank 1
 answered on 02 Feb 2016
1 answer
155 views

We currently use the JQueryUI accordion (http://api.jqueryui.com/accordion/), and are looking to convert to the Kendo PanelBar. However, there's some functionality in the accordion that we've come to rely on, and I need to see if there are equivalents or workarounds in the PanelBar before we actually switch.

First off, this is the HTML we'll be using:

<ul id="accordion">
    <li id="header_1_header">
        Header 1
        <div id="header_1_accordion">
            CONTENT 1
        </div>
    </li>
    <li id="header_2_header">
        Header 2
        <div id="header_2_accordion">
            CONTENT 2
        </div>
    </li>
    <li id="header_3_header">
        Header 3
        <div id="header_3_accordion">
            CONTENT 3
        </div>
    </li>
    <li id="header_4_header">
        Header 4
        <div id="header_4_accordion">
            CONTENT 4
        </div>
    </li>
</ul>

And this is my first pass at the init:

$('#accordion').kendoPanelBar({
    expandMode: 'single',
    activate: function(e) {
        var header_id = e.item.id;
        var content_id = $('#' + e.item.id).find('div:first').attr('id');
                     
        switch(header_id) {
            case 'header_1_header':
                header1Function();
                break;
            case 'header_4_header':
                header4Function();
                break;
        }
                             
        if (errorExists)
            validateSection('#' + content_id);
    }
});

Our primary use of the accordion functionality is for handling error messages - validating a section at a time, opening the first section w/ an error on attempted save, and clearing the errors for a section when it's closed. 

First off, is there a better way to get the content div than $('#' + e.item.id).find('div:first').attr('id')? In the JQueryUI accordion there are built in functions to get the content (div) based on the parent (li).

Second, is there any functionality built in to the panelbar to get the currently selected section and the newly selected section? For example, if header_4_header was open, and I clicked header_1_header, I'd want to know header_4_accordion as the "old" section, and header_1_accordion as the "new" section. If all we can get is the IDs for the headers (li) that's fine as well.

Finally, is there any way, outside of the init, to get the currently selected panel (the div preferrably, not the li)? This would be for clearing error messages based on the newly-active section - ie. click header_2_header and hide the errors in header_3_accordion.

Ashleigh L
Top achievements
Rank 1
 answered on 02 Feb 2016
1 answer
72 views

Hi,

I have a ViewModel, which has a collection field ("Buildings") which should be sent back to the server and a field to fill select lists from ("BuildingsData"):

var model = kendo.observable({
    Buildings: [],
    BuildingsData: [{ Id: 1, Title: "Building1" }, { Id: 2, Title: "Building2" }, { Id: 3, Title: "Building3" }]
});
I have a <div> element bound to the Buildings field:

<div data-bind="source: Buildings" data-template="Building"></div>

 And a template to render a single building:

<script type="x-kendo-template" id="Building">
    <select data-bind="source: parent().parent().BuildingsData, value: BuildingId" data-text-field="Title", data-value-field="Id" data-value-primitive="true"></select>
</script>

What I'd like to achieve is that a building could be selected only once.

For example, I have 3 elements in the Buildings array; so after I select a value in the first dropdown, it should disappear from the two remaining.

When I reset the selection, the previously selected value should appear in all dropdowns again.

But I am confused what is the best way to implement such a behavior. I'd like to use shared data source (BuildingsData will never be changed) and cause as little refresh operations as possible.

Thanks.

Georgi Krustev
Telerik team
 answered on 02 Feb 2016
1 answer
146 views

Hello

Is it possible to make the scheduler auto scroll when dragging an event?
With "autoScroll: true" on a kendoDraggable object it works for items dragged in to the scheduler from a grid.
But how can it be done for an event already planned in the scheduler?

Thanks

Bjorn

Vladimir Iliev
Telerik team
 answered on 02 Feb 2016
1 answer
115 views

Hi

in a TreeList (and in Angular TreeView) it is possible to drag a whole branch to a new parent node.
Is there a work-around to achieve this with the TreeView Control?

Regards

Alex

 

Alex
Top achievements
Rank 1
Iron
 answered on 02 Feb 2016
1 answer
170 views

I'm currently facing the problem that I have a splitter in a tab of a tabstrip containing a treeview, listview and treelist. First I select an item from the treeview. The change trigges a filtering of the listview. Then I doubleclick an item of the listview that triggers a filter of the treelist. At the same time the filter/selection of the treeview and listview resets and I have no idea why. And it happens as soon as I do this:

var f = $("#treelist").getKendoTreeList().dataSource;
f.filter(
    {
        "field": "Status",
        "operator": "eq",
        "value": "!"
    }
);

CS
Top achievements
Rank 2
 answered on 02 Feb 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?