Telerik Forums
Kendo UI for jQuery Forum
3 answers
230 views

Hi, 

I'm trying to get my Custom serverside error to work, but it won't show up in the interface.

Json.png shows the response with the JSON errors, in this request I have tested the Address field (Host on Part2.png). As you can see this is empty, but the other message on Constraint is shown. (Part1.png)

 If I look at the html, I see the first error message. What could it be that it is hiding the error message?

The HTML part of the address: 

<div class="editor-field ce-channel ce-ftpchannel ce-mailchannel ce-receivechannel ce-sendchannel" style="display: block;">    <input class="k-textbox" data-val="true" data-val-required="The Host field is required." id="ChannelConfigurationViewModel_address" name="ChannelConfigurationViewModel.address" data-bind="value:ChannelConfigurationViewModel.address">    <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: none;" data-for="ChannelConfigurationViewModel.address" data-valmsg-for="ChannelConfigurationViewModel.address" id="ChannelConfigurationViewModel.address_validationMessage" role="alert"><span class="k-icon k-warning"> </span>The Host field is required.<div class="k-callout k-callout-n"></div></div></div>

Indicia
Top achievements
Rank 1
 answered on 11 May 2015
10 answers
2.8K+ views
Hi,

I would like to programmatically add a column to the grid. I tried the following:

    grid.columns.push({ title: "Plan", field: "plan" });
    grid.refresh();

Inspection of the markup indicates that a new <col> element is added, but the <td> elements for the new column are not.

Is this possible?

Thanks,
Gary
Dimo
Telerik team
 answered on 11 May 2015
2 answers
202 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
133 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
373 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
142 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
91 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
272 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
544 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
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
Drag and Drop
Map
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
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?