Telerik Forums
Kendo UI for jQuery Forum
3 answers
843 views

Hi All

 

I am using kendo UI 2016.1.112 with angular and I am having an issue with sorting, the first time e.data.sort is populated nicely with the field and direction , second time same field and direction as desc but clicking for third time get an empty array

     

     dataSource: {
        transport: {
            read: function (e) {
                if (!e.data.sort || e.data.sort.length === 0) {

                 ///WTH ..... WHY?

                }
                var sort = e.data.sort[0];
                exclusionsService.getExclusions(e.data.skip, e.data.take, sort.field, sort.dir).then(function (data) {
                    e.success(data);
                });
...

Dimo
Telerik team
 answered on 11 Feb 2016
1 answer
100 views

I've got xslt file which consists of many tables. 
I set id to each table. How can I set grid on id?

<table class="grid" id="ID0EEC">
      <tbody><tr>
        <th>Numb</th>
        <th>Time</th>
        <th>Type</th> 
      </tr>
      <tr>
        <th>47217283640322</th>
        <th>10.01.2014 15:25:17</th>
        <th>ATM</th> 
      </tr>
      <tr>
        <th>46961091840322</th>
        <th>12.01.2014 09:07:47</th>
        <th>Kasino</th> 
      </tr>
      <tr>
        <th>46519990240322</th>
        <th>25.01.2014 22:47:00</th>
        <th>Cash</th> 
      </tr>
    </tbody></table>

 

<table class="grid" id="ID0EJG">
      <tbody><tr>
        <th>Numb</th>
        <th>Time</th>
        <th>Type</th> 
      </tr>
      <tr>
        <th>47217283640322</th>
        <th>10.01.2014 15:25:17</th>
        <th>ATM</th> 
      </tr>
      <tr>
        <th>46961091840322</th>
        <th>12.01.2014 09:07:47</th>
        <th>Kasino</th> 
      </tr>
      <tr>
        <th>46519990240322</th>
        <th>25.01.2014 22:47:00</th>
        <th>Cash</th> 
      </tr>
    </tbody></table>


I would like to do smth like thin in JS
  var gridArray = $("#grid");
        for (var i = 0; i < gridArray.length; i++) {
            var tmp = gridArray[i];
            var numb = tmp.getAttribute('id');
            $("#" + numb).kendoGrid({});
        } 

 

 

What is wrong?

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 11 Feb 2016
1 answer
199 views

What I'm trying to do is display some data in a specific column that is calculated by using the data from another column.

I currently have a function that returns the number of available licenses for the given 'Id' in JSON:

function getAvailableLicenses(id) {
    var url = "/Host/Organization/AvailableLicenses/" + id;
    $.get(url, function (data) {
        return data.AvailableLicenses;
    });
}

 

How do I go about displaying the number that is returned in a column named "AvailableLicenses"?

Here is my current Grid:

$("#OrganizationGrid").kendoGrid({
    dataSource: viewModel.get("orgDataSource"),
    filterable: {
        extra: false
    },
    sortable: true,
    pageable: true,
    columns: [
        { field: "Id", hidden: true },
        { field: "Name", template: "<a href='/Host/Organization/Detail/#:Id#'>#:Name</a>"},
        { field: "LicenseNumber", title: "Number of Licenses" },
        { field: null, title: "Available Licenses", template: "#= getAvailableLicenses(Id) #" },
        { field: "LicenseExpiration", title: "License Expiration", format: "{0:MM/dd/yyyy}" },
        { field: "State" },
        { field: "Active" }
    ],
    editable: false
});

 

As you can see, I tried to create a null column with a template that calls the function for the given 'Id'.

By using Fiddler, I can see that the function is indeed being called for all of the rows, but the 'AvailableLicenses' column just displays "undefined" for every row.

Is there something I'm missing here to get this to work?

Austin
Top achievements
Rank 1
 answered on 11 Feb 2016
1 answer
102 views

I could have a very n-deep treeview but the way the dataTextfield operates solves my problem. Is it possible, when the node is expanded, that you modify the array for which the dataTextField is displayed?

 For example:

 When the call is made to the service, the JSON Object return is:

The first node name should be : VBN

so the dataTextField: [SSM.securitySelectionModelName]

 

{"id": 1, "isSSMNameNode": true, "tgtWeight": 0.0, "currWeight": 0.0, "hasChildNode": true, "ext_model_id": 1, "parent": null, "SSM": {"id": 1, "securitySelectionModelName": "VBN"}

 

On the next get, it should be ["SSM.securitySelectionModelName", "SSM.classificationName]"

[{"id": 2, "isSSMNameNode": false, "tgtWeight": 0.0, "currWeight": 0.0, "hasChildNode": true, "ext_model_id": 14, "parent": {"id": 1, "isSSMNameNode": true, "tgtWeight": 0.0, "currWeight": 0.0, "hasChildNode": true, "ext_model_id": 1, "parent": null, "SSM": 1, "classificationNameNode": null}, "SSM": {"id": 1, "securitySelectionModelName": "VBN", "classificationNameNode": {"id": 14, "classificationLevel": 2, "classificationName": "MBS", "hasChildNode": false, "parent": 2}}]

 Is this possible to do on the expand event where I create the dataTextField array dynamically?

Boyan Dimitrov
Telerik team
 answered on 11 Feb 2016
1 answer
153 views

Hi,

    I'm not able to add Multi column Header grid. I'm trying this

@(Html.Kendo().Grid<SkyResMVC.Models.TAChartDetails>()
                        .Name("TAChartGrid")
                        .HtmlAttributes(new { style = "height: 400;" })
                        .Scrollable()
                        .Columns(columns =>
                            {
                                columns.Bound(p => p.RoomType).Width(120).Title("A");
                                columns.Group(group => group
                                .Title("Contact Info")
                                    .Columns(info =>
                                    {
                                        info.Bound(x => x.ContactTitle).Width(200);
                                    })
                            );
                            })
                                )

 

I'm getting error like this-

Kendo.Mvc.UI.Fluent.GridColumnFactory<SkyResMVC.Models.TAChartDetails>' does not contain a definition for 'Group' and no extension method 'Group' accepting a first argument of type 'Kendo.Mvc.UI.Fluent.GridColumnFactory<SkyResMVC.Models.TAChartDetails>' could be found (are you missing a using directive or an assembly reference?)

 

Please help me in this....

 

 

Dimiter Madjarov
Telerik team
 answered on 11 Feb 2016
4 answers
213 views

I'm using the grid setOptions/getOptions to save a particular view for a grid.   Basically a user can filter the grid in a certain way, show and hide columns, etc.

 In the grid I have several inline drop downs.  This is an example of one of the field definitions:

{ field: "LocationId", title: "Location Name", width: 200, editor: gridHelper.locationDropDownEditor, template: "#=gridHelper.getLocationCode(LocationId)#" },

On initial load everything works absolutely fine.  The problem comes in when the user selects a different view and I call setOptions to instantiate that view.   For the most part everything works, however when clicking on a cell with a dropdown the dropdown does not get reinitialized as a dropdown.  It's simply a text field with the right Location Name displayed, however when you click it you get the id#.

Is there a proper way to reinitialize those dropdowns using the model I've given above?

I've tried refreshing both the grid and the datasource along with destroying and recreating the grid from scratch but no options seem to lead to something that will work.

 Thanks!

 

 

 

 

Robert
Top achievements
Rank 1
 answered on 11 Feb 2016
2 answers
376 views

Hi,

when I use declarative syntax, e.g.

<div id="app">
      <div id="list" data-role="list" data-bind="source: productsSource" data-template="tmpl"></div>
      <div id="pager" data-role="pager" data-bind="source: productsSource"></div>
 </div>

 and use MVVM binding to bind to dataSource:

var vm= kendo.observable({
           productsSource: new kendo.data.DataSource({
                    pageSize: 4, page: 1,
                    serverFiltering: true,
                    serverSorting: true,
                    transport: {
                          read: {
                              url: "http://demos.telerik.com/kendo-ui/service/Products",
                              dataType: "jsonp"
                             
                              }
                    }
                })
                      
            });
         
         
          kendo.bind($("#app"), vm);  

 

 there are two requests to http://demos.telerik.com/kendo-ui/service/Products (one for list and one for pager).

The whole example could be seen on: http://dojo.telerik.com/OHeMI/2

It is possible to reduce request count only to one?

 

Ernestas
Top achievements
Rank 1
 answered on 11 Feb 2016
8 answers
586 views
Hi,

I have a Kendo TreeView in a Kendo window. The window is intialised and hidden on document ready

var categoryWindow;
 
$(document).ready(function () {
    categoryWindow = $("#category-tree").kendoWindow({
            actions: ["Close", "Maximize"],
            draggable: false,
            height: "350px",
            modal: true,
            resizable: false,
            title: "Browse Document Categories",
            width: "500px",
            visible: false
        }).data("kendoWindow");
});
A click event then opens the window. The tree loads up and first level of nodes are loaded, but when I try to expand, it shows the spinning disk for a while, but then does not show any children.

Using fiddler I can see the child elements are being sent back by the ajax request and when I move the control outside of the window it works without any problems.

I am creating the tree using the ASP.NET MVC wrappers.

<div id="category-tree">
     
@(Html.Kendo().TreeView()
              .Name("category-treeview")
              .DataTextField("Name")
              .Events(e => e.Select("onTreeViewSelect"))
              .DataSource(ds => ds.Read(r => r.Action("TreeView", "Categories"))))
 
</div>
UPDATE: Just tested using pure JavaScript and the same problem occurs, so it's not specifically to do with the ASP.NET MVC wrappers
Dimiter Madjarov
Telerik team
 answered on 11 Feb 2016
1 answer
1.4K+ views

Hi, 

I have created custom popup for kendo scheduler to Add and Edit details using Kendo template. However, I want to add kendo autocomplete and kendo multiselect on the popup. I have attached screenshot of the popup. 

The issue we are facing is how to populate "AUTO COMPLETE" & "MULTI-SELECT" controls on the scheduler popup (which is already working on Modal popup but somehow it does not work on "Scheduler Popup".

Georgi Krustev
Telerik team
 answered on 11 Feb 2016
1 answer
225 views

I have reproduced this issue in here ... http://dojo.telerik.com/@Salmal/OcALi 

I am implementing Kendo Charts for my AngularJS application . I have a scenario where i need to change the type of the Chart when user clicks on a button .

For this i am using k-series-defaults attribute directive and for its value i am binding a scope variable from controller . Please see below code snippets.

 View.html

<div class="demo-section k-content wide">
    <div>
        <h4>Hover some series</h4>
        <div kendo-chart
             k-legend="{ position: 'bottom' }"
             k-series-defaults="{ type: 'pie' }"
             k-series="[{ field: 'amount', categoryField: 'name'}]"
             k-data-source="chartData"
             k-rebind="chartData">
        </div>
    </div>
</div>

 Ctrl.js

$scope.chartData = [
        {
            "name": "Books",
            "amount": 200
        },
        {
            "name": "Newspapers",
            "amount": 320
        },
        {
            "name": "Magazines",
            "amount": 225
        },
        {
            "name": "Shoes",
            "amount": 400
        }
      ];
 
      $scope.update = function () {
          $scope.ChartType = { type: 'bar' };
      };
 
      $scope.ChartType = { type: 'pie' };

 

My problem is that , the ChartType variable change doesn't reflect in the chart rendered in the view . Which means that the AngularJS 2 way binding doesn't work with the kendo ui charts . Is there something i am missing here , or can we use some alternatives such as ObservableArray  as specified here http://docs.telerik.com/kendo-ui/AngularJS/data-source#update-the-datasource-object . ?

 

Iliana Dyankova
Telerik team
 answered on 11 Feb 2016
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
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
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?