Telerik Forums
Kendo UI for jQuery Forum
2 answers
214 views

I created a custom theme for our web application with your kendo UI theme builder (http://demos.telerik.com/kendo-ui/themebuilder/).

Every component that we use so far were perfectly rendered with our custom style. This morning I started to use the ListBox but this component is not rendered correctly. After some research I found that style related to the list box are not included in the kendo.custom.css generated by the theme builder.

When I check the styles from your demo page (http://demos.telerik.com/kendo-ui/listbox/index), the styles related to k-listbox are present.

 

Francis
Top achievements
Rank 1
 answered on 04 Aug 2017
4 answers
848 views

HI Team,

Inside a Kendo Tree List for Angular Js I have added a Progress Bar as a kendo template.

 

<script id="progressStatus" type="text/x-kendo-template">

<div ng-if="'#:Status#' == 'Loading'">

    <div kendo-progress-bar="progressBar1" k-min="0" k-max="100" k-value="#:Percentage#" style="width: 100%;">

    </div>

</div>

</script>

 

And I bind it to the tree list as part of column declaration

{ field: "Status", template: $("#progressStatus").html(), width: "170px" }

So far good. And I am able to display the value in UI.

However I am not sure how to show following

  • How to make it of type percent, i tried with k-type='percent' but no luck
  • If Percentage > 50 show the graph in yellow and text (50%) in red

Thanks

Inside a Kendo Tree List for Angular Js I have added a Graph as a kendo template.

    <script id="progressStatus" type="text/x-kendo-template">
                    <div ng-if="'#:Status#' == 'Loading'">
                        <div kendo-progress-bar="progressBar1"  k-min="0" k-max="100" k-value="#:Percentage#" style="width: 100%;"></div>
                    </div>
    </script>

And I bind it to the tree list as part of column declaration

{ field: "Status", template: $("#progressStatus").html(), width: "170px" }

So far good. And I am able to display the value in UI.

However I am not sure how to show following

  • How to make it of type percent, i tried with k-type='percent' but no luck
  • If Percentage > 50 show the graph in yellow and text (50%) in red

Inside a Kendo Tree List for Angular Js I have added a Graph as a kendo template.

    <script id="progressStatus" type="text/x-kendo-template">
                    <div ng-if="'#:Status#' == 'Loading'">
                        <div kendo-progress-bar="progressBar1"  k-min="0" k-max="100" k-value="#:Percentage#" style="width: 100%;"></div>
                    </div>
    </script>

And I bind it to the tree list as part of column declaration

{ field: "Status", template: $("#progressStatus").html(), width: "170px" }

So far good. And I am able to display the value in UI.

However I am not sure how to show following

  • How to make it of type percent, i tried with k-type='percent' but no luck
  • If Percentage > 50 show the graph in yellow and text (50%) in red
Kerry
Top achievements
Rank 1
 answered on 04 Aug 2017
36 answers
775 views
Hi all,

After I upgraded to latest Angular 2.0.0-beta.0 release my site stopped working. I tracked the problem and found out that it is due to KendoValueAccessor, which has dependency to 'angular2/angular2'. This package is not provided any more.

Regards,

Vasil
Nencho
Telerik team
 answered on 04 Aug 2017
1 answer
197 views

Hello,

I currently have a lot of troubles trying to map/wrap/use Kendo Components for JQuery  in an Angular2+ Application with Typescript. This time I have to implement the kendo treeView (and no I am not allowed to use other products and I can not wait till the treeView is implemented for Angular).

So far I can display the treeview component with data from the backend. Now I am struggling with the kendo.ui.TreeViewSelectEvent handling.

This is a shortend version of my so far approach: 

001./// <reference path="../../../../node_modules/@types/kendo-ui/index.d.ts" />
002. 
003.// import ...
004. 
005.declare var kendo: any;
006. 
007./**
008. * Class declaring the TreeViewComponent component
009. */
010.@Component({
011.  'selector': 'dba-folders',
012.  'templateUrl': './folders.component.html',
013.  'styleUrls': ['./folders.component.less']
014.})
015.export class FoldersComponent implements OnInit, OnDestroy {
016. 
017.  @ViewChild('treeView') treeViewEl: ElementRef;
018. 
019.  /** Member containing the TreeView data */
020.  private treeData: kendo.data.HierarchicalDataSource;
021.  /** Member holding the id of the currently selected folder */
022.  private selectedFolderId: Guid;
023.  /** Member holding the folderData for treeData*/
024.  private folderData: Array<Folder>;
025. 
026.  public constructor(private foldersService: FoldersService,
027.    private router: Router) { }
028. 
029.  public ngOnInit(): void {
030.    this.generateFolderTree();
031.  }
032. 
033.  public ngOnDestroy(): void {
034.    kendo.destroy(this.treeViewEl.nativeElement);
035.  }
036. 
037.  private generateFolderTree(): void {
038.    this.foldersService.getFolders().subscribe((result: Folder) => {
039.      this.folderData = new Array<Folder>();
040.      for (let folder of result.subFolders) {
041.        this.folderData.push(folder);
042.      }
043.      this.initTreeData(); // initialize Tree Data
044.      kendo.jQuery(this.treeViewEl.nativeElement).kendoTreeView(this.treeViewOptions()); // set TreeViewOptions for Kendo tree
045.    }, (err) => {
046.      // handle error
047.    });
048.  }
049. 
050.  /**
051.   * Call onTreeSelect method after selecting TreeView item to pass id to mediator
052.   * @param {kendo.ui.TreeViewSelectEvent} e
053.   * @memberof FoldersComponent
054.   */
055.  public onFolderSelect(e: kendo.ui.TreeViewSelectEvent): void {
056.    const uid = $(e.node).closest('li').data('uid');
057.    // this.selectedFolderId = this.getFolderWithNodeUidFromTreeView(uid);
058.    let data: Array<MetadataVariant> = new Array<MetadataVariant>();
059. 
060.    console.log('UID: ' + uid);
061. 
062.    this.foldersService.getGridData(uid, this.router.url).subscribe((result: Array<MetadataVariant>) => {
063.      data = result;
064.      // send data
065.    }, (err) => {
066.      // handle error
067.    });
068.  }
069. 
070.  private getFolderWithNodeUidFromTreeView(uid: string): Guid {
071.    const id: Guid = '';
072.    // ??? HERE I NEED THE HELP ???
073.    return id;
074.  }
075. 
076. 
077.  /**
078.   * Call initTreeData to initialize data in TreeView
079.   */
080.  private initTreeData(): void {
081.    this.treeData = new kendo.data.HierarchicalDataSource({
082.      data: this.folderData,
083.      schema: {
084.        model: {
085.          id: 'id',
086.          children: 'subFolders'
087.        }
088.      }
089.    });
090.  }
091. 
092.  /**
093.   * Call treeViewOptions to initialize options in TreeView
094.   */
095.  private treeViewOptions(): kendo.ui.TreeViewOptions {
096.    const options: kendo.ui.TreeViewOptions = {
097.      dataSource: this.treeData,
098.      dataTextField: ['name'],
099.      dragAndDrop: true,
100.      loadOnDemand: true,
101.      select: this.onFolderSelect
102.    };
103.    return options;
104.  }
105. 
106.}

 

Thank you all in advance! I am happy for any ideas!

Jessica

Nencho
Telerik team
 answered on 04 Aug 2017
3 answers
296 views
Can I server side filter a datasource for one field and client filter the datasource for others field ?

Something like this:

filter: {
                            filters: [
                                { field: "showHiddenFiles", value: false, serverFilter: true },
                                { field: "name", value: "mike", serverFilter: false }
                            ]
                        }
Stefan
Telerik team
 answered on 04 Aug 2017
8 answers
454 views
 I am using MVVM .I am getting in but items are not getting rendered in .

Here is part: 

@model Rezcue.ViewModel.CustomerRequest.AirRequestMVVM
  
 
    <div id="AirRequestFormContainer" data-Template="AirRequestTemplate" data-bind="source: AirItem">
 
 
    </div>
 
 
<script type="text/javascript">
    var AirRequestViewModel = null;
 
    $(document).ready(function() {
        debugger;
        AirRequestViewModel = kendo.observable({
            AirItem: {
                AirVMList: @Html.Raw(Json.Encode(Model)),
                FlightStopsSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: rootUrl("GetData/GetCountry"),
                            dataType: "jsonp"
                        }
                    },
                    serverFiltering: true,
                }),
                OnOpenOriginAutoComplete: function(e) {
                     
                    debugger;
                    var target = $(e.sender.element).data("kendoAutoComplete");
                    target.list.width(280);
                },
                AddSegment: function(e) {
                    debugger;
                     
                },
                resizeFlightStop: function(e) {
                    debugger;
                    //var target = $(e.sender.element).data("kendoDropDownList");
                    //target.list.width(280);
                },
                ResetAirItem: function(e) {
                    debugger;
                     
                },
                ToggleCollapseSegment: function(e) {
                    debugger;
                     
                },
                SaveAirSegment: function(e) {
                    debugger;
                     
                }
            }
             
        });
 
         
         
        LoadTemplateNew("Content/Templates/AirRequestViewModel.tmpl.htm");
 
         
         
    });
 
    function loadAirRequestBinder() {
        kendo.ui.progress($("body"), true);
        kendo.bind($("#AirRequestFormContainer"), AirRequestViewModel.AirItem);
        loadKendoWindow("#AirRequest", "Create Air Request");
        kendo.ui.progress($("body"), false);
    }
 
    $(document).bind("TEMPLATE_LOADED", function (e, path) {
        kendo.ui.progress($("body"), true);
        debugger;
 
 
        loadAirRequestBinder();
        kendo.ui.progress($("body"), false);
    });
 
 
</script>

 

 

TEMPLATE CODE:

<script id="AirRequestTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
 
     
        <div data-bind="source: AirVMList" data-Template="airitemtemplate" ></div>
 
</script>
 
<script id="airitemtemplate" type="text/x-kendo-template" class="KendoExtTemplate">
    <div data-bind="source: SegmentInfo"  data-Template="SegmentTemplate" > </div>
</script>
 
 
<script id="SegmentTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
     
    <div>
        <label style="width:37px;">From </label>:
        <input data-role="autocomplete"
               data-placeholder="Search"
               data-value-primitive="true"
               data-text-field="Code"
               data-bind="value: Origin,
                              source: FlightStopsSource"
               style="width: 100%;" />
    </div>
 
</script>

 

 

 

 

JSON RESPONSE :



[{"Code":"BOM","Name":"\u003ci class=\"fa fa-plane\" style=\"color:#2885D1;\"\u003e\u0026nbsp;\u003c/i\u003e\u003cspan style=\"font-size:.9em\"\u003e\u003cspan style=\"font-family:courier new,courier,monospace;\"\u003e[\u003cspan style=\"color:#2885D1;\" \u003e\u003ca href=\"http://maps.google.com/maps?q=19.088611,72.868056\" target=\"_blank\"\u003eBOM\u003c/a\u003e\u003c/span\u003e]\u003c/span\u003e\u0026nbsp;Mumbai,\u0026nbsp;India \u003cbr /\u003e \u003cspan style=\"font-style:italic;color:#808080\"\u003eMumbai\u003c/span\u003e\u003c/span\u003e","City_code":"BOM","City_Name":"Mumbai","Country_code":"IND","Country_name":"India"},{"Code":"BMH","Name":"\u003ci class=\"fa fa-plane\" style=\"color:#2885D1;\"\u003e\u0026nbsp;\u003c/i\u003e\u003cspan style=\"font-size:.9em\"\u003e\u003cspan style=\"font-family:courier new,courier,monospace;\"\u003e[\u003cspan style=\"color:#2885D1;\" \u003e\u003ca href=\"http://maps.google.com/maps?q=-6.366667,144.633333\" target=\"_blank\"\u003eBMH\u003c/a\u003e\u003c/span\u003e]\u003c/span\u003e\u0026nbsp;Bomai,\u0026nbsp;Papua New Guinea \u003cbr /\u003e \u003cspan style=\"font-style:italic;color:#808080\"\u003eBomai\u003c/span\u003e\u003c/span\u003e","City_code":"BMH","City_Name":"Bomai","Country_code":"PNG","Country_name":"Papua New Guinea"},{"Code":"BOA","Name":"\u003ci class=\"fa fa-plane\" style=\"color:#2885D1;\"\u003e\u0026nbsp;\u003c/i\u003e\u003cspan style=\"font-size:.9em\"\u003e\u003cspan style=\"font-family:courier new,courier,monospace;\"\u003e[\u003cspan style=\"color:#2885D1;\" \u003e\u003ca href=\"http://maps.google.com/maps?q=-5.866667,13.066667\" target=\"_blank\"\u003eBOA\u003c/a\u003e\u003c/span\u003e]\u003c/span\u003e\u0026nbsp;Boma,\u0026nbsp;Congo, the Democratic Republic of the \u003cbr /\u003e \u003cspan style=\"font-style:italic;color:#808080\"\u003eBoma\u003c/span\u003e\u003c/span\u003e","City_code":"BOA","City_Name":"Boma","Country_code":"COD","Country_name":"Congo, the Democratic Republic of the"},{"Code":"LAZ","Name":"\u003ci class=\"fa fa-plane\" style=\"color:#2885D1;\"\u003e\u0026nbsp;\u003c/i\u003e\u003cspan style=\"font-size:.9em\"\u003e\u003cspan style=\"font-family:courier new,courier,monospace;\"\u003e[\u003cspan style=\"color:#2885D1;\" \u003e\u003ca href=\"http://maps.google.com/maps?q=-13.266667,-43.416667\" target=\"_blank\"\u003eLAZ\u003c/a\u003e\u003c/span\u003e]\u003c/span\u003e\u0026nbsp;Bom Jesus da Lapa,\u0026nbsp;Brazil \u003cbr /\u003e \u003cspan style=\"font-style:italic;color:#808080\"\u003eBom Jesus da Lapa\u003c/span\u003e\u003c/span\u003e","City_code":"LAZ","City_Name":"Bom Jesus da Lapa","Country_code":"BRA","Country_name":"Brazil"},{"Code":"GMM","Name":"\u003ci class=\"fa fa-plane\" style=\"color:#2885D1;\"\u003e\u0026nbsp;\u003c/i\u003e\u003cspan style=\"font-size:.9em\"\u003e\u003cspan style=\"font-family:courier new,courier,monospace;\"\u003e[\u003cspan style=\"color:#2885D1;\" \u003e\u003ca href=\"http://maps.google.com/maps?q=-1.933333,15.866667\" target=\"_blank\"\u003eGMM\u003c/a\u003e\u003c/span\u003e]\u003c/span\u003e\u0026nbsp;Gamboma,\u0026nbsp;Congo \u003cbr /\u003e \u003cspan style=\"font-style:italic;color:#808080\"\u003eGamboma\u003c/span\u003e\u003c/span\u003e","City_code":"GMM","City_Name":"Gamboma","Country_code":"COG","Country_name":"Congo"}]

Veselin Tsvetanov
Telerik team
 answered on 04 Aug 2017
2 answers
415 views
I have a grid grouped by sections.
Sections are defined by org_id field which is a part of datasource.
One more field is Regional Code defined by regional_code_id field in datasource.
Grid edit is implemented as a popup editor based on template.
Regional Code is a dropdownlist in popup edit template.
The content of this dropdown in popup template SHOULD DEPEND on section.
So I do following in grid edit event:
edit: function(e) {
    console.log('edit event', e.model.ORG_ID);
    dsRegionalCode.read({org_id: e.model.ORG_ID});
}

I see in the console that it passes a correct ID of section when requesting data from server and gets a correct data.
First time it works fine in the template and shows a correct Regional Code value in dropdown.
But if I edit a grid record from another section, the Regional Code dropdown doesn't show a correct value.
It shows -- Select Value --
Then second edit click at the same grid record shows a correct value in dropdown.
Looks like it doesn't wait till dsRegionalCodeCode.read() finishes and uses what datasource contains right now, i.e. the content from previous read.
Kendo UI documentation describes one more grid event: beforeEdit.
So I tried following:
beforeEdit: function(e) {
    console.log('beforeEdit event', e.model.ORG_ID);
    dsRegionalCode.read({org_id: e.model.ORG_ID});
}

But I don't see this message in console log at all. I see 'edit event' only.
Looks like this event doesn't fire when you click edit to open popup editor.
Version of Kendo UI is v2016.2.714

Could you please explain what is a correct way of populating datasource for dropdown in grid popup editor if by design the content of this dropdown depends on a record in a grid and it could vary?
Serghei
Top achievements
Rank 1
 answered on 04 Aug 2017
2 answers
814 views

Hello, 

I'm a beginner in kendo ui.

I'm trying to work on a hierarchical grids.

I'm able to get the parent rows to load fine, however, the child rows are all loaded without considering the filter . 

Here's the code I'm attempting to run:

<div class="container" id="example">
    <div id="Div1">
        <div id="grid">
        </div>
        <script>
            $(document).ready(function () {
                var element = $("#grid").kendoGrid({
                    dataSource:
                    {
                        transport:
                        {
                            read: {  url: "api/Clients", dataType: 'json'},
                        },
                        pageSize: 6,
                        serverPaging: true,
                        serverSorting: true,
                    },
                    height: 600,
                    sortable: true,
                    pageable: true,
                    detailInit: detailInit,
                    
                    columns:
                    [
                        { field: "Code_Client" },
                        { field: "Nom_Client"},
                        { field: "Groupe" },
                        { field: "Cote" },
                        { field: "Marche" }
                    ]
                });
            });
 
            function detailInit(e) {
                $("<div />").appendTo(e.detailCell).kendoGrid({
                    dataSource: {
                        transport:
                        {
                           read: {  url: "api/Clients", dataType: 'JSON'}
                        },
                        serverPaging: true,
                        serverSorting: true,
                        serverFiltering: true,
                        pageSize: 10,
                       filter: {field: "Code_Client", operator: "eq",  value: e.data.Code_Client }
                    },
                    scrollable: false,
                    sortable: true,
                    pageable: true,
                    columns: [
                        { field: "Refere" },
                        { field: "Nb_Employe" },
                        { field: "Ca" },
                        { field: "Type" },
                        { field: " Commentaires" },
                        { field: "Sous_Secteur" },
                        { field: "Contact" },
                        { field: "Adresse" },
                        { field: "Téléphone" }
                    ]
                });
            }
        </script>
    </div>
</div>

 

Thank you, 
Shahinez
Top achievements
Rank 1
 answered on 04 Aug 2017
3 answers
150 views

We are trying to add a rotator to our home page. Are there plans to add or do you have a control similar to the Rotator from AJAX? 

http://demos.telerik.com/aspnet-ajax/rotator/examples/bannerrotation/defaultcs.aspx

 

I know there are several jquery add ins and such available, but we are trying to limit our libraries where possible.

Thanks

Randy

Stefan
Telerik team
 answered on 04 Aug 2017
3 answers
810 views

We have a requirement which is to put bar charts, area charts, line charts together with several scatter charts in one chart. How can we do this? 

Here is an example I made in Excel, I want to achieve similar chart in web page by using kendo ui.

 

 

marvin
Top achievements
Rank 1
 answered on 04 Aug 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?