Telerik Forums
Kendo UI for jQuery Forum
8 answers
1.9K+ 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
208 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
170 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
279 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
243 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
179 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
1 answer
194 views
Is there a way to make the "Alternate Text" value required for the Image Browser.  I have found a way to implement this functionality for the Insert button, but I cannot find a way for it to work for double-clicking the image.  Note, I do consider the Insert button "solution" a hack and would prefer to implement a better solution if one exists.

// Editor definition
element.kendoEditor({
  execute: handlers_editorExecute,
  imageBrowser: {
    apply: handlers_editorImageBrowserApply,
  }
});
     
// This does not work for double-clicking the image because the image is inserted regardless of the return value
handlers_editorImageBrowserApply: function (e) {
  var imageBrowser = $(".k-imagebrowser").data("kendoImageBrowser"); 
 
  if (imageBrowser.value() != "") {
    if ($(".k-filebrowser-dialog #k-editor-image-title").val() == "") {
      alert("Alternate text is required.");
      return false;
    }
  }
},
// This does work for clicking the Insert button and the apply function is not defined, but feels like a hack
handlers_editorExecute: function (e) {
  if (e.name == "insertimage") {
    setTimeout(function () {
      var insertButton = $(".k-filebrowser-dialog .k-dialog-insert");
      insertButton.unbind("click");
      insertButton.click(function () {
        var imageBrowser = $(".k-imagebrowser").data("kendoImageBrowser");
        if (imageBrowser.value() != "") {
          if ($(".k-filebrowser-dialog #k-editor-image-title").val() == "") {
            alert("Alternate text is required.");
            return false;
          }
        }
        imageBrowser.trigger("apply");
      });
    });
  }
},
Ianko
Telerik team
 answered on 08 Sep 2017
3 answers
133 views

Hello,

we are using Kendo UI for angular and dicsovered that multiselect does not work unless user clicks on checkboxes (even if checkboxOnly is set to false). Its reliably reproducible even on your sameple in documentation: http://www.telerik.com/kendo-angular-ui/components/grid/selection/#toc-selection

There if selection mode is 'mutiple' clicking on rows (not checkboxes) only allows single row to be selected at the time.

 

Jan

Ján
Top achievements
Rank 1
 answered on 08 Sep 2017
1 answer
322 views

Hi,

There is an event seriesClick; how if I want to ignore single click and only respond to double click ?]

 

Thank you.

Stefan
Telerik team
 answered on 08 Sep 2017
1 answer
1.2K+ views

I am wondering if anyone has experience with refreshing a grid (no paging involved) on an interval.  I would like to refresh every 60 seconds but interested in making it as transparent as possible to the user.  I am doing my reads from an API endpoint with JSON returns therefore wondering about the use of .read() or .sync() and preference.  This is a read-only grid.  I am using the jQuery Kendo grid with ASP.NET Core MVC project.

In addition if you have any examples of web sockets or using ASP.NET Core early releases of SignalR with an ASP.NET Core MVC site that would be amazing.

Thanks.

Doug

Stefan
Telerik team
 answered on 08 Sep 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?