Telerik Forums
Kendo UI for jQuery Forum
3 answers
1.4K+ views

Hi,

the grid popup editor window's close event is fired twice when closing the popup window via the close button (not the cancel or save button).

See this dojo: http://dojo.telerik.com/IdIYe

Even using the "one" binding produces a duplicate event:

edit: function (e) {
    e.container.data("kendoWindow").one("close", onEditorClosed);
}

I depend on this event being fired only once, because I'm trying to fix my previous issue with flashing nested modal windows (http://www.telerik.com/forums/avoid-overlay-flash-with-nested-modal-windows).

I tried to debug the code: _close() of window is called twice, once via _windowActionHandler() and once via _destroyEditable() -> close(). The strange thing is that both code paths seem to operate on different _events objects. The first code path calls and removes the "one" event handler from _events, but on the second path, _events appears to be unchanged, i.e. the "one" event handler is still there and called again.

Any clues? Looks like a bug to me.

Regards

Kasimier Buchcik

Konstantin Dikov
Telerik team
 answered on 14 Mar 2016
3 answers
167 views

I have a tree list with 2 parents nodes, I wonder if there's any way when I click within the parent box happen the same effect that happens when I click the arrow to open the children items

Here is the config of my tree list

$scope.treelistOptions = {
                    dataSource: {
                        data: $scope.treeData,
                        schema: {
                            model: {
                                fields: {
                                    id: { type: "integer", editable: false, nullable: false },
                                    parentId: { field: "parentId", nullable: true, type: "integer" }
                                },
                                expanded: true
                            }
                        }
                    },
                    columns: [
                        { field: "operationCode", title: "Descrição", attributes: {"class": "colorFirstColumn"},
                            template: "<strong>#: operationCode #</strong>"},
 
                        { field: "qtdTotalCompra", title: "MWm"},
 
                        { field: "valorTotalCompra", title: "R$"},
 
                        { field: "qtdTotalVenda", title: "MWm"},
 
                        { field: "valorTotalVenda", title: "R$"},
 
                        { field: "valorTotalBalanco", title: "Balanço"},
                        { field: "valorResultado", title: "Resultado"}
                    ],
                    sortable: false,
                    reorderable: false,
                    resizable: true,
                    columnMenu: false
                };

Nikolay Rusev
Telerik team
 answered on 14 Mar 2016
1 answer
435 views

Hi,

I was wondering what is the best way to implement the repository pattern with the kendo grid filtering server side.

I know we can use the IQueryable interface but is not the best pratice to do this in your repository pattern.

I took a look at the DataSourceRequest parameter passed in my web api controller.

I wonder how I can convert the Kendo Filter object to use them in my repository pattern and if this is possible ?

Thanks

Viktor Tachev
Telerik team
 answered on 12 Mar 2016
1 answer
831 views

I have a page with a combo box to select a type and two date pickers (start date and end date).

The user selects a type, both dates and clicks on a load button.

The request retrieves data from all types in this date range.

And I'm using a filter in a data source to display on a grid only the records of the type selected by the user (relevant information of the data response).

Code:

$("#loadButton").kendoButton({
    click: loadGrid
});
 
var loaded = false;
function loadGrid(e) {
    if (type) {
        if (loaded) {
            var grid = $("#grid").data("kendoGrid");
            grid.wrapper.empty();
            grid.destroy();
        }
 
        $("#grid").kendoGrid({
            scrollable: false,
            editable: false,
            autoBind: false,
            dataSource: dataSource,
            columns: [], // omitted
        });
 
        var typeString = kendo.toString(type);
        $("#grid").data("kendoGrid").dataSource.filter({
           logic: "or",
           filters: [
               { field: "type", operator: "startswith", value: "-1" },
               { field: "type", operator: "startswith", value: typeString }
           ]
        });
        loaded = true;
    } else {
       e.preventDefault();
       alert("Select a type!");
    }
}
 
function getData() {
        return {
            type: type,
            startDate: kendo.toString(pickerStart.value(), "yyyy-MM-dd"),
            endDate: kendo.toString(pickerEnd.value(), "yyyy-MM-dd")
        };
    }
 
var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: url",
                dataType: "json",
                data: getData
            }
        },
        schema: {
            total: "total",
            data: "list"
        },
        group: { field: "date" }
    });

 

If the user selects a different type, the data in the data source is filtered and it works fine.

The problem is that, if the user selects a different date, a new request should be done to get the new data and then filtered by type as it already does.

Right now, if the user selects a different type, the data is filtered, but if the user selects a different date, nothing happens.

Can someone tell how to handle this situation?

Am I using it wrong?

Thanks!

Georgi Krustev
Telerik team
 answered on 12 Mar 2016
3 answers
354 views

Hello,

I see there is a way for a user to export the spreadsheet to Excel but I am looking for a way to programmatically save to a folder on the server. Is this possible?

Thanks.

Kiril Nikolov
Telerik team
 answered on 12 Mar 2016
2 answers
126 views

I have a Kendo Grid on the page. When the user clicks a button, I want to send the rows (data objects) from the grid to the controller. The controller will return a partial view, which will be used as the content for a new window. I've got the window load from a partial view working using .refresh({url:}), but I'm having trouble getting the grid data sent. Seems like I should be able to use something like this, but it's not working for me:

                    dialog.refresh({
                        url: "/Controller/Action",
                        data: JSON.stringify({items:$("#grid").data("kendoGrid").dataItems}),
                        dataType: "json",
                        type: "POST",
                        contentType: 'application/json; charset=utf-8'})

 

On the controller I have the items parameter defined as IEnumerable<Item> but it gets a null value.

Bill Wingate
Top achievements
Rank 1
 answered on 11 Mar 2016
8 answers
1.6K+ views

I am a beginner working on Kendo Grid. I wanted to load the data on demand in the grid, like :

I set the page size to 10, when a user scrolls down to 10 rows, the 
grid should retrieve next 10 rows from database and display it on 
demand.To do this, I changed "scrollable: true" to "scrollable: {virtual: true}". But this disables scrolling in the grid.

 

 

$scope.source = new kendo.data.DataSource({
           batch: true,
           group: getDSGroup(),
           transport: {
               read: userSvc.getUserList,
               update: _dataUpdateItem
           },
           error: function (e) {
               ngDialog.openConfirm({
                   template: 'httpErrorDialogId',
                   className: 'ngdialog-theme-default',
                   data: {
                       'status': e.status,
                       'message': e.errorThrown
                   }
               });
           },
           schema: {
               parse: function (data) {
                   $rootScope.$log.log("User list was fetched.");
                   if ($rootScope.sysSettings.userMgr_serverPaging)
                       return data;
                   for (var i = 0; i < data.items.length; i++) {
                       data.items[i].letter = data.items[i].lastName.substr(0, 1).toUpperCase();
                       if (data.items[i].departmentName == null) data.items[i].departmentName = $rootScope.$translate.instant("Unassigned");
                       if (data.items[i].userGroupName == null) data.items[i].userGroupName = $rootScope.$translate.instant("Unassigned");
                   }
                   return data;
               },
               model: { id: "id" },
               groups: "groups",
               total: "totalItems",
               data: "items"
           },
           filter: getDSFilter(),
           sort: getDSSort(),
           pageSize: $rootScope.sysSettings.userMgr_serverPaging ? 10 : 0,
           serverGrouping: $rootScope.sysSettings.userMgr_serverPaging,
           serverPaging: true,
           serverSorting: $rootScope.sysSettings.userMgr_serverPaging,
           serverFiltering: $rootScope.sysSettings.userMgr_serverPaging
       });
 
       $scope.userListOptions = {
           //sortable: true,
           groupable: true,
           selectable: false,
           //pageable: true,
            
           scrollable: {
               virtual: true
           },
           //dataBound: function() {
           //  this.expandRow(this.tbody.find("tr.k-master-row").first());
           //},
           columns: [{
               field: "firstName",
               template: kendo.template($("#tpl-UserItem").html())
 
           },
           {
               field: "letter",
               hidden: true,
               groupHeaderTemplate: "#= value #"
           }]
       };
 
       $scope.isEndlessScroll = function () {
           return $rootScope.sysSettings.userMgr_serverPaging;
       };

achu
Top achievements
Rank 1
 answered on 11 Mar 2016
1 answer
744 views

I have a Kendo grid which fetches data from a REST endpoint.  Until now, it's had a fixed height, and everything is golden.

Now I'm trying to make it fill its parent div's height.  I've gotten that to work via suggestions in other threads in this forum; essentially:

$(window).resize(() => {
   const grid: any = $('.grid-selector').data('kendoGrid');
   grid.resize(true);
});

This does allow the grid to fill its parent div's space - great.  Unfortunately, there is an occasional hiccup with the displayed rows.  The most common issue that I see is the following:

Say I have a grid with rowCount: 20, displaying a data set with size === 500.  (Server paging is enabled, in case that is important).  If the window is sized such that < 20 rows are visible at any one time, the UI looks as expected - the grid's viewport is filled with rows, and I can scroll through them and see them all.

If I then resize the window such that > 20 rows should be visible, I instead see only 20 rows, with whitespace at the bottom of the grid's viewport.  Further, I never see the "last few rows" of data - as if the grid component expects the rows in the whitespace to be painted when they aren't.  Viewing network traffic, it appears that the grid is indeed making queries for data correctly, it's strictly a visual glitch.

If I set rowCount to something larger than I expect any user to see on the screen at a time (say 100), the UI appears to function properly again - I never see whitespace within the grid's viewport.  I'm nervous that this is masking a problem though, not fixing it, and there may still be an issue.

Hopefully that made sense.  I'm attaching a screenshot showing the problem.  Is there something else I have to do to trigger a complete re-rendering, and possible re-fetching, of data on resize events?

Robert
Top achievements
Rank 1
 answered on 11 Mar 2016
1 answer
171 views

Why this code does not set the value to input element?

 

<input id="datePicker" /><script> $(document).ready(function(){ $("#datePicker").kendoDatePicker({ value: new Date(), min: new Date()})});</script><button>SetNewValue</button><script> $('button').on('click',function(){var dp = $("#datePicker").data('kendoDatePicker'); dp.value(new Date(2016,1,1))})</script>

 

 

If I change date to "new Date(2016, 4, 1)" value will be set correctly. The error appears in all browsers.
Link to JSbin example http://jsbin.com/catolumifa/edit?html,output

Viktor Tachev
Telerik team
 answered on 11 Mar 2016
6 answers
742 views

Hi 

I have a grid with check box, on checking the checkbox and clicking a button on the screen, i want to remove the selected row.

i am using the below code, everything works fine if i have only one page but if i have multiple pages in grid, the other pages selected rows are not deleted.

This code is written in the click event of button.

        var grid = $("#grdSelect").data("kendoGrid");

        grid.tbody.find("input:checked").closest("tr").each(function (index) {
            grid.removeRow($(this).closest('tr'));
        });
        grid.refresh();

Please help.

Boyan Dimitrov
Telerik team
 answered on 11 Mar 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?