Telerik Forums
Kendo UI for jQuery Forum
5 answers
272 views

We have a requirement of displaying aggregations grouping in group footer template and footer template. And we want column drag and drop feature for grouping as well. 

We tried with attached code, but we were not able to achieve it.

Boyan Dimitrov
Telerik team
 answered on 05 May 2016
3 answers
131 views

Hi,

I was wondering what some developers use as their UI for creating Kendo UI Pro websites?

I have VS2012, however, it doesn't seem there are any NuGet packages anymore.

Thanks, Al

Kiril Nikolov
Telerik team
 answered on 05 May 2016
7 answers
1.4K+ views

Hi,

I am working on master details kendo ui application and I use angular. I am not using hierarchical grid. Master and details grid is separated and it is displayed in different tabStrip. Master grid is displayed within first tabStrip and details grid is displayed within second tabStrip. Also, I use angular service for CRUD.              This is my JSON for master grid:

[{ "Id": 1, "Date": "24.01.2015", "Description": "descr 1", "documentTypeId": 1 },{ "Id": 2, "Date": "26.01.2015", "Description": "description2", "documentTypeId": 2 },{ "Id": 3, "Date": "22.01.2015", "Description": "description3", "documentTypeId": 3 },{ "Id": 4, "Date": "24.01.2015","Description": "description4", "documentTypeId": 2 },{ "Id": 5, "Date": "29.01.2015", "Description": "description5", "documentTypeId": 4 },{ "Id": 6, "Date": "25.01.2015""Description": "description6", "documentTypeId": 6 }]

This is my angular service:
angular.module("app").factory('myService', function ($http) {
  
      return {
          getAll: function (onSuccess, onError) {
              return $http.get('/Scripts/app/data/json/master/masterGridData.js').success(function (data, status, headers, config) {
                  onSuccess(data);
              }).error(function (data, status, headers, config) {
                  onError(data);
              });
          },

          getAllItems: function (onSuccess, onError) {
              return $http.get('/Scripts/app/data/json/master/detailsGridData.js').success(function (data, status, headers, config) {
                  onSuccess(data);
              }).error(function (data, status, headers, config) {
                  onError(data);
              });
          }

  }
});

This is my angular controller:
var app = angular.module("app", ["kendo.directives"]).controller("myController", function ($scope, myService) {
  
$scope.tabStrip = null;
$scope.$watch('tabStrip', function () {
    $scope.tabStrip.select(0);
});
  
$scope.masterDataSource = new kendo.data.DataSource({
    transport: {
        read: function (options) {
            url = "/Scripts/app/data/json/master/masterGridData.js",
            myService.getAll(function (data) {
                options.success(data);
            }).error(function (data) {
                options.error(data);
            })
        }
    },
    schema: {
        model: {
            id: "Id",
            fields: {
                Id: { type: "number" },
                Date: { type: "string" },
                Description: { type: "string" },
                DocumentTypeId: { type: "number" }
            },

            Amount1: { //here there should be sum value from details grid column Amount1 },

            Amount2: { //here there should be sum value from details grid column Amount2 }

        }
    },
    pageSize: 16
});
  
$scope.gridMaster = {
    columns: [
            { field: "Id", width: "70px" },
            { field: "Date", title: "Date", width: "70px" },
            { field: "Description", title: "Description", width: "170px" },
            { field: "DocumentTypeId", hidden: true }
    ],
    dataSource: $scope.masterDataSource,
    selectable: true,
    filterable: true,
    scrollable: true,
    pageable: {
        pageSize: 16,
        pageSizes: ["50", "100", "200", "All"]
    },
    toolbar: [{
        name: "create"
    }],
    change: function () {
        var dataItem = this.dataItem(this.select());
        $scope.id = dataItem.Id;
        $scope.date = dataItem.Date;
        $scope.description = dataItem.Description;
        $scope.documentTypeId = dataItem.DocumentTypeId;
        if (dataItem) {
                gridDetails.dataSource.filter({ field: "foreignKeyId", value: dataItem.Id, operator: "eq" });
            }
    }
};


$scope.detailsDataSource = new kendo.data.DataSource({
        transport: {
            read: function (options) {
                url = "/Scripts/app/data/json/detail/detailsGridData.js",
                myService.getAllItems(function (data) {
                    options.success(data);
                }).error(function (data) {
                    options.error(data);
                });
            }
        },
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { type: "number" },
                    foreignKeyId: { type: "number" },
                    DescriptionItem: { type: "string" },
                    Amount1: { type: "number" },
                    Amount2: { type: "number" }
                }
            }
        },
        pageSize: 10
    });

 

$scope.gridDetails = {
        columns: [
            { field: "Id", hidden: true },
            { field: "finGeneralLedgerId", hidden: true },
            { field: "DescriptionItem", title: "Description Item", width: "270px" },
            { field: "Amount1", title: "Amount 1", width: "80px", format: "{0:n2}" },
            { field: "Amount2", title: "Amount 2", width: "80px", format: "{0:n2}" }
        ],
        dataSource: $scope.detailsDataSource,
        selectable: true,
        filterable: true,
        scrollable: true,
        pageable: {
            pageSize: 10,
            pageSizes: ["15", "30", "50", "All"]
        },
        toolbar: [{
            name: "createNew",
            template: '<button class=\'k-button\' ng-click=\'buttonAddDetails()\'>Add new item</button>'
        }],
        change: function () {
            var dataItem = this.dataItem(this.select());
            $scope.foreignKeyId = dataItem.foreignKeyId;
            $scope.descriptionItem = dataItem.DescriptionItem;
            $scope.amount1 = dataItem.Amount1;
            $scope.amount2 = dataItem.Amount2;
            $scope.$digest();
        },
        height: 215
    };

});

This is JSON for details grid:
[
    { "Id": 1, "foreignKeyId": 1, "DescriptionItem": "descr 1", "Amount1": 0, "Amount2": 1000.00 },
    { "Id": 2, "foreignKeyId": 1, "DescriptionItem": "descr 2", "Amount1": 900.00, "Amount2": 0 },
    { "Id": 3, "foreignKeyId": 2, "DescriptionItem": "descr 3", "Amount1": 970.00, "Amount2": 0 },
    { "Id": 4, "foreignKeyId": 3, "DescriptionItem": "descr 4", "Amount1": 0, "Amount2": 2000.00 },
    { "Id": 5, "foreignKeyId": 2, "DescriptionItem": "descr 5", "Amount1": 1970.00, "Amount2": 0 },
    { "Id": 6, "foreignKeyId": 2, "DescriptionItem": "descr 6", "Amount1": 0, "Amount2": 2250.00 },
    { "Id": 7, "foreignKeyId": 3, "DescriptionItem": "descr 7", "Amount1": 720.00, "Amount2": 0 },
    { "Id": 8, "foreignKeyId": 2, "DescriptionItem": "descr 8", "Amount1": 2800.00, "Amount2": 0 }
]

When I select some row in masterGrid, I have correspond row(s) in detailsGrid.
As you can see in JSON for details grid there are "foreignKeyId" that show values from masterDataSource Id. Also, there are "Amount1" and "Amount2" values. My question is how can sum by column "Amount1" and "Amount2" in detailsGrid and display that sum in "Amount1" and "Amount2" column by grid row masterGrid. For example:
Id = 1 and Id = 2 (from JSON details) have same foreignKeyId value (foreignKeyId = 1) which correspond Id from masterDataSource (Id =1 from JSON master). Sum of Amount1 equals 900.00 and sum of Amount2 equals 1000.00. How to display that sum in first row master grid in column Amount1 and Amount2, respectively.

Any help really useful. Thanks in advance.

Regards, Branimir
Nikolay Rusev
Telerik team
 answered on 05 May 2016
4 answers
166 views

Hi,


We recently updated the kendo version in use by our app to v2016.1.226


Since the launch of our last version we have an increasing number of users who complain that when they first try to scroll the app, the result is an empty screen as can be seen in the attached image "empty-screen-galaxy-s4.png"

We know that all those users have Android 5.x (e.g. 5.1.1, 5.0.1) and various devices (Galaxy S4, Oneplus X, Huawei Mate s).
Our app is using kendo listview and we tried to debug this issue with a device connected to Chrome Dev tools. We reached the following conclusions:
- Trying to reset kendo scroller has no effect on the problem
- Even though it may look like the content is scrolled up outside of the screen area, the debug shows that the view and the listview are correctly placed on the screen, as can be seen in the attached image listview-correctly-placed.png

Are you familiar with any other cases of this nature? Any idea how can we solve them?

Thanks,

Ron.
Dimo
Telerik team
 answered on 04 May 2016
0 answers
187 views

The official 2016 Q2 Release (2016.2.504) release will export Excel files with grid lines disabled.
The change is not intentional and will be reverted in the following hotfix and service pack releases.
As a workaround you can turn on the grid lines explicitly in the ExcelExport event:

$("#grid").kendoGrid({
...
 
    excelExport: function(e) {
        e.workbook.sheets[0].showGridLines = true;
    }
});

Apologies for the caused inconvenience.



Kendo UI
Top achievements
Rank 1
 asked on 04 May 2016
3 answers
3.2K+ views

Hello,

I have been unsuccessful adding a Kendo Dropdown list to a Kendo Toolbar. 

Using the code below I can add a standard select to the items list.

items.Add().Template("<select id='areaDropdown' class='k-dropdown  k-ie k-select k-state-border-down' /> ").Overflow(ShowInOverflowPopup.Never);

 

1) How can I replace this with a Kendo Dropdown List?

2) How can I make it read only?

3) How to I data bind the list to a member in the View Model of type List<SelectListItem>()  ?

 

Thanks,

Reid

Reid
Top achievements
Rank 2
 answered on 04 May 2016
1 answer
238 views

I want to change default validation string message to some meaning full message please, can some tell me how to do that.this is my sample code i have attached a sample screen shot as well.Thanks.

 

 <kendo:grid   height="300" class="grid_status" name="grid_#=smscId#"  dataBound="gridDataBound"   insert="insertingRecordStatus" edit="editingRecord" pageable="false"  sortable="true" scrollable="true" navigatable="true" editable="true" style="text-transform: uppercase" width="400">
      
       <kendo:grid-toolbar>
           <kendo:grid-toolbarItem name="create"  />
           <kendo:grid-toolbarItem name="save" />
           <kendo:grid-toolbarItem name="cancel"/>
           <kendo:grid-toolbarItem name="Newitem" template="<input type='button' class='k-button k-button-icontext' value=' Load All Status' onclick='LoadAllStatus()' />"/>
        <kendo:grid-toolbarItem name="Newitem" template="<input type='button' class='k-button k-button-icontext' value=' Refresh' onclick='refreshStatus()' />"/>
       </kendo:grid-toolbar>
      
       <kendo:grid-columns>                 
           <kendo:grid-column title="Description" field="smssStatusdesc">            
           </kendo:grid-column>
           <kendo:grid-column title="smscType" field="smscType" hidden="true"/>
           <kendo:grid-column title="code" field="smssStatus" hidden="true"/>
           <kendo:grid-column title="Applied" field="smssFlg">
            <kendo:grid-column-values value="${smssFlg}"/>
           </kendo:grid-column>
           <kendo:grid-column title="type" field="type" hidden="true"/>            
           </kendo:grid-columns>
       <kendo:dataSource  serverPaging="true"  change="gridSuccessEvent" error="gridFailureEvent" data="data" serverSorting="false"
serverFiltering="false" serverGrouping="true" >
<%-- <kendo:dataSource-schema data="data" total="total"></kendo:dataSource-schema> --%>
           <kendo:dataSource-transport>                
               <kendo:dataSource-transport-read url="${readUrlhasSMSSRead}" data="<%=data%>" dataType="json" type="POST" contentType="application/json"  />
               <kendo:dataSource-transport-update url="${updateUrlhasSMSSUpdate}" dataType="json" type="POST" contentType="application/json">
</kendo:dataSource-transport-update>
<kendo:dataSource-transport-create url="${createUrlhasSMSSCreate}" dataType="json" type="POST" contentType="application/json">
</kendo:dataSource-transport-create>
               
               <kendo:dataSource-transport-parameterMap>
                <script>
                function parameterMap(options, type) {

                return JSON.stringify(options);

}
                </script>
               </kendo:dataSource-transport-parameterMap>
               
           </kendo:dataSource-transport>
            <kendo:dataSource-schema errors="errors" data="data" total="total" >
               <kendo:dataSource-schema-model id="smssId">
                   <kendo:dataSource-schema-model-fields>
                   
                        <kendo:dataSource-schema-model-field name="smssStatusdesc" type="string">
                        <kendo:dataSource-schema-model-field-validation required="true" />                        
                       </kendo:dataSource-schema-model-field>
                       <kendo:dataSource-schema-model-field name="smssFlg" type="string" defaultValue="1">
                        <kendo:dataSource-schema-model-field-validation required="false" />
                       </kendo:dataSource-schema-model-field>
                       <kendo:dataSource-schema-model-field name="smssStatus" type="string" defaultValue="Y">
                        <kendo:dataSource-schema-model-field-validation required="false" />
                       </kendo:dataSource-schema-model-field>
                       <kendo:dataSource-schema-model-field name="smssSmscId" type="string" defaultValue="#=smscId#" >
                        <kendo:dataSource-schema-model-field-validation required="false" />
                       </kendo:dataSource-schema-model-field>
                   </kendo:dataSource-schema-model-fields>
               </kendo:dataSource-schema-model>
           </kendo:dataSource-schema> 
       </kendo:dataSource>
   </kendo:grid>

 

 

Viktor Tachev
Telerik team
 answered on 04 May 2016
3 answers
152 views

Hi,

I have version Kendo UI Professional Q1 2016 and was hoping to find and example for a memo style popup editor. Could you provide link or document how to accomplish this task. I see demos for date and combo boxes but not memo fields.

TIA

John

Dimiter Topalov
Telerik team
 answered on 04 May 2016
1 answer
268 views

I have a tree view and a grid view. I am dragging item from grid and dropping  it to a selected node in my treeview, which is working great. Also I allow dragging and dropping of node with the tree. However if by accident I drag an element from treeview and drop it to grid view I get an exception "Uncaught TypeError: Cannot read property 'loaded' of undefined"

and my page froze.

How can I prevent droping any element in my grid view and avoid this exception?

//Bind data to Employee grid
    $("#employeesGrid").kendoGrid({
        dataSource: $scope.datasourceEmployees,
        height: 660,
        dragAndDrop: false,
        sortable: true,
        pageable: true,
        selectable: 'row',
        filterable: {
            mode: "row"
        },
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 7
        },
        columns: [
            {
                field: "EmployeeKey",
                title: "Employee Key",
                filterable: false,
                width: 100
            },
 
            {
                field: "FullName",
                title: "Employee Full Name",
                filterable: {
                    cell: {
                        showOperators: false
                    }
                },
                width: 200
            },
 
            {
                field: "JDEEmployeeName",
                title: "JDE Employee Name",
                filterable: {
                    cell: {
                        showOperators: false
                    }
                },
                width: 140
            },
 
            {
                field: "SFEmployeeName",
                title: "SF Employee Name",
                filterable: {
                    cell: {
                        showOperators: false
                    }
                },
                width: 140
            }
        ]
    });
 
    $("#employeesGrid").kendoDraggable({
       
        filter: "tr:not(.k-filter-row)", //specify which items will be draggable
        hint: function (element) { //create a UI hint, the `element` argument is the dragged item
            employeeDragged = 1;
            console.log(employeeDragged);
            return element.clone().css({
                "opacity": 0.6,
                "background-color": "#0cf"
            });
        }
    });

 

 

PayrollHierarchyService.getCommunities().then(
        function (results) {
            $scope.dsCommunity = results;
            GenerateDefaultJSONData();
             
            tvComunity = $("#treeview-Community").kendoTreeView({
                dataSource: $scope.dsCommunityRolesDefault,
                dragAndDrop: true,
                dataTextField: "text",
                loadOnDemand: false,
                drop: onDrop
               
 
            }).data("kendoTreeView");
        },
      function (error) {
          console.log(error.statusText);
          alertNotification.show("Can not Connect to the Database!", "error");
      }
    );
 
    //Drag and Drop element within a tree (ie Copy, paste node within tree)
    function onDrop(e) {
 
        e.preventDefault();
 
        var sourceItem = this.dataItem(e.sourceNode).toJSON();
        var destinationNode = $(e.destinationNode);
 
        var treevcomunity = $('#treeview-Community').data('kendoTreeView');
        treevcomunity.append(sourceItem, destinationNode);
    }
 
    //Drag and add Employee elements to community treeview
    $("#treeview-Community").kendoDropTarget({
        drop: function (e) {
            if (employeeDragged) {
                employeeDragged = 0;
                var draggableElement = e.draggable.currentTarget,
                dataItem = $scope.datasourceEmployees.getByUid(draggableElement.data("uid"));
 
                var treevcomunity = $('#treeview-Community').data('kendoTreeView');
                var selectedNodeComunity = treevcomunity.select();
 
                if (selectedNodeComunity.length != 0 && treevcomunity.parent(selectedNodeComunity).length != 0) {
                    if (dataItem === undefined || dataItem === null) {
 
                    }
                    else treevcomunity.append({ text: dataItem.FullName }, selectedNodeComunity);
 
                }
                else
                    alertNotification.show("Please select a Community Role first", "error");
            }
        }
    });

 

Dimiter Topalov
Telerik team
 answered on 04 May 2016
3 answers
2.0K+ views

"transparent" or "" or "Transparent" do not work, result is solid white background This will only take a hex color string, will not accept an rgba string. I need a transparent background for all my charts.

 

 function createChart() {
            $("#detail-chart").kendoChart({
               theme: "Material",
                      chartArea: {background:"transparent", height:300},
                      title: {
                          position: "top",
                          text: "Sales Percentage \n Per Market",
                          color: "#868686"
                      },
                      legend: {
                          visible: true,
                          position: "bottom",
                          labels: {
                            color: "#868686",
                            padding: {right:10,bottom:2},
                            margin: {right:14}
                          }
                      },
                seriesDefaults: {
                    type: "bar",
                    stack: true
                },
                series: [{
                    name: "Sales Percentage",
                    data: [40, 32, 61],
                    color: "#425968"
                }, {
                    name: "Total Local Market",
                    data: [100, 100, 100],
                    color: "#c3c3c3"
                }],
                valueAxis: {
                    max: 100,
                    majorUnit: 50,
                    line: {visible: false},
                    minorGridLines: {visible: false},
                    labels: {
                      format:"{0:n0}%",
                      color: "#525252"
                    }
                },
                categoryAxis: {
                    categories: ["African American", "Hispanic", "Asian American"],
                    majorGridLines: {visible: false},
                    labels: {
                      color: "#525252"
                    }
                },
                tooltip: {
                    visible: true,
                  template: "#= category # (#= series.name #): #= value #%",
                    font: "20px"
                }
            });
        }

Iliana Dyankova
Telerik team
 answered on 04 May 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
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
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?