Telerik Forums
Kendo UI for jQuery Forum
3 answers
325 views

I'm trying to wrap a Kendo grid in a directive that would allow other components to call my new directive and pass in a data-source and the template for the drop down. This way all components will use the same format and layout for the main grid, but different templates for the drop down.

I've successfully passed the data-source through to the kendo grid, however when I use ng-transclude to pass the template in for the drop down on the rows I get an error (Error: [ngTransclude:orphan]). I notice that the <ng-transclude></ng-transclude> in my directives html is getting passed through to the Kendo grid and is then orphaned now that it doesn't have an associated directive.

Here is some test code. I stripped out all of the dependent items.

<!-- accordionGrid.html --> 
<div>
  <kendo-grid options="gridOptions">
    <ng-transclude></ng-transclude>
  </kendo-grid>
</div>

// accordionGrid-directive.js 
function accordionGridDirective() {
return {
   controller: 'accordionGridController',
   replace: true,
   restrict: 'E',
   templateUrl: 'templates/accordionGrid.html',
   transclude: true,
   scope: {
     source: '=',
     columns: '='
    }
 };
}
angular.module('accordionGrid.accordionGridDirective', ['kendo.directives'])
 
   .directive('accordionGrid', [accordionGridDirective]);

//testController.html 
<accordion-grid data-source="data" columns="columns">
    <div k-detail-template>
      <kendo-tabstrip>
        <ul>
          <li class="k-state-active">Orders</li>
          <li>Information</li>
        </ul>
        <div>
          <div kendo-grid k-options="detailGridOptions(dataItem)"></div>
        </div>
        <div>
          <ul>
            <li>Information:</li>
            <li>Other Kendo Tab</li>
          </ul>
        </div>
      </kendo-tabstrip>
    </div>
  </accordion-grid>
// test-controller.js
function testController($scope) {
 
    // Init scope variables.
$scope.data = new kendo.data.DataSource({
      data: [
        { text: 'Foo', id: 1 },
        { text: 'Bar', id: 2 },
        { text: 'Baz', id: 3 }
      ]
    });
      $scope.columns = [
          { field: 'text', title: 'Text' },
          { field: 'id', title: 'Id' }
      ];
    // Init scope functions.
      $scope.detailGridOptions = function(dataItem){
          return {
              dataSource:[
                  { text: dataItem.text, id: dataItem.id },
                  { text: 'blah', id: 4 },
                  { text: 'blah2', id: 5 }
              ],
              filterable: true,
              pageable: false,
              groupable: false,
              sortable: true,
              scrollable:{
                  virtual: true
              },
              selectable: 'row',
              columns:[
                  { field: 'text', title: 'Text' },
                  { field: 'id', title: 'Id' }
              ]
          };
      };
  }
 
  angular.module('testApp.testController', ['kendo.directives'])
      .controller('testController', ['$scope', testController]);
// test-directive.js 
function testDirective() {
     
  return {
    controller: 'testController',
    replace: true,
    restrict: 'EA',
    // Path must be relative to index.html.
    templateUrl: 'templates/testController.html',
    scope: {
       
    }
  
  };
}
 
angular.module('testApp.testDirective', ['kendo.directives'])
    .directive('testDirective', [testDirective]);

Eric
Top achievements
Rank 1
 answered on 05 May 2015
3 answers
397 views

Hi,

I have started to evaluate kendo ui for a project I'm working on. I have problems getting multiple select working with drag and drop.

After searching I have come to a solution that works for Chrome(tested in version 41) and Firefox(tested in version 36) but NOT in IE (tested in version 11)

(reference   http://stackoverflow.com/questions/29502643/drag-and-drop-row-on-kendoui-grid-with-angularjs )

The goal is to be able to select multiple rows in a grid, and drag the selected rows to a treeview.

A test can be found here:

http://dojo.telerik.com/IHUYa/3

How can I get this to work with IE? 

In Chrome and Firefox, the "area selector" sometimes makes the drag fail as well. Is it possible to disable area-selection when dragging(drag start) from a  already selected item somehow?

This is a must have for our application any help will be appreciated.

Best regards

Erik Mellegård

Boyan Dimitrov
Telerik team
 answered on 05 May 2015
2 answers
188 views

I want to initialize my grid from an existing table AND I want to have aggregates computed for me and shown on the table as well. How can I do that? All the Demos show aggregates using a data source.

Thanks,

--John

Boyan Dimitrov
Telerik team
 answered on 05 May 2015
1 answer
120 views

Hi,

I am using the slotTemplate to display preferred event types by color. I have the <script> version working, but I am wanting to use an angularjs directive to handle the javascript logic instead. I have tried the obvious ways:

slotTemplate: '<directive-element></directive-element>' and slotTemplate: '<div directive-attribute></div>'

It seems to ignore it. 

Is there anyway for me to avoid <script> or literal strings containing both js and html?

Thanks,

Vladimir Iliev
Telerik team
 answered on 05 May 2015
1 answer
108 views
We are evaluating the Kendo UI components and especially the grid with Angular.  One of the things we will have to do in our applications is to issue a WebAPI call back to a asp.net controller to retrieve data.  It would be best not to embed this into the dataSource parm for the grid, so we would be treating it as local data.  Now all of that works, but I cannot get any styling to apply to the grid, like height and scrolling.  I know this has to be something simple, but...  I have attached files showing our source with comments hopefully to explain.  The files attached are claimant.html which has the html containing the grid.  This is injected via an Angular route.  Also attached is ClaimantController.js which contains the code to fetch data from one of our services and to setup grid options. I appreciate the help if someone can point me to the right documentation of right direction.  Thank you.
Dimo
Telerik team
 answered on 05 May 2015
2 answers
218 views

Hello everyone! I have a few custom grid filters that I've been using in my code that broke when I updated to the newest release of Kendo UI (2015.1.429). By broken, I mean that they don't load the optionLabel immediately and they are squashed on load. (See attached screenshot.) If I click on the dropdown, it does still load the information and the optionLabel shows, as well as it becomes the correct size, just not on load. Below is the code (js) I use for a State Filter and the grid it goes with:

 

$(document).ready(function () {
 
    function stateFilter(element) {
        element.kendoDropDownList({
            dataTextField: "Name",
            dataValueField: "Name",
            dataSource: new kendo.data.DataSource({
                schema: {
                    model: {
                        id: "StateId"
                    }
                },
                transport: {
                    read: {
                        url: "/Helper/GetStates",
                        dataType: "json"
                    }
                }
            }),
            optionLabel: "--Select Value--"
        });
    }
 
    $("#CompaniesGrid").kendoGrid({
        dataSource: new kendo.data.DataSource({
            schema: {
                model: {
                    id: "CompanyId",
                    fields: {
                        IsActive: { type: "boolean" }
                    }
                }
            },
            transport: {
                read: {
                    url: "/Company/GetCompanies",
                    dataType: "json"
                }
            },
            filter: {
                field: "IsActive",
                operator: "eq",
                value: true
            },
            pageSize: 100
        }),
        sortable: true,
        pageable: true,
        scrollable: false,
        columns: [
        {
            field: "Name",
            title: "Company",
            template: "<a href='/Company/Detail/#:CompanyId#'>#:Name#</a>"
        },
        {
            field: "City",
            title: "City"
        },
        {
            field: "State",
            title: "State",
            width: "90px",
            filterable: {
                ui: stateFilter,
                operators: {
                    string: {
                        eq: "Is equal to"
                    }
                }
            }
        },
        {
            field: "Phone",
            title: "Phone Number",
            filterable: false
        },
        {
            field: "PrimaryContactDisplay",
            title: "Primary Contact",
            template: "#if(PrimaryContactId == null){##}else{# <a href='/Contact/Detail/#:PrimaryContactId#'>#:PrimaryContactDisplay#</a> #}#"
        },
        {
            field: "IsActive",
            title: "Active",
            template: "#: IsActive ? 'Yes' : 'No' #",
            width: "90px"
        }],
        filterable: {
            extra: false,
            messages: {
                isTrue: "Yes",
                isFalse: "No"
            }
        }
    });
 
});

Note that there are two custom filters on this page: The Site Filter and the Status Filter. The Status Filter works just fine. It's just the Site Filter (and all of the other filters I use that are used similarly.) Any help here would be greatly appreciated. It's a small thing, but it bugs me. (See what I did there? :) )

Thanks!

Anna

Nikolay Rusev
Telerik team
 answered on 05 May 2015
3 answers
590 views
Is there a way to show the number of items in a parent node, as well as the number of child nodes under each sibling?
Alex Gyoshev
Telerik team
 answered on 05 May 2015
4 answers
775 views

Our app is fully localized/globalized, supporting (some of the few) en-US and de-DE.

In our DB, some of the currency values are stored in USD, some of the currency values are stored as Euros. Obviously, we want to keep the currency straight between the two - formatting as USD, when in fact it is Euros, would be a big mistake.

So, following this example, we can format for USD/Euros, given the proper locale.

My issue is: Given data (12345.67) in the DB in Euros and the user logged into the en-US locale, I want to have the Euro symbol show up properly (including location of symbol relative to numeric value) and the commas/decimals to be proper as well (i.e. 12,345.67 €). And the reverse, given data (98765.43) in the DB in USD and the user logged into de-DE, I want to have the USD symbol show up and the commas/decimals to be proper as well (i.e. $ 98.765,43).

How can I achieve this?

Thanks,

--Ed

 

Daniel
Telerik team
 answered on 05 May 2015
10 answers
3.5K+ views
I am having a problem with the pageSize in the KendoUI Web Control:

Here is a non-working copy using the demo code: Page Size Not Working

Here is a working copy only changing pageable to true without pageSize: Working Paging - No Page Size

I'm wondering how I can get the pageSize dropdown to appear like in this example .

Thanks.

-John-
Kiril Nikolov
Telerik team
 answered on 05 May 2015
7 answers
1.3K+ views
Hello.
I have grid with different column types date, datetime, time, etc.

I get data from server and fill grid successfully.
But when I refresh grid using .dataSource.data(data1) I get bad format for date and another types.

Date format from server :"/Date(1412228341970)/"
Date format showed: 02/10/2014 -
It's OK
Date format after refresh: /Date(1412228341970)/ -
WTF? I set column type as date and set datasource shema as date, but after refresh it show me string format.

Source example

var data1 = [{OrderId: 1, CreateDate: "/Date(1412228341970)/"}, {OrderId: 2, CreateDate: "/Date(1412233734310)/"}]
        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                  data: data1,
                    schema: {
                        model: {
                            fields: {
                                OrderId: { type: "number" },
                                CreateDate: { type: "date", format: "{0:dd/MM/yyyy}",},
                            }
                        }
                    }
                },
                height: 540,
                sortable: true,
                reorderable: true,
                groupable: true,
                resizable: true,
                filterable: true,
                columnMenu: true,
                pageable: true,
                columns: [ {
                        field: "OrderId",
                        title: "Order Id",
                    },  {
                        field: "CreateDate",
                        title: "CreateDate",
                      format: "{0:dd/MM/yyyy}",
                                            type: "date",
 
                    }
                ]
            });
        });
       
      var updateGrid = function() {
         $("#grid").data("kendoGrid").dataSource.data(data1)
      }


One solution that I found is set template for field returned string:
 template: "#= kendo.toString(kendo.parseDate(CreateDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #",

But this fix is not good I think.
Alexander Valchev
Telerik team
 answered on 05 May 2015
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
Licensing
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
+? 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?