Telerik Forums
Kendo UI for jQuery Forum
3 answers
490 views
Hi,

My colleague has passed this issue to me. What can I advise him? He has also posted to Stack Overflow: http://stackoverflow.com/questions/27127078/kendo-datepicker-z-index


I have a dynamically generated list of inputs inside a kendo accordion panel.The inputs are generated like this:

rowContent += "<td><input " + checked + " class='" + field.FieldTypeInput + "' type='" + field.FieldTypeInput + "' id='FldList_" + rowLength + "__UpdatedValue'  value='" + currentValue + "' name='FldList[" + rowLength + "].UpdatedValue' ></td>";

Some of these inputs are dates which are turned into Kendo date pickers :

$('.datepicker').kendoDatePicker();

The problem I am facing is the date popup is appearing beneath the panel (Or anything outside of the li it is in.I have tried this:

$('.datepicker').kendoDatePicker({
    open: function () {        setTimeout(function () {
             $('.ui-datepicker').css('z-index', 8888);
         }, 1);
     }
});


If I break the script by calling $('.datepicker').bob it breaks the script and therefore works (But obviously breaks the rest of the javascript functionality too.I have also tried this:

$("input[type=date]").kendoDatePicker({
    open:function(e)
        {               
            window.setTimeout(function(){ $(".k-calendar-container").parent(".k-animation-container").css("zIndex", "11000"); }, 1);
        }
  });


I have also tried changing the style:position: relative; z-index: 100000; And now I am completely out of ideas.Is anyone able to help me?
Many thanks
Boyan Dimitrov
Telerik team
 answered on 07 Jul 2017
1 answer
797 views

I am having trouble getting the selected value in a dropdownlist to stay put.

My application, which uses AngularJS 1.6, loads a large-ish dataset, and I have two Kendo DropDownLists that each apply a different filter to the data. The first one uses a static set of data, loaded into an ObservableArray; the second relies on me loading a set of unique values from the dataset into another ObservableArray, along with a default "description" value. As the first filter changes, the second filter is supposed to reload those unique values, since the first filter might have filtered out all of the records mathcing one or more of those values. There is nothing asynchronous going on here, or at least not that I'm aware of.

What I am seeing is that, when I change the selection in the first dropdown, whatever is selected in the second dropdown is blanked out--that is, it shows a blank selection. The values that are displayed when I open the dropdown are correct, the dataset is filtered as if the selected value is still displayed, and the act of opening the dropdown and then clicking off of it is sufficient to cause it to re-display the selected value.

I have tried 6 different ways from Sunday to ensure that the value of the second dropdown remains displayed, but I am out of ideas. Here is the HTML:

<form name="form" class="form-inline">
    <select name="accountStatus" style="width: 180px;" class="form-control" ng-model="status" ng-change="onAccountStatusChange(status)" kendo-drop-down-list k-options="accountStatusOptions"></select>
    <select name="filterByRegion" style="width: 180px;" class="form-control" ng-model="selectedRegion" ng-change="onRegionFilterChange(selectedRegion)" kendo-drop-down-list k-options="regionFilterOptions"></select>
</form>

And here are each of the JS methods invoked in the process of changing the selections and updating the second ObservableArray:

$scope.onRegionFilterChange = function(selectedRegion) {
    $scope.selectedRegion = selectedRegion;
};
 
$scope.onAccountStatusChange = function(status) {
    $scope.status = status;
    updateRegionFilterList();
};
 
var updateRegionFilterList = function () {
    $scope.regions.empty();
 
    angular.forEach($scope.accounts, function(account) {
        if (account.reviewStatus === $scope.status) {
            if ($scope.regions.indexOf(account.regionID)) = -1)
                $scope.regions.push(account.regionID);
            }
        }
    });
 
    $scope.regions.sort();
    $scope.regions.unshift("Filter By Region:");
    if ($scope.regions.indexOf($scope.selectedRegion)) = -1) {
        $scope.selectedRegion = "Filter By Region";
    }
};

Among the things I've tried are: instead of using the empty() command on the ObservableArray, I've tried testing each value in it to see if it should still be displayed, and splicing out those that shouldn't be; storing the current selected value in a temp variable and reloading it at the end of the method. I've also checked the values in the debugger and even added a toastr message to display the selected value, all of which showed that it should have been showing up just fine.

Any ideas?

Charles
Top achievements
Rank 1
 answered on 06 Jul 2017
3 answers
174 views
I'm really kind of disappointed that the spreadsheet was released in this state. The filter capability is so broken on the spreadsheet, it's basically a _danger_ to use.

The bug has been reported, for the life of me I can't see why it's only a SEV: Medium, but here it is:
Editing cells in range, when filter is applied, modifies the cells in between
https://github.com/telerik/kendo-ui-core/issues/2880

Not only does the spreadsheet delete values from cells hidden via a filter, it _pastes over them_ as well. This makes it very dangerous to use this feature in any sort of production application because your users could experience *invisible* data loss. That to me is a huge... massive... red flag. 

Because of this issue I find I have to hack my way through the products operational runtime and am strongly considering a competitor's widget instead. I don't want to do this because we've invested quite a bit of time and money into Kendo.

I hope you have plans to address this very soon.
Veselin Tsvetanov
Telerik team
 answered on 06 Jul 2017
3 answers
144 views

I have two DatePicker and I want to use them as Filter to show every thing between two date .

How can I achieve this ??!

Preslav
Telerik team
 answered on 06 Jul 2017
1 answer
372 views

Hi, I am using kendo-ui and angular together

i have kind of complicated table so the rows looks different and i am writing them like

<div kendo-grid.....

<table k-row-template>

<tr data-uid="#:uid#" rold="row">

<td>...............

</tr>

</table>

 

some of the rows should have the possibility of expanding

but when i am adding to the above code <div k-detail-template>

all the view is ruined and there is nothing related to expanding.

 

means:

<div kendo-grid.....
<table k-row-template>
<tr data-uid="#:uid#" rold="row">
<td>...............
</tr>

<div k-detail-template>

blablabla

</div>
</table>

 

so am i wrong?

if so how to do it correctly when i need k-row-template and k-detail-template. and the expanding only in specific rows with specific property in dataitem.

 

what should i do?

i am very very confused!!!

thanks for your urgent help

Stefan
Telerik team
 answered on 06 Jul 2017
3 answers
429 views

Good day.

We have a commenting system in our site and we're using a kendo template to display the comments. As the title stated, one comment that being returned from the database has those quotes and its preventing the whole template to be loaded, once we changed the quotes into the regular ones ( " and ' ), it loaded properly.

I thought it's weird that it will not be handled. Any ideas or suggestions?

 

var ds = new kendo.data.DataSource({
    transport: {
        read: {
           url: "/path/to/our/remote/function",
           type: "get",
            dataType: "json",
            cache: false,
            data: {
                ID: id
            }
        }          
    },
    schema : {
        type: "json",
        data: "Comments",
        model: {   
            fields: {
                Text: { field: "Text", type: "string" }     //need this for comments consisting of only a number
            }  
        },
        parse: function (data) {
            //additional processing
            var comments = data.Comments;  
             
            $.map(comments, function (item, index) {
                if (typeof(item.Created) !== "undefined" && item.Created != null) {
                    var current_datetime = moment();       
                    var created = moment(new Date(item.Created));          
                    item.Created = created.from(current_datetime);
                }
            });            
            return data;
        }
    }
});
Stefan
Telerik team
 answered on 06 Jul 2017
1 answer
200 views
Is it possible to add buttons to the tool set?  I need to have an "Add" button so that users can add items that aren't in the datasource already. I'd just like to have a consistent feel to the control.
Orlin
Telerik team
 answered on 06 Jul 2017
3 answers
917 views

Hey guys,

I'm having trouble setting the focus to a column after I've just added a new row to my grid.

When I add a new row, I want to set the focus to a custom drop down editor I've implemented. However, if I override the edit function of the grid and set the focus to the drop down list, once the edit function is complete, the focus will be reset to the first editable cell in the row.

I have an example here: http://dojo.telerik.com/@gmeulendyks/eFinI/3

 

Clicking the "Add New Record" button should set focus to the Category drop down list.

 

Can someone tell me what I'm doing wrong in the edit function?

 

Thanks,

Graham

Graham
Top achievements
Rank 1
 answered on 05 Jul 2017
3 answers
2.1K+ views

We were using telerik version Kendo UI v2015.1.408 and recently upgraded to Kendo UI v2017.2.504 after which the server side pagination is not working fine. The sample code is as follows:

var allNameDataSource = new kendo.data.DataSource({
             serverPaging: true,
             serverFiltering: true,
             transport: {
                 read: {
                     url: "/StudentNames/Name/GetAllNames",
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",
                     async: false,
                     type: "POST"
                 },
                 parameterMap: function (options, operation) {
                     debugger;
                     if (operation !== "read" && options) {
                         return JSON.stringify({
                             model: options
                         });
                     }
                     else if (operation == "read") {
                         debugger;
                         var sortOrderField = null;
                         var sortOrderValue = null;
                         var selectedSorting = allNameViewModel.allNameDataSource.sort();
                         if (typeof (selectedSorting) != "undefined" && selectedSorting.length > 0) {
                             sortOrderField = selectedSorting[0].field;
                             sortOrderValue = selectedSorting[0].dir;
                         }
                         var filterAndCondition = allNameViewModel.allNameDataSource.filter();
                         if (typeof (filterAndCondition) != "undefined" && filterAndCondition != null) {
                             if (filterAndCondition.filters.length > 0) {
                                 debugger;
                                 allNameViewModel.pushKendoCustomFilter(filterAndCondition);
                                 debugger;
                                 var CustomFilters = allNameViewModel.Filters;
                                 return JSON.stringify({ skip: options.skip, take: options.take, pageSize: options.pageSize, OrderByField: sortOrderField, OrderByValue: sortOrderValue, filter: allNameViewModel.filter, CustomFilters: CustomFilters });
                             }
                         }
                         return JSON.stringify({ skip: options.skip, take: options.take, pageSize: options.pageSize, OrderByField: sortOrderField, OrderByValue: sortOrderValue, filter: allNameViewModel.filter });
                     }
                 }
             },

           pageSize: PageCountValue > 0 ? PageCountValue: 10,
             schema: {
                 model: {
                     id: "StudentId",
                     fields: {
                         Name: { type: 'string' },
                         Age: { type: 'string' },                      
                        Address: { type: 'string' },
                         Email: { type: 'string' }                        
                   }
                 },
                 data: function (data) {
                     return data.data;
                 },
                 total: function (data) {
                     return data.total;
                 },
             }
         }),

Please let me know what is wrong with this.

Tsvetina
Telerik team
 answered on 05 Jul 2017
1 answer
376 views
I am having problem in Grid Asp.Net MVC. I require two datepickers in inline-edit mode. But one datepicker works fine and another doesnot work.
Inspecting the field  shows The 'Field' should be Date type. Both the fields are of same type but error is shown for the later one. I tried removing the first field and used second only but not any effect. Even I tried creating another editor template for later one and used it there still not.
Preslav
Telerik team
 answered on 05 Jul 2017
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
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?