Telerik Forums
Kendo UI for jQuery Forum
3 answers
2.1K+ views

Hello, 

 

I'm trying to get a grid with a column editing with a drop down list. I'm following this example, but although I get the values translated correctly and saved and loaded correctly, whenever I start editing the Drop-Down list doesn't have the value, as if it failed reading the current value from the row. 

 

Here is the relevant code snippets: 

 

Dictionary data source, translation helper and drop down callback: 

 

var puDict = new kendo.data.DataSource({
        type: "json",
        transport: {
            read: {
                url: "getdict",
            }
        },
        schema: {
            model: {
                id: "code",
                fields: {
                    code: {nullable: false},
                    name: {nullable: false}
                }
            }
        }
    });
    puDict.fetch();
 
    function translateType(type) {
        return puDict.get(type).name;
    }
     
    function typeDropDownEditor(container, options) {
        $('<input required data-text-field="name" data-value-field="code" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                            autoBind: false,
                            dataSource: puDict
 
                        }
                )
    }

 

Here is the fields part of the grid: 

 

columns: [
                {field: "code", title: "Code (Unique)"},
                {field: "name", title: "Unit name"},
                {field: "type", title: "Unit type", editor: typeDropDownEditor, template: "#=translateType(type)#"},
                {command: ["edit", "destroy"], title: " "}
            ]

 

And `getdict` returns a JSON array that looks like this - 

[{
    "code": "TYPE1",
    "name": "Something of Type One"
},
{
    "code": "TYPE2",
    "name": "Something of Type Two"
}]

 

The grid shows the string "Something of Type One" and "Something of Type Two" correctly, so the translation works. Also, updating works correctly (and server side only knows about the code ("TYPE1", "TYPE2")), so the Drop Down also knows how to translate values back and forth. 

 

The only problem is that when I click on "edit", the dropdown is initially empty (nothing selected), instead of having the current value selected. 

Itai
Top achievements
Rank 1
 answered on 10 Mar 2016
3 answers
862 views

Hi,

I need to add additional fields in the pop up event of the scheduler, this data should be saved in Database eventually. 

 fields: {

                                taskId: { from: "id", type: "number" },
                                title: { from: "title", defaultValue: "No title", validation: { required: true } },
                                start: { type: "date", from: "start" },
                                end: { type: "date", from: "end" },
                                startTimezone: { from: "startTimezone" },
                                endTimezone: { from: "endTimezone" },
                                description: { from: "description" },
                                recurrenceId: { from: "recurrenceId" },
                                recurrenceRule: { from: "recurrenceRule" },
                                recurrenceException: { from: "recurrenceException" },
                               attendees: { from: "attendees", defaultValue: 1 },
                                projects: {from: "projID"},
                                isAllDay: { type: "boolean", from: "isAllDay" }

Attendees, projects are 2 additional fields .

Attendees,projects are not showing up in e of the event when I am trying to save the event. 

Vladimir Iliev
Telerik team
 answered on 10 Mar 2016
3 answers
205 views

What I'm trying to replicate is the bit on the left of their schedule in http://wheniwork.com/

...  the profile pic and name part with an angular directive. 

 

I'm extending the timeline view and overriding _createColumnsLayout and _createRowsLayout. 

This is a very close (older) dojo example of how I'm doing this:

  • http://dojo.telerik.com/eqUl/103 - except the binding are kendo  rather than angular. If I can get the angular binding to work I can pretty much continue on my way. 

Here is my typescript file... the typings in kendo.all are incomplete ... so I've had to cast to 'any' quite a bit ... and well guess. More in the typescript files would be lovely ;-) 

 

module Hr.KendoThings {
    var extend = $.extend,
        k: any = kendo,
        ui: any = kendo.ui,
        kDate: any = k.date,
        SchedulerTimelineView = ui.TimelineView;
        
//NS = ".kendoTimelineWeekView";
    function customCreateLayoutConfiguration(name, resources, inner, something) {
        var resource = resources[0];
        if (resource) {
            var configuration = [];
            var data = resource.dataSource.view();
            for (var dataIndex = 0; dataIndex < data.length; dataIndex++) {
                var defaultText = kendo.htmlEncode(k.getter(resource.dataTextField)(data[dataIndex]));
                var dataItem = data[dataIndex];
                 
    var templateText = `
                    <div>{0}</div>
                    <employee-pic id=\"'{0}'\"></employee-pic>`;
                templateText = kendo.format(templateText, dataItem.Id);
                var template = kendo.template("<a href='javascript: void(0)'>#=data.Email#</a>");
                var template2 = kendo.template("<a href='javascript: void(0)'>{{dataItem.Email}}</a>");
                var obj = {
                    text: template2(dataItem),// t(dataItem),
                    className: "k-slot-cell"
                };
                var element = $(template2(data));
                var scope = something.$angular_scope; //scope from _createColumnsLayout
                //this.angular is not defined :(
                //this.angular('compile', function () {
                //    return {
                //        elements: element,
                //        data: [{ dataItem: data }]
                //    };
                //});
                //obj[name] = customCreateLayoutConfiguration(name, resources.slice(1), inner);
                //text version
                configuration.push(obj);
                //configuration.push(element);
            }
            return configuration;
        }
        return inner;
    }
    let options: any = {
        nextDate: function () {
            return kDate.nextDay(this.startDate());
        },
        calculateDateRange: function () {
            var selectedDate = this.options.date,
                start = selectedDate,
                end = kDate,
                dates = [];
                
            for (let index = 0, length = 7; index < length; index++)
            {
                dates.push(start);
                start = kDate.nextDay(start);
            }
            this._render(dates);
        },
        _createColumnsLayout: function (resources, inner) {
            var that = this;
            return customCreateLayoutConfiguration("columns", resources, inner, that);
        },
        _createRowsLayout: function (resources, inner) {
            var that = this;
            return customCreateLayoutConfiguration("rows", resources, inner, that);
        },
    };
    var SchedulerTimelineWeekView = SchedulerTimelineView.extend(options);
    MyAndromeda.Logger.Notify("Defining SchedulerTimelineWeekView");
    extend(true, ui, {
        SchedulerTimelineWeekView: SchedulerTimelineWeekView
    });
     
}

 

What would the easiest way of doing this? 

I presume I will need to tie in the $ events as well? 

 

Best Regards,

Matt 

Matt
Top achievements
Rank 1
 answered on 10 Mar 2016
1 answer
207 views
Hi Admin,

We have a particular case which is creating a recurring event with the rule of repeating 3 times every Tuesday Weekly starting from 14/3/2016 13:00 to 13:30 as below:
Start Time: 2016-03-14 13:00:00.000
End Time: 2016-03-14 13:30:00.000
Recurrency Rule: FREQ=WEEKLY;COUNT=3;BYDAY=TU

Regarding to the rfc5545 icalendar spec (3.8.5.3.  Recurrence Rule) in which Kendo UI Scheduler follows, it specifies that:
The recurrence set is generated by considering the initial "DTSTART" property along with the "RRULE", "RDATE", and "EXDATE" properties contained within the recurring component;
The "DTSTART" property defines the first instance in the recurrence set; 
The "DTSTART" property value SHOULD be synchronized with the recurrence rule, if specified;  
The final recurrence set is generated by gathering all of the start DATE-TIME values generated by any of the specified "RRULE" and "RDATE" properties, and then excluding any start DATE-TIME values specified by "EXDATE" properties.  

Therefor,  it should generate 3 instances including Mon 14/03/2016, Tue 15/03/2016 and Tue 22/03/2016 (*). However, the Kendo UI demo with this sample gave 3 instances which are Tue 15/03/2016, Tue 22/03/2016 and Tue 29/03/2016.

Could you please advise how we can configure Kendo UI to have the result as (*)

Thanks so much for your help.

Georgi Krustev
Telerik team
 answered on 10 Mar 2016
3 answers
458 views

Hi,

i have a question, i have a grid populated with local data (array of data), i need to insert more rows to my data array and then refresh the grid without the Grid redraw all the items. For example if i have 20 items on my grid and into my data array and then the user execute load more (other 20), into my code  load the 20 more records into my array data (pushing) and the dataBound event is fired. Then the Grid takes the 40 records again not just the 20 more.

Can some one help me?

Sorry about my english.

Thanks in advance.

Petyo
Telerik team
 answered on 10 Mar 2016
1 answer
280 views

Hello,

I have an error using the editor udner IE 11. I have a drop down list in the main page, and below that I have a div called dynamicContentDiv. Thehtml content of that div is taken from the serveraccording to the value of the top dropdownlist. For example, if the value is A, then the content taken from the server (razor), is a text field, and an Editor. If the value is B, then the content is a checkbox and 2 Editors...etc. 

All items are inside a form with a button to submit values to the server. 

On the first load, the dropdown has a default value set, everything is working well. and I can use submit button. When I change the value of the dropdown list, I get the new content from the server, and I replace the div content using $("#dynamicContentDiv").html(data). And data is what I'm getting from the server as an html content with the kendo ui editor. When I click on the submit button, I get this error: Access denied, and when I double click on that exception using F12 Developer tool, it redirects me to the kendo.web.js file (see the picture). 

This occurs only using IE, it works well using Chrome and Firefox. 

 

Thank you for your quick help.

 

 

 

 

Ianko
Telerik team
 answered on 10 Mar 2016
3 answers
245 views

The problem is summarized in the attached.  Many of the buttons icons look this way, with the icon flush to the top of the parent container instead of vertically centred.

I'm including the following CSS files and nothing else: (form the 2016 Q1 Release).  How can I fix this?

    <link rel="stylesheet" href="/CSS/Kendo/kendo.common.min.css" />
    <link rel="stylesheet" href="/CSS/Kendo/kendo.metro.min.css" />

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 09 Mar 2016
1 answer
253 views

Hi,

I try to implement the kendo grid with angular.js and my backend is web (C#).  I found there is not many on the internet except one with OData and not so much doc about it.

Can you provide me a sample with inline editing for all the basic CRUD for  

I implemented the read and the create but the problem of the create it's on the callback here how I created my .

            return new kendo.data.DataSource({

                transport: {
                    read: function (options) {

                        hideShowGridLoadingSpinner(true);

                        var webapi = new kendo.data.transports.webapi({ prefix: "" });

                        var params = webapi.parameterMap(options.data);

                        _options = options;

                        $http.get("/api/country", { params: params }).success(onSuccess).error(onError);
                    },
                    create: function (options) {

                        hideShowGridLoadingSpinner(true);

                        var webapi = new kendo.data.transports.webapi({ prefix: "" });

                        var params = webapi.parameterMap(options.data);

                        $http.post("/api/country",options.data).success(onSuccess).error(onError);
                    }
                },
                pageSize: 10,
                serverPaging: false,
                serverSorting: false,
                serverFiltering: false,
                schema: $.extend({}, kendo.data.schemas.webapi, { data: "data", total: "total", errors: "errors" }),
                schema: {                    
                    model: {
                        id: "id",
                        fields: {
                            id: { type: "number", editable: false },
                            name: { type: "string", validation: { required: true } }
                        }
                    }
                }

            });

Here the success  

 

        function onSuccess(data) {

            hideShowGridLoadingSpinner(false);

            if (data.errors == undefined) {
                _options.success(data.data);
            } else {
                _options.error();
                eventBus.showErrorNotification(data.errors);
            }            
        }

 

The main problem is the data returned is the object added so when I pass this to the success method all object in the grid are flush except the new one added.  Is normal but how I can update the grid with the new inserted data without doing a callback to the get method ?

 

Thanks

Gary
Top achievements
Rank 1
 answered on 09 Mar 2016
3 answers
377 views

In your demo for Tabstrip, I see that the collapsible divs and the tabs (LI - Tab1 and Tab2) span beyond the UL and outer div (<div id="tabstrip">). Is there any way you can help me make it the same width? Also make the tabs (tab1 and tab 2) have a margin in between them.

http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#configuration-collapsible

<div id="tabstrip">
    <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
</div>

 

Thanks a lot in advance for you help.

 

Konstantin Dikov
Telerik team
 answered on 09 Mar 2016
2 answers
82 views

Hi,

I encountered another issue while trying to select newly added item to the grid. The issue is, that previously selected items remains selected after forcing to select the only new item. Steps:

1. Selected a item/items in a grid

2. click Add button

3. Both old and new items are selected

Example: http://dojo.telerik.com/@Marcin/UyulO/2

 

Best regards

Marcin 

Dimiter Madjarov
Telerik team
 answered on 09 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?