Telerik Forums
Kendo UI for jQuery Forum
2 answers
200 views

Hi:

The grid is just part of a detail form, and the data for the grid is in memory, so the postback from the cancel button is very bad.

Phil

<!DOCTYPE html>
<head>
    <title>Author Design - snippet</title>
    <style>
        body {
            font-family: Tahoma;
            font-size: 18px;
            color: navy;
            margin: 0;
        }
        #grid .k-grid-toolbar
        {
            padding: .6em 1.3em;
        }
        .add-label
        {
            vertical-align: middle;
            padding-right: .5em;
        }
        #existing
        {
            vertical-align: middle;
        }
        .toolbar {
            float: right;
        }
    </style>
    <link href="../../content/kendo/kendo.common-bootstrap.min.css" rel="stylesheet" />
    <link href="../../content/kendo/kendo.blueopal.min.css" rel="stylesheet" />
    <script src="../../scripts/jquery-1.9.1.min.js"></script>
    <script src="../../scripts/kendo/kendo.all.js"></script>
</head>
<body>
    <script type="text/x-kendo-template" id="addTemplate">
        <div class="toolbar">
            <label class="add-label" for="existing">Add existing:</label>
            <input type="search" id="existing" style="width: 300px"/>
        </div>
    </script>
    <div style="width: 600px;">
        <div id="AuthorsGrid"></div>
    </div>
    <script type="text/javascript">
        //
        //
        var aData = [{ Id: 1, Name: "Joe" }, { Id: 2, Name: "Jane" }];
        $(document).ready(function () {
            //
            $('#AuthorsGrid').kendoGrid({
                dataSource: aData,
                width: 400,
                toolbar: [{ name: 'create', text: " Add " },
                    { template: $("#addTemplate").html() }],
                columns: [
                    { field: 'Id', hidden: true },
                    { field: 'Name', title: 'Name', width: '350px' },
                    { command: 'destroy', title: ' ', width: 110 }
                ],
                editable: 'popup'
            });
            //
            var AuthorGrid = $('#AuthorsGrid').data('kendoGrid');
            //
            var authorData = [{ "Id": 11, "Name": "Andy Hunt" }, { "Id": 10, "Name": "Ben Albahari" },
                { "Id": 4, "Name": "Bill Wagner" }, { "Id": 1, "Name": "Bob Martin" },
                { "Id": 15, "Name": "Chad Fowler" }, { "Id": 12, "Name": "Dave Thomas" },
                { "Id": 6, "Name": "Fabrice Marguerie" }, { "Id": 2, "Name": "James Newkirk" },
                { "Id": 8, "Name": "Jim Wooley" }, { "Id": 3, "Name": "Jon Skeet" },
                { "Id": 9, "Name": "Joseph Albahari" }, { "Id": 5, "Name": "Joseph Rattz Jr." },
                { "Id": 16, "Name": "Julie Lerman" }, { "Id": 14, "Name": "Kent Beck" },
                { "Id": 17, "Name": "Rowan Miller" }, { "Id": 7, "Name": "Steve Eichert" },
                { "Id": 13, "Name": "Venkat Subramaniam" }];
            $("#existing").kendoDropDownList({
                dataTextField: "Name",
                dataValueField: "Id",
                dataSource: { data: authorData },
                optionLabel: "Select an Author ...",
                change: function (e) {
                    // handle selected event
                    var dataId = this.select() - 1;
                    if (dataId != -1) {
                        var dataItem = this.dataSource.at(dataId);
                        if (AuthorGrid.dataSource.get(dataItem.Id) === undefined) {
                            // alert(dataItem.Name + ' (' + dataItem.Id + ')' + dataId);
                            AuthorGrid.dataSource.add(dataItem);
                        }
                    }
                    //
                    e.preventDefault();
                }
            });
        });
    </script>
</body>
</html>

Boyan Dimitrov
Telerik team
 answered on 11 May 2015
8 answers
1.0K+ views
Hi,

Trying to use MVVM with a datasource and a list. Rendering works great, but there is a strange issue with the dropdown lists. When you tab between them it works fine, but when you set the value of a dropdown, it loses it focus.

See the jsfiddle here: http://jsfiddle.net/mivano/zNLNy/638/

However, that behaves differently than the example located here: http://demos.kendoui.com/web/mvvm/widgets.html

Go to the dropdownlist, use the arrow keys to select an item and see that the focus is indeed in the dropdownlist.
Try the same thing in the jsfiddle and the focus is lost.

BTW, this does not only apply to the dropdownlist, but it is more clearly visible. Anytime a set is executed, the template redraws. That might be intended, but not what I want.

So what is the best way to deal with this?

thanks Michiel

Petyo
Telerik team
 answered on 11 May 2015
3 answers
130 views

Greetings,

Im currently using a columnchart which calculates a maximum on a number field and uses a timestamp value for the date axis. Im currently using the "fit" as baseUnit for my dateAxis. However I was wondering if it might be possible to display 3 maximums in 1 hour (baseUnit: hours) without having to change the interval to 20 minutes.

So my horizontal axis would still display hours ("8:00", "9:00") but I would see 3 maximum values within each hour and this on the moment they happend. 

Is this currently possible to implement the above?

Thanks in advance!

 

 

 

T. Tsonev
Telerik team
 answered on 11 May 2015
5 answers
363 views

When a grid is setup with inline editing and paging, adding or editing a record and changing the current page WITHOUT clicking the Inline 'Update' or 'Cancel' buttons results in the data being updated within the datasource (as demonstrated by the 'change' event on the datasource being triggered) but without the correct operation. The 'cancel' and 'save' event on the grid are also not triggered.

 

This behavior is demonstrated by the following:

http://dojo.telerik.com/@djones/uKIjI/2

Kiril Nikolov
Telerik team
 answered on 11 May 2015
1 answer
134 views

Hello, I have some issue about gantt dependency

 we need to have an attribute "Lag" on dependency, but Kendo seems not to support it now.

So, can I have some way to capture the depdency dooubl-click event and let user edit dependecy info(including lag), just like Task pop-up editor

Dimitar Terziev
Telerik team
 answered on 11 May 2015
2 answers
90 views
Hi Team,

I am facing issue with kendo editor with IOS. Whenever i am adding content inside editor, i am not getting scroll inside the content. Height is increasing of the editor. So it will take full space according to the content. So overflow scroll not coming inside content.

Thanks,
Nirav
Nirav
Top achievements
Rank 1
 answered on 10 May 2015
1 answer
270 views

Please tell me what I'm doing wrong?

PHP back end editing.php

01.<?php
02.require_once 'lib/DataSourceResult.php';
03.require_once 'lib/Kendo/Autoload.php';
04. 
05.if ($_SERVER['REQUEST_METHOD'] == 'POST') {
06.    header('Content-Type: application/json');
07. 
08.    $request = json_decode(file_get_contents('php://input'));
09. 
10.    $result = new DataSourceResult('mysql:host=localhost;dbname=mydb;charset=utf8', 'root', '********');
11. 
12.    $type = $_GET['type'];
13. 
14.    $columns = array('project_id', 'code_tk', 'title', 'small_title');
15. 
16.    switch($type) {
17.        case 'create':
18.            $result = $result->create('projects', $columns, $request->models, 'project_id');
19.            break;
20.        case 'read':
21.            $result = $result->read('projects', $columns, $request);
22.            break;
23.        case 'update':
24.            $result = $result->update('projects', $columns, $request->models, 'project_id');
25.            break;
26.        case 'destroy':
27.            $result = $result->destroy('projects', $request->models, 'project_id');
28.            break;
29.    }
30. 
31.    echo json_encode($result,JSON_NUMERIC_CHECK);
32. 
33.    exit;
34.}
35.?>

HTML5/JavaScript front end index.html

01.<!DOCTYPE html>
02.<html>
03.<head>
04.    <!--<base href="http://demos.telerik.com/kendo-ui/grid/editing">-->
05.    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
06.    <title></title>
07.    <link rel="stylesheet" href="css/kendo.common-office365.min.css" />
08.    <link rel="stylesheet" href="css/kendo.office365.min.css" />
09.    <!--<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />-->
10.    <!--<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.office365.min.css" />-->
11. 
12.    <script src="js/jquery.min.js"></script>
13.    <script src="js/kendo.all.min.js"></script>
14.</head>
15.<body>
16.<div id="example">
17.    <div id="grid"></div>
18. 
19.    <script>
20.        $(document).ready(function () {
21.            var crudServiceBaseUrl = "editing.php",
22.                    dataSource = new kendo.data.DataSource({
23.                        transport: {
24.                            read:  {
25.                                url: crudServiceBaseUrl + "?type=read",
26.                                contentType: "application/json; charset=utf-8",
27.                                type: "POST",
28.                                dataType: "json"
29.                            },
30.                            update: {
31.                                url: crudServiceBaseUrl + "?type=update",
32.                                contentType: "application/json; charset=utf-8",
33.                                type: "POST",
34.                                dataType: "json"
35.                            },
36.                            destroy: {
37.                                url: crudServiceBaseUrl + "?type=destroy",
38.                                contentType: "application/json; charset=utf-8",
39.                                type: "POST",
40.                                dataType: "json"
41.                            },
42.                            create: {
43.                                url: crudServiceBaseUrl + "?type=create",
44.                                contentType: "application/json; charset=utf-8",
45.                                type: "POST",
46.                                dataType: "json"
47.                            },
48.                            parameterMap: function(options, operation) {
49.                                if (operation !== "read" && options.models) {
50.                                    return {models: kendo.stringify(options.models)};
51.                                }
52.                            }
53.                        },
54.                        batch: true,
55.                        pageSize: 20,
56.                        schema: {
57.                            model: {
58.                                id: "project_id",
59.                                fields: {
60.                                    project_id: { editable: false, nullable: false },
61.                                    code_tk: { type: "number", validation: { min: 0, required: true } },
62.                                    title: { type: "string" },
63.                                    small_title: { type: "string" }
64.                                }
65.                            }
66.                        }
67.                    });
68. 
69.            $("#grid").kendoGrid({
70.                dataSource: dataSource,
71.                navigatable: true,
72.                pageable: true,
73.                height: 550,
74.                toolbar: ["create", "save", "cancel"],
75.                columns: [
76.                    "code_tk",
77.                    { field: "title", title: "title", width: 120 },
78.                    { field: "small_title", title: "small_title", width: 120 },
79.//                    { field: "Discontinued", width: 120 },
80.                    { command: "destroy", title: " ", width: 150 }],
81.                editable: true
82.            });
83.        });
84.    </script>
85.</div>
86. 
87. 
88.</body>
89.</html>

Ser
Top achievements
Rank 1
 answered on 09 May 2015
1 answer
538 views

We have a kendo Grid, and then we have an editor template, which is named after the view model.

Inside the viewModel we have this:

 

[Required( ErrorMessage = "Please enter a name")]

public string Name{ get; set; }

 

Then inside the javascript, I create another custom rule like this :

                var form = $("#AdhocGroupForm")

                form.kendoValidator({
                                messages: {
                                                nameexists: "This name already exists, please choose another"
                                },
                                rules: {
                                                nameexists: function(input) {
                                                                if (input.is("[name=Name]")) {
                                                                                 return input.val() === "Tom";
                                                                                }
                                                                return true;
                                                }
                                }
                });

 

Of course, this does nothing right now. I'm simply trying to set this up and get to the point where it's called, then I'll flesh it out to check if the provided name exists, via AJAX. However, it's not called, and that is part of the issue.

The other part is that when I do this:

                var validator = $("#AdhocGroupForm").kendoValidator().data("kendoValidator");

I expect to get an object that I can call 'validate' on ( I assume this is what I need to do to trigger validation although some things I've seen make me think it will fire on each keypress ). However, this returns null. kendoValidator() returns an object, but this has no validate method, either. I believe this is my core issue, I don't have a validator to work with.The form and textbox html in my page looks like this:

 

                <form action="/AdhocGroup/AdhocGroupForm/AdhocGroupForm" data-role="validator" method="post" novalidate="novalidate">
                <input class="input k-textbox" data-val="true" data-val-nameexists="data-val-nameexists" data-val-required="Please enter a name" id="Name" name="Name" style="width: 200px;" type="text" value="" data-bind="value:Name">

The validation for the required field, with my custom error message, works fine.This is my first day using these validators, so it's possible I've missed something obvious. Thanks for any advice.

Alexander Valchev
Telerik team
 answered on 08 May 2015
2 answers
239 views

Hi, when I add a textbox to a Kendo Window, the default browser styling of the border (and possibly other things) is no longer present.  See example below I copied from Kendo UI Dojo and run in IE11.  I'm trying to dig through styles to override, but having no luck so far.

 

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
</head>
<body>
 
        <div id="example">
          <input type="text" placeholder="test"></input>
            <div id="window">
              <input type="text" placeholder="test"></input>
                <div class="armchair"><img src="../content/web/window/armchair-402.png" alt="Artek Alvar Aalto - Armchair 402" /> Artek Alvar Aalto - Armchair 402</div>
                <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>
 
                <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>
 
                <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p>
 
                <p>Source: <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a></p>
            </div>
 
            <span id="undo" style="display:none" class="k-button">Click here to open the window.</span>
 
            <script>
                $(document).ready(function() {
                    var window = $("#window"),
                        undo = $("#undo")
                                .bind("click", function() {
                                    window.data("kendoWindow").open();
                                    undo.hide();
                                });
 
                    var onClose = function() {
                        undo.show();
                    }
 
                    if (!window.data("kendoWindow")) {
                        window.kendoWindow({
                            width: "600px",
                            title: "About Alvar Aalto",
                            actions: [
                                "Pin",
                                "Minimize",
                                "Maximize",
                                "Close"
                            ],
                            close: onClose
                        });
                    }
                });
            </script>
 
            <style>
 
                #example
                {
                    min-height:500px;
                }
 
                #undo {
                    text-align: center;
                    position: absolute;
                    white-space: nowrap;
                    padding: 1em;
                    cursor: pointer;
                }
                .armchair {
                    float: left;
                    margin: 30px 30px 120px 30px;
                    text-align: center;
                }
                .armchair img {
                    display: block;
                    margin-bottom: 10px;
                }
            </style>
        </div>
 
 
</body>
</html>

Bob
Top achievements
Rank 1
 answered on 08 May 2015
1 answer
145 views

I'm trying to use the grid with this xml. The idea on the XML is that you have a resource, which has multiple resources. Each resource has an ID and name attribute. I'd like to be able to group them and sort them. All I'm getting is a loading icon. Thanks in advance.

C

Iliana Dyankova
Telerik team
 answered on 08 May 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?