Telerik Forums
Kendo UI for jQuery Forum
1 answer
517 views

Hi!

I'm working on a rather large page and I notice that the page loads up with ugly controls and then the browser window hangs for a second or two and controls start converting to kendo. And once the whole page is ready, there is still some delay before inputs start accepting text or interaction. Is there a way/best practice to load up kendo faster or pre-cook? If not at least put up view (page) sized loading spinner until page finalizes. I'm assuming something in Kendo Framework would trigger a call back once everything is settled.

Thanks.

Dimiter Topalov
Telerik team
 answered on 24 Aug 2016
3 answers
396 views

I am using the grid in an Angular component with calls to an API.  In order to set the API parameters from another set of controls, I use the read function in the dataSource transport.  My initial attempt at this function used the options.data.take and options.data.skip to set up the count and offset in my API, as well.  In the grid options, I have the pageable set to an object with pageSizes and buttonCount.  I can pull the correct data into the grid and use the pager at the bottom to move between pages.  When the external filters object that is an input for my Angular component changes, the grid rebinds using k-rebind in the kendo-grid tag on the Angular view.  This works most of the time.  

The issue I have is when I have something with a lot of data and move to one of the later pages using the pager.  If I then change my external filters to give me a smaller set of data, the grid attempts to rebind while on a page that is AFTER the last page in the new dataSource.  Based on several questions I have seen, I added code to reset the dataSource.page to 1 in the read function prior to refreshing the data through the API.  However, this causes the read function to run twice.  I can minimize this effect by checking to see if the page is already 1, but any time the dataSource.page method is called, the read function runs twice.  I do not want to cause the load on our API to be greater than necessary.  I have tried just changing the options so that the calls to the API are correct, but this causes the pager to give odd numbers such as "250 - 4 of 4 items".  Is there any way to stop this from happening and allow the pager to be correct?  

My current read function is as follows:

read: function (options) {
    var filtersChanged = IsFilterChanged();  // method to do compare on external filters
    if (filtersChanged) {
        if (vm.gridOptions.dataSource.page() != 1) {
           vm.gridOptions.dataSource.page(1);
        }
        options.data.page = 1;
        options.data.skip = 0;
    }
    var params = {
        count: options.data.take,
        offset: options.data.skip
    };
    if (vm.selectedFilters.myOption) {
        params.optionID = vm.selectedFilters.myOption;
    }
    // ...
    myService.availableItems.get(
        params,
        function (data) {
            options.success(data);
        },
        function (error) {
            // do something
        });
},

The view is as follows:

<kendo-grid id="myItems" options="vm.gridOptions"
            k-ng-delay="vm.selectedFilters"
            k-rebind="vm.selectedFilters" >
</kendo-grid>

Thanks!

Rosen
Telerik team
 answered on 24 Aug 2016
1 answer
469 views

Hi I am able to call my odata controller with the correct key but I am missing the payload, so delta is null.

How can I set the payload? and also return the updated entity?

datasource definition:

var baseUrl = "odata/reports",
            dataSource = new kendo.data.DataSource({
                type: "odata-v4",
                transport: {
                    read: {
                        url: baseUrl,
                        dataType: "json"
                    },
                    update: {
                        url: (data) => {
                            return baseUrl + "(" + data.models[0].Id + ")";
                        },
                        dataType: "json",
                        type: "PATCH"
                    },
                    destroy: {
                        url: baseUrl,
                        dataType: "json",
                        type: "DELETE"
                    },
                    create: {
                        url: baseUrl,
                        dataType: "json",
                        type: "POST"
                    }
                },

 

webapi odata controller:

public IHttpActionResult Patch(int key, Delta<T> delta)
        {
            Validate(delta.GetEntity());


            if (!ModelState.IsValid)
                return BadRequest(ModelState);


            var entity = Repository.GetByKey(key);
            if (entity == null)
                return NotFound();


            if (!AuthenticationService.HasWriteAccess(CurentUser, entity))
                return Unauthorized();


            try
            {
                delta.Patch(entity);
                Repository.Save();
            }
            catch (Exception e)
            {
                return InternalServerError(e);
            }
            return Updated(entity);
        }

Boyan Dimitrov
Telerik team
 answered on 24 Aug 2016
3 answers
447 views
I'm having trouble getting a kendo grid to filter in IE9 when it is open in a bootstrap modal window. JSBin here: http://jsbin.com/qoxox/2

I'm using v2013.3.1324 inhouse although the behaviour is the same with v2013.3.1119 used here. Jquery version seems not to matter.

When I:
-> click on the button
-> modal is shown with data in the grid
-> click filter on Name column
-> change option to Contains, enter 'g', click 'Filter' button

The expected behaviour for all browsers is (not in order):
-> 'grid.dataSource.filter' fires
-> the log function is triggered
-> the grid is filtered to just one entry

The actual behaviour in IE9 is:
-> 'grid.dataSource.filter' does not fire
-> the grid is not filtered

Firefox follows the expected behaviour, and I don't understand why IE9 does not do the same. Looking into the source for kendo.all.js, the DataSource.filter function doesn't seem to be getting the same data in IE as FFox, but I can't see why that would be.

Is there anything special I need to do to get this working in IE as well as FFox?
Swati
Top achievements
Rank 1
 answered on 24 Aug 2016
3 answers
391 views
Hi,

I have a mvc grid binding to data table.

On web page, I have a dropdownlist, when user select different item, I make a ajax call which returns a different datatable with different columns.

On ajax success, I do

$('#GridName').data('kendoGrid').dataSource.data(data);
$('#GridName').data('kendoGrid').refresh();

Which normally work if grid is binding to a model, but not this time for dynamic binding

Boyan Dimitrov
Telerik team
 answered on 24 Aug 2016
1 answer
122 views

Hi,

When running webpack I get the error "Unused label" into the file node_modules\kendo\js\spreadsheet\runtime.functions.js

T. Tsonev
Telerik team
 answered on 24 Aug 2016
2 answers
564 views

Hi,

I've installed kendo (latest buil) using npm with my pro license.

I'm able to make it work using webpack, but I could not do the same with jszip which is required for export.

 

Any suggestion?

Thanks!

Petyo
Telerik team
 answered on 24 Aug 2016
6 answers
1.2K+ views

Ok so I have a kendo grid. Leaving off the definition to make not so long, but I do have autoBind: false on it. I then do the 3 functions below to add a custom multi-select filter to one column. The other thing I have is I set an initial filter on that same column in the grid definition. The problem I am having is that filter gets called twice, once with correct params and a 2nd time with the original filter, or if I have that original filter commented out; it will call it the second time using any other column filters on the grid you have set in the ui, but without using the custom filter on this one column.

I've spent all day and night trying to figure this out... Any ideas.

 

01.self.onSchemaPopulated = function (columns, model) {
02. 
03.        var measureKey = _.find(columns, function(item) {
04.            return item.field === 'measure_key';
05.        });
06. 
07.        measureKey.filterable =
08.            {
09.                extra: false,
10.                operators: {
11.                    string: {                          
12.                        eq: "Is equal to"                          
13.                    }
14.                },
15.                ui: self.measureKeyFilter                  
16.            };
17. 
18.    };
19. 
20.    self.measureKeyFilter = function (element) {
21. 
22.        element.removeAttr("data-bind");
23. 
24.        var menu = $(element).parent();
25. 
26.        menu.find(".k-filter-help-text").text("Show records for measure keys in:");
27.        menu.find("[data-role=dropdownlist]").remove();
28. 
29.        var multiSelect = element.kendoMultiSelect({
30.            dataBound: function (e) {
31.                e.sender.tagList.addClass('k-full-button');
32.                e.sender.ul.addClass('k-multiselect-items');
33.            },
34.            dataSource: _.invoke(self.itemSelected().measures(), 'measure_key'),
35.            tagMode: 'single',
36.            tagTemplate: '<div>#:values.length# measures selected...</div>',
37.            value: _.invoke(self.itemSelected().checkedMeasures(), 'measure_key'),
38.        }).data("kendoMultiSelect");
39. 
40.        menu.find("[type=submit]").on("click", { widget: multiSelect }, self.filterByMeasureKey);
41. 
42.    };
43. 
44.    self.filterByMeasureKey = function (e) {
45. 
46.        var newFilter = { logic: "and", filters: [] };
47.        var measureFilter = null;
48.        var values = e.data.widget.value();
49. 
50.        if (values.length !== self.itemSelected().measures().length) {
51. 
52.            measureFilter = { logic: "or", filters: [] };
53. 
54.            $.each(values, function (i, v) {
55.                measureFilter.filters.push({ field: "measure_key", operator: "eq", value: v });
56.            });
57. 
58.            newFilter.filters.push(measureFilter);
59. 
60.        };
61. 
62.        var grid;
63. 
64.        if (self.isRelationshipSummaryToggled()) {
65.            grid = $('#' + self.rsOptions.id).data("kendoGrid");
66.        } else {
67.            grid = $('#' + self.rdOptions.id).data("kendoGrid");
68.        };
69. 
70.        var currentFilters = grid.dataSource.filter();
71. 
72.        if (!isNull(currentFilters)) {             
73. 
74.            _.each(currentFilters.filters, function (x) {                  
75. 
76.                if (!_.isArray(x.filters)) {
77.                    newFilter.filters.push(x);
78.                } else if (x.filters[0].field !== 'measure_key') {
79.                    newFilter.filters.push(x);
80.                };
81. 
82.            });                
83. 
84.        };         
85. 
86.        grid.dataSource.filter(newFilter);
87. 
88.    };

Tony
Top achievements
Rank 1
 answered on 24 Aug 2016
3 answers
363 views

Inside a main grid I have a nested detail grid and a button. How is it possible to add a row to the nested grid on a button click. My solution doesn't work: @scope.detailsGrid is undefined (which is predictable).

$scope.addRow = function () {
                   var grid = $scope.detailsGrid.data("kendoGrid");
                   grid.addRow();
                   return false;
               };

<kendo-grid k-scope-field="mainGrid" options="mainGridOptions">
   <div k-detail-template>                                     
        <div kendo-grid k-scope-field="detailsGrid" k-options="detailGridOptions(dataItem)"></div>
         <button ng-click="addRow()" style="width:100px; height:30px;">Add row</button>                     
   </div>
</kendo-grid>
J
Top achievements
Rank 1
 answered on 23 Aug 2016
3 answers
2.2K+ views

How to draw a line between targeted Menu Items. Documentation says use 'k-separator' class. Is there alternative?

 

Also, By default a line is added after first menu item. How do i remove it? Please see attached.

Dimiter Madjarov
Telerik team
 answered on 23 Aug 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
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?