Telerik Forums
Kendo UI for jQuery Forum
4 answers
365 views

HI

I have test the Kendo UI Barcode and have found some problems.

。The Barcode result will become rough while width does not enougth (even if renderAs: "canvas" or "svg").
(see Image1 - rough result)

。Larger width will cause error (even if height is greater then the suggested value) : 

    $(container).find("#gudbrands").kendoBarcode({
      value: "1234567890" ,
      type: "code39",
      width: 580,
      height: 100
    });

Uncaught Error: Insufficient Height. The minimum height for value: 1234567890 is: 87

    at o.prepareValues (kendo.all.min.js:97)
    
       at o.addData (kendo.all.min.js:97)
    
       at o.encode (kendo.all.min.js:97)
    
       at init._render (kendo.all.min.js:97)
    
       at init.createVisual (kendo.all.min.js:97)
    
       at init.redraw (kendo.all.min.js:97)
    
       at init.setOptions (kendo.all.min.js:97)
    
       at new init (kendo.all.min.js:97)
    
       at HTMLDivElement.<anonymous> (kendo.all.min.js:26)
    
       at Function.each (jquery-2.2.4.min.js:2)

My questions : 
1.Could Barcode could auto size by itself ? 
2.The height of the Barcode should not be limited(see Image2 - long code39)

Best regards

Chris

 

 

 

Konstantin Dikov
Telerik team
 answered on 28 Jun 2017
14 answers
618 views
After usage of a grid in our page all text selection is disabled.
you can test this out in "http://demos.telerik.com/kendo-ui/grid/selection" by trying to select the header after selecting a row in the grid.

step by step:
1 - open page.
2 - try select the text(for example the "Grid / Selection" header, with the mouse) - the text can be selected.
3 - click on some row in the grid.
4 - try select the text(for example the "Grid / Selection" header, with the mouse) - the text can NOT be selected. from this step NONE of the text in the page cannot be selected.
Patrick
Top achievements
Rank 1
 answered on 28 Jun 2017
2 answers
395 views

I have gone back and forth trying to track down an Excel export problem I have but to no avail. I have a page which loads a tabstrip and creates tabs dynamically based on data stored in an odata list - retrieved using a kendo datasource and I then loop through the data to create the tabs and populate the tabs with a grid each of which is connected to an odata source. Each grid has an export to excel toolbar button with specific export code to reformat parts of the export to replace footertemplate <span> tags to output totals in bold and things like that but whichever grid I press the export button on, it always exports the grid from the last tab. I've even added specific buttons on to each tab above the grid and made the code on the button click event call an onClick function to do the following:

function onClick(e) {
    var grid = '#' + e.event.target.id.replace('btnExcelExport', '').toLowerCase() + 'grid';
    $(grid).data("kendoGrid").saveAsExcel();
 
    return false;
}

 

I added an alert into the function above to display the "grid" variable and the name is correct but in each case it still exports the data from the grid on the last tab. I have checked the page carefully and each grid has a unique id so it's not an issue with that. Just in case it matters the export code in the grid is as follows:

excelExport: function (e) {
                        var sheet = e.workbook.sheets[0];
                        var cellValue = '';
 
                        for (var rowIndex = 0; rowIndex < sheet.rows.length; rowIndex++) {
                            var row = sheet.rows[rowIndex];
 
                            for (var i = 0; i < row.cells.length; i++) {
                                cellValue = row.cells[i].value;
                                if (cellValue === undefined) { }
                                else {
                                    if (typeof cellValue === 'string') {
                                        if (cellValue.indexOf("float:right") != -1) {
                                            row.cells[i].value = cellValue.replace("<span class='boldFont' style='float:right;'>", "").replace("</span>", "");
                                            row.cells[i].hAlign = "right";
                                            row.cells[i].bold = true;
                                        }
                                        else if (cellValue.indexOf("boldFont") != -1) {
                                            row.cells[i].value = cellValue.replace("<span class='boldFont'>", "").replace("</span>", "");
                                            row.cells[i].bold = true;
                                        }
                                    }
                                }
                            }
                        }
                    }

 

Any advice or suggestions?

Stefan
Telerik team
 answered on 28 Jun 2017
1 answer
147 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
406 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
379 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
164 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
354 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
792 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
247 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?