Telerik Forums
Kendo UI for jQuery Forum
1 answer
151 views

Here's what I'm working with: http://dojo.telerik.com/uYidA/2

If you sort the columns and then try to inline edit something and save it, it will invoke the destroy function call for the column that you have sorted.

Thanks in advance!

Dimiter Topalov
Telerik team
 answered on 06 Jan 2017
4 answers
1.0K+ views
Hello,

I have a MVC Razor Hierarchical Grid using ClientDetailTemplates for the Child Grids.  I have the DetailExpand event configured on the top level grid.  Everything works fine the first time that a Row is expanded, ie the row expands and then the DetailExpand event fires.  However if I collapse that row and then expand it a second or more times, the DetailExpand event fires first and the row will not expand until the event is finished.  This essentially makes it a DetailInit event.

I am stuck here because everything works fine the first time.  My guess is that the ClientDetailTemplates are built the first time and everything is processed in proper order, after that, the templates already exist so Kendo UI decides that it will fire the event first and then expand?  Has anyone found an easy way around this?..

If there is an example anywhere of a Razor Hierarchical grid with Child Tempates and the DetailExpand event? 

Thanks in advance.
TroyR
Top achievements
Rank 1
 answered on 05 Jan 2017
7 answers
807 views

If primitive binding is disabled (e.g. not using k-data-value-field), I cannot set the value of the drop down programmatically. For example: http://dojo.telerik.com/aZUXi

Kiril Nikolov
Telerik team
 answered on 05 Jan 2017
1 answer
921 views

I'm using KendoUI Grid within SharePoint 2013 webpage. 

I am able to update my item using the CSOM within the function. After the function completes i get the error :

  • kendo.all.js:6550 Uncaught TypeError: Cannot read property 'call' of undefined 

Here is the code in the kendo.all.js: (error line in italics/bold)

 _promise: function (data, models, type) {
                var that = this;
                return $.Deferred(function (deferred) {
                    that.trigger(REQUESTSTART, { type: type });
                    that.transport[type].call(that.transport, extend({
                        success: function (response) {
                            deferred.resolve({
                                response: response,
                                models: models,
                                type: type
                            });
                        },
                        error: function (response, status, error) {
                            deferred.reject(response);
                            that.error(response, status, error);
                        }
                    }, data));
                }).promise();
            },

  Here is my grid :

$("#kendoMyAssignedTable").kendoGrid({
dataSource: {
type: "ajax",
transport: {
read: function(operation){
$.ajax({
url:  _spPageContextInfo.webAbsoluteUrl + $select=ID,Assigned,CONVERSION_x0020_ACTIVITY,Stat/Title,id,txt_AssignedTo,Comments,ActivityDueDate,ConvSchedID/LOCATION_x0020_NAME,Responsible/Title,WeekGroupID/Title,WaveID/Title,ConvSchedID/ID&$expand=Stat,ConvSchedID,WaveID,ConvSchedID,Responsible,WeekGroupID&$filter=(Responsible/Title eq '" + m + "') and (Assigned eq 1) and (Stat/Title ne 'Completed') and (Stat/Title ne 'Not Started')&$orderby=ActivityDueDate,WeekGroupID/ID",
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
cache: false
})
.done(function(result){
operation.success(result.d.results);
})
.fail(function (result){
var test = '';
})
},
},
pageSize: 20,
group: [
{field: "WaveID.Title"},
{field: "Stat.Title"},
{field: "ConvSchedID.LOCATION_x0020_NAME"}
],
sort: {field: "ActivityDueDate", dir: "asc"}
},
batch: true,
navigatable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
filterable: true,
groupable: true,
dataBound: function(o){
var g = $("#kendoMyAssignedTable").data("kendoGrid");
console.log(g.columns.length);
for (var i=0; i < g.columns.length; i++){
g.showColumn(i);
}
$("div.k-group-indicator").each(function(i,v){
g.hideColumn($(v).data("field"));

})
},
allowCopy: true,
toolbar: ["save","cancel", "excel"],
columnMenu: true,
resizeable: true,
saveChanges: function(e){
var grid = $("#kendoAssignedTable").data("kendoGrid");
var data = grid.dataSource.data();
var dirty = $.grep(data,function(item){
return item.dirty
});
var myItem = '';
var ctx =SP.ClientContext.get_current();
var items=SP.ListOperation.Selection.getSelectedItems(ctx);
var list=ctx.get_web().get_lists().getByTitle("ConvCheckList");

console.log("dirty",dirty);
$(dirty).each(function(i,v){

console.log(v.Stat.Title);
myItem = v.ID;
var objectitem = list.getItemById(myItem);
objectitem.set_item("Stat", v.Stat.ID);
objectitem.update();
ctx.executeQueryAsync();
});
},
columns: [
{
field: "WaveID.Title",
title: "Wave",
filterale: {multi: true, search: true},
editor: function(element, options){element.text(options.model.WaveID.Title)}
},
{
field: "ActivityDueDate",
title: "Due Date",
type: "date",
filterable: {multi: true, search: true},
format: "{0:d}",
width: 150,
editor: function(element, options){element.text(options.model.ActivityDueDate)}
},
{
field: "WeekGroupID.Title",
title: "Week",
filterable: { multi: true, search: true},
width: 400,
editor: function(element, options){element.text(options.model.WeekGroupID.Title)}
},
{
field: "CONVERSION_x0020_ACTIVITY",
title: "Conversion Activity",
editor: function(element, options){element.text(options.model.CONVERSION_x0020_ACTIVITY)}
},

field: "ConvSchedID.LOCATION_x0020_NAME",
title: "Location Name", 
filterable: { multi: true, search: true},
editor: function(element, options){element.text(options.model.ConvSchedID.LOCATION_x0020_NAME)}
},

field: "Stat.Title",
title: "Status",
filterable: { multi: true, search: true},
editor: myStatusDropDown, 
template: "#=Stat.Title#"
},
{
field: "Comments",
title: "Comments"
}

],
editable: true
});
}
function myStatusDropDown(container, options){

$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Title",
dataValueField: "Title",
dataSource: {

transport: {
read: function(operation){
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('CheckListStatus')/Items?$select=Title,ID",
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
cache: false
})
.done(function(result){
operation.success(result.d.results);
var datas = $(result.d.results);
console.log(datas);
})
.fail(function(result){
var test = '';
})

}
}
}
});

}

Stefan
Telerik team
 answered on 05 Jan 2017
6 answers
414 views
Hi.

I have series line charts similiar to this. I need possibility to navigate to (previous) data and zooming.
Can I do that?
I suppose that chart  should provide API when we try to show absent  data so it is possible to request db
for missing data.

Thanks in advance.



T. Tsonev
Telerik team
 answered on 05 Jan 2017
1 answer
109 views

http://dojo.telerik.com/iwepo/5

In the grid I have a filterable date column with IsNull and IsNotNull operators.  Above the grid I have a button which clears all the dataSource filters.

This works fine if you set the date column to be filtered on a value, e.g. is before / today's date.

However, if you choose the IsNull or IsNotNull operator, and then click the Clear filters button, the dataSource is indeed unfiltered, but the grid filter controls are NOT updated (the clear button remains visible, and the dropdown still has that operator selected).

This appears to affect IsNull, IsNotNull, IsEmpty, and IsNotEmpty, across all data types (number, date, text).

Is there some reason the filter controls are only updated when removing some (but not all) operators?

Stefan
Telerik team
 answered on 05 Jan 2017
4 answers
231 views

We have implemented a bunch of Angular 1 Kendo controls into our application. We have been encountering some slowness on the front end with the browser freezing when transitioning view states. I did some investigating, and was able to identify the issue as being related to the destroy methods kendo has implemented. 

I put in some performance testing code around the destroys, and for EACH calendar control on the page, the  .destroy() method is taking ~100ms, and for kendo windows, it is taking ~120-160ms per instance. If I comment the destroy method calls out, the page runs smoothly (but obviously we open ourselves up to memory leaks, so probably not a viable option). 

We have plenty of our own directives on the page, and destroying all our controls collectively takes under 5ms. Why is each instance of these kendo controls taking 20+ more time than the rest of our controls combined? Is this a known issue?

 

We aren't doing anything overly fancy with our implementation, below is how our date picker is implemented. 

   <input kendo-date-picker
           k-options="::datepickeroptions"
           ng-model="value"
           ng-show="!readmode"/>

 

We are using ~6 month old version of the library, however updating it to the latest made no improvement. 

 

Any help would be appreciated!

 

Thanks. 

Jason
Top achievements
Rank 1
 answered on 05 Jan 2017
15 answers
2.3K+ views

Hi friends,

I am trying to work with ajax on Kendo UI grid but the DataSourceRequest.sort property is always null to me.

Here is my grid:-
@(Html.Kendo().Grid<MvcApplication1.Utility.

Employee>()
.Name("Grid")
.EnableCustomBinding(true) .
Columns(columns => { 
    columns.Bound(p => p.EmpId).Groupable(false);
    columns.Bound(p => p.EmpName); 
    columns.Bound(p => p.EmpDepartment);
    columns.Bound(p => p.EmpSal);
})
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax().Events((events => events.Error("onError")))
.Read(read => read.Action("Employee_Read", "Home"))
.ServerOperation(true) ) ) 

My Code behind:-

public JsonResult Employee_Read([DataSourceRequest]DataSourceRequest request) 

var employees = GetEmployeeData();
DataSourceResult result = employees.ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);
}

Please note that Employee class is not IQueryAble.

Please suggest suitable solution.

Regards,
Ankit Verma

 

 

Dimo
Telerik team
 answered on 05 Jan 2017
5 answers
3.5K+ views

Is there a way to conditionally show a tooltip? I want to be able to prevent showing the tooltip based on some arbitrary javascripting. I've tried to mess with the show event (return false / ev.preventDefault() / etc), but that doesnt seem to work. I've found a rather funky solution to this question on http://stackoverflow.com/questions/23297623/kendo-ui-conditionally-preventing-a-tooltip-from-being-displayed-on-a-grid-cell where a 'beforeShow' event is added to the tooltip show function. Any other options that I might have missed?

Regards,
Ron

Dimiter Topalov
Telerik team
 answered on 05 Jan 2017
12 answers
1.2K+ views

HI 

     I have an issue in kendo combobox I added a tooltip in kendo combobox dropdown list, the issue is when I click the tooltip in the combobox the dropdown was automatically closed. I want the when the tooltip dialog opens then the corresponding combobox dropdown list should not close. I am stuck in this issue help me out.

I used both the e.Preventdefault and e.stoppropagating but its not working. The following code that I used for the tooltip click event and I attached the screenshot of my issue.

 

comboBox.list.find('.info-MultiComboBox', '.cogInfo', 'cog-widget').click(function (e) {
// For some reason, this click event causes the dropdown to close. Calling preventDefault() stops this behavior.
e.preventDefault();
});

Dimiter Topalov
Telerik team
 answered on 05 Jan 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?