Telerik Forums
Kendo UI for jQuery Forum
1 answer
185 views
Can someone help me with the css required to replace the column menu icon (three vertical dots) with something more usable like a font awesome icon, or just the normal filter icon when column menu is not used? thanks
Marc
Top achievements
Rank 1
 answered on 27 Jun 2017
3 answers
472 views

Hi All,

Please find the attachment for details.


Thanks & Regards,
Vinodh Kumar
perico
Top achievements
Rank 1
Iron
 answered on 27 Jun 2017
2 answers
436 views

Hi folks,

i try to add a new row in my grid, but it raises an error. In my datasource i work with $expand and have something like this:

Firstname, Lastname, AttributeID, Attribute (Name,Description, Value)

In my grid the columns show Firstname, Lastname, Attribute.Name, Attribute.Description, Attribute.Value

 

If i try to add a new row, the error is "can't read property 'Name' of null" and that is because of the expanding items.

$kendoHtmlEncode(data.Attribute.Name==null?'':data.Attribute.Name)

 

Do you have an example how to work with adding new rows with expanding items? Or what am I doing wrong?

 

Thanks and regards,

Chris

 

Uncaught TypeError: Cannot read property 'Name' of null
    at eval (eval at compile (kendo.all.js:194), <anonymous>:3:898)
    at init._rowsHtml (kendo.all.js:52270)
    at init._renderContent (kendo.all.js:52843)
    at init.refresh (kendo.all.js:52706)
    at init.proxy (jquery-1.12.4.js:529)
    at init.trigger (kendo.all.js:124)
    at init._process (kendo.all.js:6965)
    at init._change (kendo.all.js:6925)
    at init.proxy (jquery-1.12.4.js:529)
    at init.trigger (kendo.all.js:124)
Christopher
Top achievements
Rank 1
 answered on 27 Jun 2017
12 answers
216 views

Hello

I think there are some incorrect typescript typings for kendo.ui.window.title(). The description of the logic on the API reference implies it can either:

  • Be passed a new title and return the window
  • Be passed nothing and return the current title

In the typings file it is listed as follows:

title(): kendo.ui.Window;

title(text?: string): void;

I think the correct typings should be:

title(): string;
title(text?: string): kendo.ui.Window
;

Ianko
Telerik team
 answered on 27 Jun 2017
3 answers
411 views

Hi Team,

I need to add percentage in tooltip and series label . I am successfully able to do the same by adding directly into tooltip template and series label template.

Please find below my working code:

<div id="chart"></div>
    <script>   
     
      var x= 0;
      function processResponse(response) {
      var length = response.length;
      var item;
      var i;
   
      for (i = 0; i < length; i++) {
        item = response[i];
        x = x + item.ActionsCount;
       
      }
       return response;
    
    }
      var seriesData = [
        {"IsMainAction":"8). Cancelled","ActionsCount":20},{"IsMainAction":"7). Completed (KPI not fully achieved)","ActionsCount":4},
        {"IsMainAction":"6). Completed (KPI achieved)","ActionsCount":21},
        {"IsMainAction":"5). Ongoing (delayed)","ActionsCount":1},                                                                              
 
{"IsMainAction":"4). Ongoing (on time)","ActionsCount":12},                                                                     {"IsMainAction":"3). Not yet started (will be on time)","ActionsCount":9},
        {"IsMainAction":"2). Not yet started (will be delayed)","ActionsCount":3},
        {"IsMainAction":"1). Planned","ActionsCount":80}
          
        ];
     function createChart() {
     
            $("#chart").kendoChart({
            
  legend: {
    position: "center",
    visible: true,
    template: "#= data.name #"+ "%"
  },
  dataSource: {
    data: seriesData,
                                group: {
                field: "IsMainAction"
            },
    schema: {
                  parse: function(response) {
                  return processResponse(response);
                }
              }
  },
  seriesDefaults: {
    type: "bar",
    stack: true
  },
 
  seriesColors: ["#F4DC7A", "#FF2B24", "#FDC1A4", "#3CB4FF", "#D079F1", "#1AAF18", "#0DFF85", "#222222"],
  series: [
    {
      field: "ActionsCount" ,
    labels:{
                                visible: true,
                                position: "center",
      rotation: -90,
      //color: "#FFFFFF",
     
                                format: "{0}",
      mirror: true,
                                background: "transparent", //padding: { left: -10 },
                                template:"#= value # (#=kendo.toString((value/10)*100, 'n2')#" + "%)"
           
                        
                           }
    }
  ],seriesColors: ["#F4DC7A", "#FF2B24", "#FDC1A4", "#3CB4FF", "#D079F1", "#1AAF18", "#0DFF85", "#888"],
            
  tooltip: {
    visible: true,mirror: true,
    template:"#= value # (#= kendo.toString((value/10)*100, 'n2')#" + "%)"
    
                     
  }
});
        }
      $(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
    </script>

Please see the attachment chart1  for output 

However when I am trying to add in databound only for first bar I am getting the output correctly . For all other bar only value is getting displayed. But for template it is working as expected. Please see the code below:

 

<div id="chart"></div>
    <script>
      function onDataBound(arg) {
                    arg.sender.options.tooltip.template = "#= value # (#= kendo.toString((value/10)*100, 'n2')#" + "%)";
        arg.sender.options.series[0].labels.template = "#= value # (#= kendo.toString((value/10)*100, 'n2')#" + "%)";
                arg.sender.redraw();
                }

      var x= 0;
      function processResponse(response) {
      var length = response.length;
      var item;
      var i;

      for (i = 0; i < length; i++) {
        item = response[i];
        x = x + item.ActionsCount;

      }
       return response;

    }
      var seriesData = [
        {"IsMainAction":"8). Cancelled","ActionsCount":20},{"IsMainAction":"7). Completed (KPI not fully achieved)","ActionsCount":4},
        {"IsMainAction":"6). Completed (KPI achieved)","ActionsCount":21},
        {"IsMainAction":"5). Ongoing (delayed)","ActionsCount":1},                                                                              

{"IsMainAction":"4). Ongoing (on time)","ActionsCount":12},                                                                     {"IsMainAction":"3). Not yet started (will be on time)","ActionsCount":9},
        {"IsMainAction":"2). Not yet started (will be delayed)","ActionsCount":3},
        {"IsMainAction":"1). Planned","ActionsCount":80}

        ];
     function createChart() {

            $("#chart").kendoChart({

  legend: {
    position: "center",
    visible: true,
    template: "#= data.name #"+ "%"
  },
  dataSource: {
    data: seriesData,
                                group: {
                field: "IsMainAction"
            },
    schema: {
                  parse: function(response) {
                  return processResponse(response);
                }
              }
  },
  seriesDefaults: {
    type: "bar",
    stack: true
  },
  dataBound: onDataBound,
  seriesColors: ["#F4DC7A", "#FF2B24", "#FDC1A4", "#3CB4FF", "#D079F1", "#1AAF18", "#0DFF85", "#222222"],
  series: [
    {
      field: "ActionsCount" ,
    labels:{
                                visible: true,
                                position: "center",
      rotation: -90,
      //color: "#FFFFFF",

                                format: "{0}",
      mirror: true,
                                background: "transparent", //padding: { left: -10 },



                           }
    }
  ],seriesColors: ["#F4DC7A", "#FF2B24", "#FDC1A4", "#3CB4FF", "#D079F1", "#1AAF18", "#0DFF85", "#888"],

  tooltip: {
    visible: true,mirror: true


  }
});
        }
      $(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
    </script
>

 

Please see the attachment chart 2 for this output

Kindly help me to fix this issue

 

Stefan
Telerik team
 answered on 27 Jun 2017
1 answer
844 views

Hello,

So I read some of the Kendo documentation regarding MVVM and it says that once the view model is updated the view (HTML) should update as well. 

I tried that many times and when I change the viewModel from javascript I don't see the changes updated in the HTML unless I trigger the change event, as shown here:

https://jsfiddle.net/oycbw9e6/

You will notice that if you comment out this line: viewModel.trigger("change", { field: "price"}); then the changes won't be propagated to the HTML view.

Is there any way it can be done automatically without triggering the "change" event?

Thanks!

Dimitar
Telerik team
 answered on 27 Jun 2017
2 answers
317 views

Hi,

I have attached a tooltip to a button. Next to the button is an iframe. When hovering the button, the tooltip shows. But when exiting the button area (slowly) into the iframe area, the tooltip often fails to autohide. Any ideas on why this is happening and how to fix this?

I have created a simple dojo example but since I cannot save it ("Failed to create snippet"), I have attached it in this post.

Regards,
Ron

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
 
 
   
  <script>
    $(function () {
      $('#button').kendoButton().kendoTooltip({
        content: 'This is the tooltip'
      });
    });
  </script>
<body>
   
  <div id="button">BUTTON</div><div style="vertical-align: top; display: inline-block;"><iframe style="border: 1px solid black"></iframe></div>
                                                                                                                                 
                                                                                                                                <div>Hover the button and slowly move the mouse into the iframe area</div>                                                                                                                          
                                                                                                                                 
</body>
</html>

 

Inception
Top achievements
Rank 1
Veteran
 answered on 27 Jun 2017
3 answers
849 views

Hi,

I am experiencing a problem with panelbar with the latest kendo ui release. When using a (local) datasource which contains items with the 'expanded' option set to true, the corresponding panelbar item doesn't work. Neither the item gets expanded by default, the item does not expand when clicking the item.

Reverting back to an older version, for instance Kendo UI R3 SP2, thing are working properly. I have tried making a dojo example but at the moment I don't seem to be able to save the example ("Failed to create snippet"). I will add the code at the end of this psot.

On a side note: when using 'contentUrl', the content doesn't get loaded when clicking the non-responsive item. This might be as a result to the item not being expanded properly.

Regards,
Ron

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
 
 
   
  <script>
$(document).ready(function() {
 
  $("#kendoBar").kendoPanelBar({
    dataSource: [{
      text: 'Test expanded not present (WORKING)',
      expanded: false,
      content: "Will work because no expanded option is provided"
    }, {
      text: 'Test expanded option is present (NOT WORKING)',
      expanded: true,
      content: "Will not work with the expanded option"
    }]
  });
 
});
  </script>
  </head>
<body>
   
<h2>Kendo PanelBar v2017.2.504 not working</h2>
<h3>Test kendoPanelBar: expanded: true not working</h3>
<div id="kendoBar"></div>
<p>
  Also: contentUrl is not loaded on load, but is loaded when clicked on the item
</p>
 
</body>
</html>
Plamen
Telerik team
 answered on 27 Jun 2017
3 answers
1.1K+ views
Can a column, which is unlocked (locked:false) on load, be unlocked in code after grid has loaded?

Thanks.

Bradley
Konstantin Dikov
Telerik team
 answered on 27 Jun 2017
2 answers
330 views
I'm hoping I have just overlooked something, but I am unable to make the tabstrip behave properly.  When you click on the tabs they don't change.  I pasted the demo (razor) code from this site directly into my view and it still won't work. The tabstrip displays properly, and I am not seeing any javascript errors. Here is the view

<div id="forecast">
    @(Html.Kendo().TabStrip()
          .Name("tabstrip")
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("Paris")
                  .Selected(true)
                  .Content(@<text>
                    <div class="weather">
                        <h2>17<span>ºC</span></h2>
                        <p>Rainy weather in Paris.</p>
                    </div>
                    <span class="rainy"> </span>
                  </text>);
 
              tabstrip.Add().Text("New York")
                  .Content(@<text>
                    <div class="weather">
                        <h2>29<span>ºC</span></h2>
                        <p>Sunny weather in New York.</p>
                    </div>
                    <span class="sunny"> </span>
                  </text>);
 
              tabstrip.Add().Text("Moscow")
                  .Content(@<text>
                    <div class="weather">
                        <h2>16<span>ºC</span></h2>
                        <p>Cloudy weather in Moscow.</p>
                    </div>
                    <span class="cloudy"> </span>
                  </text>);
 
              tabstrip.Add().Text("Sydney")
                  .Content(@<text>
                    <div class="weather">
                        <h2>17<span>ºC</span></h2>
                        <p>Rainy weather in Sidney.</p>
                    </div>
                    <span class="rainy"> </span>
                  </text>);
          })
    )
</div>

And here is the upper part of the page source:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Index - TRS Portal</title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <link href="/Content/site.css" rel="stylesheet"/>
 
        <script src="/Scripts/modernizr-2.5.3.js"></script>
 
        <link href="/Content/kendo.common.min.css" rel="stylesheet"/>
<link href="/Content/kendo.default.min.css" rel="stylesheet"/>
 
        <script src="/Scripts/jquery-1.7.1.js"></script>
 
        <script src="/Scripts/kendo.web.min.js"></script>
<script src="/Scripts/kendo.aspnetmvc.min.js"></script>
Nicholas
Top achievements
Rank 1
Iron
 answered on 26 Jun 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
Drag and Drop
Application
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
DropDownTree
ListBox
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
Styling
ColorPicker
Pager
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
Licensing
PivotGridV2
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
LLM Kit
+? more
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?