Telerik Forums
Kendo UI for jQuery Forum
1 answer
172 views

Hello,

I want to create a link inside my Kendo template, but I always get the Error 'Invalid Template ...'

Is there anyone who can help me with this? 

<a href="/#/Kontakt/Info/#:KONTAKTID#" target="_blank">

Tank you in advance

Dimiter Madjarov
Telerik team
 answered on 06 Jan 2017
1 answer
581 views

Hi there,

I'm trying to run Kendo Editor on React using the sample that appears on NPM.

I'm using webpack.

This is my component:

var KendoEditor = require('kendo-ui-react-jquery-editor').default;
  
//Don't forget CSS, webpack used to include CSS
require('../../../Content/Telerik/kendo.common.min.css');
require('../../../Content/Telerik/kendo.default.min.css');
require('../../../Scripts/Telerik/kendo.editor.js');
 
  
var Example = React.createClass({
    render: function() {
        return (
          <KendoEditor options={{height: 550,sortable: true}}>
 
          </KendoEditor>
      );
}
});
 
module.exports = Example;

This is my view

@Html.React("Client.Example", new { }, clientOnly: true)

 

And I'm already bundling kendo.editor.js and kendo.all.js.

The error that appears is:

Uncaught TypeError: Cannot read property 'Editor' of undefined

On this line:

//note I am not using jQuery plugin to instantiate, don't want to wait for namespace on $.fn
    this.widgetInstance=new _kendoEditor2['default'].ui.Editor(elementNode,this.props.options);//if props are avaliable for events, triggers, unbind events, or methods make it happen now

 

Can you please help? Thanks in advance.

Alex Gyoshev
Telerik team
 answered on 06 Jan 2017
1 answer
155 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
830 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
940 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
433 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
115 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
239 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
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
Drag and Drop
Application
Map
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
DropDownTree
ListBox
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
Styling
ColorPicker
Pager
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
Licensing
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
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
LLM Kit
+? more
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?