Telerik Forums
Kendo UI for jQuery Forum
7 answers
1.1K+ views

Hello,

I encountered following problem: I am using custom delete dialog with 3 buttons.

1) When I click "Odregistrovat" the edit dialog appears, I edit the entry, save, everything OK.

2) When I repeat the step 1) after click on "Odregistrovat" the edit dialog appears for only a while and disappears again and again until I refresh the page. Then it works once and for the second and next tries it does not work again.

 

Do you know how to prevent this behaviour please?

 

PS: Video with the behaviour (first attempt works, second not) is available under following link: https://ulozto.cz/!bTCTMfnQ3cbD/editpopup-problem-rar

I would like to deliver runable project, but it is quite complex and big. Is it enough to deliver only below attached .cshtml?

 

With Kind Regards,

Martin.

Viktor Tachev
Telerik team
 answered on 12 Sep 2017
1 answer
219 views

I have two MVVM templates.

I want to delete one row from first template and replace that with some row of the second template.

is it possible??

Veselin Tsvetanov
Telerik team
 answered on 12 Sep 2017
3 answers
1.6K+ views

I would like to achieve the following with the Kendo Grid

1. Add a column menu to only one column

2. Remove all the default column menu items

3. Add two custom menu items

I would like to respond to the column menu items with a javascript function that invokes a grid refresh with a qualifier parameter. 

Any examples on how to accomplish the above tasks?  

Attached image illustrates what I'm looking for. 

Thanks in advance

Tsvetina
Telerik team
 answered on 12 Sep 2017
1 answer
228 views
Hello, I use AngularJS, when we modify our template in the kendo Editor, the editor replaces the <i class="material-icons">done</i> by <em>done>/em>, so that the icons are not displayed anymore when we generate the document in pdf. The problem is the data returned by the kendo editor when we edit and modify it. If we dont do any modification in the kendo editOR, the icons are well displayed. Could you please tell me what the problem is ?
Ianko
Telerik team
 answered on 12 Sep 2017
8 answers
2.0K+ views
I have a grid that is defined as follows:

$('#widgetsGrid').kendoGrid({
    dataSource: {
        type: 'json',
        transport: {
            read: '/widgets/widgetsList/'
        },
        pageSize: 10
    },
    columns: [
        {
            field: 'name',
            title: 'Name'
        },
        {
            field: 'description',
            title: 'Description'
        },
        {
            field: 'url',
            title: 'Url'
        }
    ],
    sortable: true,
    pageable: true,
    rowTemplate: kendo.template($('#widgetsListRowTemplate').html())
});

and a row template defined as follows:

<script id='widgetsListRowTemplate' type='text/x-kendo-tmpl'>
    <tr>
        <td>${ name }</td>
        <td>${ description }</td>
        <td><a href='${ url }'>${ url }</a></td>
    </tr>
</script>

However, all the rows are the same color because the alternating rows do not have the class='k-alt'.  Is there a way that I can apply the class='k-alt' to the alternating rows?

Regards,

John DeVight
Dhruv
Top achievements
Rank 1
 answered on 11 Sep 2017
2 answers
244 views

Hello. My target is make 2 charts with same colors of the items. I make this

<link rel="stylesheet" href="/analyticsRes/jsCharts/css/kendo.common.min.css" />
    <link rel="stylesheet" href="/analyticsRes/jsCharts/css/kendo.default.min.css" />
    <link rel="stylesheet" href="/analyticsRes/jsCharts/css/kendo.default.mobile.min.css" />
    <script src="/analyticsRes/jsCharts/js/kendo.all.min.js"></script>
 
<div id="chart-top" style="width:600px;height:350px;"></div>
 
<script>
$(function() {
 
    $('.top-td').closest('table').attr('id', 'top-table');
    $('.top-td').closest('tr').addClass('top-tr');
    $('.top-td').closest('.CVView').css('display', 'none');
    $('#top-table colgroup').remove();
    $('#top-table .PTColSizingCell').remove();
 
    $('#top-table tr').each(function() {
        if ($(this).hasClass('top-tr')) {} else {
            $(this).remove();
        }
    });
 
    var TopList = new Array();
    var tr = document.getElementById("top-table").getElementsByTagName("tr");
    for (var i = 0; i < tr.length; i++) {
        var td = tr.item(i).getElementsByTagName("td");
        TopList[i] = new Object();
        for (var j = 0; j < td.length; j++) {
            if (j == 0) {
                TopList[i]["category"] = td.item(0).innerText;
                TopList[i]["name"] = i;
            }
            if (j == 1) {
                TopList[i]["value"] = parseFloat(td.item(1).innerText.replace(/,/, '.'));
            }
            if (j == 2) {
                var id = td.item(2).innerText;
                if (id === "K_22") { TopList[i]["color"] = "#3f51b5" }
                if (id === "K_21") { TopList[i]["color"] = "#03a9f4" }
                if (id === "K_01") { TopList[i]["color"] = "#4caf50" }
                if (id === "K_11") { TopList[i]["color"] = "#f9ce1d" }
                if (id === "K_13") { TopList[i]["color"] = "#ff9800" }
                if (id === "K_88") { TopList[i]["color"] = "#ff5722" }
                if (id === "K_12") { TopList[i]["color"] = "#56ff22" }
                if (id === "K_10") { TopList[i]["color"] = "#e222ff" }
                if (id === "K_31") { TopList[i]["color"] = "#8d22ff" }
            }
        }
    }
 
 
    TopList.sort(function(a, b) {
        if (a.value < b.value) {
            return 1;
        }
        if (a.value > b.value) {
            return -1;
        }
        return 0;
    });
 
console.log(TopList);
 
    $("#chart-top").kendoChart({
        title: "Предложений по предприятиям",
        theme: "Material",
        dataSource: {
            data: TopList,
            group: {
                field: "name"
            },
            sort: {
                field: "category",
                dir: "asc"
            }
        },
        legend: {
            visible: true,
            position: "bottom"
        },
        seriesDefaults: {
            type: "column",
            gap: 0.1,
            spacing: 0.2
        },
        series: [{
            field: "value",
            colorField: "color",
            labels: {
                font: "14px Arial,Helvetica,sans-serif",
                template: "#= value #",
                visible: true
            },
            name: "#: group.items[0].category #"
        }],
seriesColors: ["#3f51b5", "#03a9f4", "#4caf50", "#f9ce1d", "#ff9800", "#ff5722", "#56ff22", "#e222ff", "#8d22ff"],
        valueAxis: {
            majorGridLines: {
                visible: false
            },
            visible: false,
        },
        categoryAxis: {
            majorGridLines: {
                visible: false
            },
            line: {
                visible: false
            },
            visible: false
        },
        tooltip: {
            visible: true,
            template: "#= series.name #: #= value #"
        }
    });
});
</script>
for one chart and the same code for the second chart. Finally the items of the charts has the same colors, but the legend has diffrent colors. How i can solve my problem? Thanks
Iliana Dyankova
Telerik team
 answered on 11 Sep 2017
3 answers
205 views

I have a tabstrip with multiple tabs, and each tab has its own contentUrl, so data is fetched using ajax.

I noticed that if you delete a tab, and reload the selected tab, it uses the old url from the removed tab. The tabstrip's contentUrls array still has the old values, that probably causes this.

Steps to reproduce:

1) Create a tabstrip with two tabs, with contentUrl set for both separately

2) Select the second tab

3) Remove the first tab (remove())

4) Reload the selected tab (select() and reload())

I suppose I need to manually update the contentUrls array?

Ivan Danchev
Telerik team
 answered on 11 Sep 2017
1 answer
308 views

Hello! I found that the “NumericTextBox”’s input field location is not correct, if we use “float” style for “<input>”. If you open the following example in Firefox:

http://dojo.telerik.com/eWiVE/2

It works fine in Chrome and Edge. Could you take a look at this issue? Or let me know if there’re alternative ways to align to right and work in all browsers.
Thank you!  

Orlin
Telerik team
 answered on 11 Sep 2017
4 answers
275 views

Hi,

I am using trying to use kendo chart with Angularjs (1.6.2) and typescript. I have a sample project created using Yeoman.

I have my kendo package also in the project folder. I have run the project using npm run serve

Gettting error: "index.js:23241 Error: The Kendo UI directives require jQuery to be available before AngularJS. Please include jquery before angular in the document.
    at createWidget (index.js:117598)
    at Object.link (index.js:118233)
    at index.js:9926
    at invokeLinkFn (index.js:19086)
    at nodeLinkFn (index.js:18475)
    at compositeLinkFn (index.js:17715)
    at compositeLinkFn (index.js:17718)
    at publicLinkFn (index.js:17580)
    at index.js:10495
    at Scope.$eval (index.js:26964) "<div kendo-chart="" k-legend="{ position: 'bottom' }" k-series-defaults="{ type: 'bar' }" k-series="[
                                 { field: 'nuclear', name: 'Nuclear electricity' },
                                 { field: 'hydro', name: 'Hydro electricity' },
                                 { field: 'wind', name: 'Wind electricity' }
                             ]" k-data-source="electricity" k-series-hover="onSeriesHover" style="height: 400px;">""

 

 

I have the below code in my index.html.

-------------------------------------------------------------------------

<div kendo-chart k-legend="{ position: 'bottom' }" k-series-defaults="{ type: 'bar' }" k-series="[
{ field: 'nuclear', name: 'Nuclear electricity' },
{ field: 'hydro', name: 'Hydro electricity' },
{ field: 'wind', name: 'Wind electricity' }
]" k-data-source="electricity" k-series-hover="onSeriesHover" style="height: 400px;"></div>

-------------------------------------------------------------------------

In my index.ts file, I have the below code

import * as $ from "jquery";
import * as angular from 'angular';
import {techsModule} from './app/techs/index';
import 'angular-ui-router';
import routesConfig from './routes';
import {main} from './app/main';
import {header} from './app/header';
import {title} from './app/title';
import {footer} from './app/footer';
import './index.scss';
import '@progress/kendo-ui/';
/// <reference path="./app/kendo/typescript/kendo.all.d.ts" />
angular
.module('app', [techsModule, 'ui.router','kendo.directives'])
.config(routesConfig)
.component('app', main)
.component('fountainHeader', header)
.component('fountainTitle', title)
.component('fountainFooter', footer);

-------------------------------------------------------------------------

Please give suggestions. I am new to angularjs and typescript...I have attached the project without the kendo package files which was earlier inside src/app/kendo folder.

 

Alex Hajigeorgieva
Telerik team
 answered on 08 Sep 2017
1 answer
221 views

Hi, not very familiar with the webpack tool, but its slow to build my SPA using VS2017 and JavaScriptServices, about 50 seconds.  Is there some way to cache the webpack output for the Telerik angular modules/css?  Specifically the requests :

 

Microsoft.AspNetCore.Hosting.Internal.WebHost: Information: Request starting HTTP/1.1 GET http://localhost:52626/dist/main.css?v=lTMQDsn6qiFEshoAdXck56k4BIPX0Y7qdkml_OMV67E
Microsoft.AspNetCore.Hosting.Internal.WebHost: Information: Request starting HTTP/1.1 GET http://localhost:52626/dist/main-client.js?v=9miPYLaRFn3FUiIl4DMnHaXSLA7W1TNPUmhx5OdN8Jw  

 seem to be part of the problem as the response are:

 

Microsoft.AspNetCore.Hosting.Internal.WebHost: Information: Request finished in 39309.1692ms 200 text/css; charset=UTF-8
Microsoft.AspNetCore.Hosting.Internal.WebHost: Information: Request finished in 41590.2456ms 200 application/javascript; charset=UTF-8

 

This is the start of the webpack output:

Microsoft.AspNetCore.NodeServices: Information: webpack built e833ab89a2ae6f1de16b in 47695ms
Microsoft.AspNetCore.NodeServices: Error: Hash: e833ab89a2ae6f1de16b
Version: webpack 2.7.0
Time: 47695ms
             Asset      Size  Chunks                    Chunk Names
    main-client.js   7.25 MB       0  [emitted]  [big]  main-client
          main.css    456 kB       0  [emitted]  [big]  main-client
main-client.js.map    8.2 MB       0  [emitted]         main-client
      main.css.map  85 bytes       0  [emitted]         main-client
chunk    {0} main-client.js, main.css, main-client.js.map, main.css.map (main-client) 6.49 MB [entry] [rendered]

 

Sorry I don't really know more precisely what the problem is, just trying to get a fast build environment for VS2017+Telerik Angular.  Note that I'm using the JavaScriptServices over the CLI as I have a many plain c# projects in the solution.

Stefan
Telerik team
 answered on 08 Sep 2017
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
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
ContextMenu
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?