Telerik Forums
Kendo UI for jQuery Forum
1 answer
6.8K+ views
We have a strange issue where the edit template for our grid is causing issues when editing dates.The dates are stored on the server in UTC timezone.
We use the following pattern to set the timezone:-       
private DateTime _minDate;       
public DateTime MinDate        {           
    get { return _minDate; }           
    set { _minDate = DateTime.SpecifyKind(value, DateTimeKind.Utc); }       
}
The dates get loaded into the grid using WebApi OData services.{"Id":50088,"ProductId":101437,"Valor":"12224000","ISIN":"CH0122240002","Description":"Outperformance Bonus Certificate, Multi Shares","Provider":"CSIB","AlertedTicker":"KO UN","ProtectionPercentage":1.0,"ProtectionType":"Protection Lost","UnderlyingCurrency":"USD","BarrierLevel":190.0,"BarrierPercentage":70.0,"BarrierType":"Low","BarrierId":0,"EventStructureId":170378,"Date":"2013-11-20T00:00:00Z","Comment":null,"Confirm":false,"Reject":false}The OData service correctly serializes the UTC date and the date get to the UI intact.After editing the date using a date picker control but just typing using the keyboard the data is sent back to the server in the wrong format.{ "odata.metadata":"http://localhost:51850/web/odata/$metadata#PendingBarrierAlerts/@Element","Id":50088,"ProductId":101437,"Valor":"12224000","ISIN":"CH0122240002","Description":"Outperformance Bonus Certificate, Multi Shares","Provider":"CSIB","AlertedTicker":"KO UN","ProtectionPercentage":1.0,"ProtectionType":"Protection Lost","UnderlyingCurrency":"USD","BarrierLevel":190.0,"BarrierPercentage":70.0,"BarrierType":"Low","BarrierId":0,"EventStructureId":170378,"Date":"2013-11-20T23:00:00Z","Comment":null,"Confirm":false,"Reject":false}Notice the date has a changed time !How can we edit UTC dates in a grid and correctly return them to the server using OData as a transport and a remote datasource ?
Eyup
Telerik team
 answered on 28 Aug 2020
2 answers
97 views

This my Editor

function userNameAutoCompleteEditor(container) {
 
    $('<input id="UserId" name="UserId">')
        .appendTo(container)
        .kendoComboBox({
            autoBind: false,
            dataTextField: "UserName",
            dataValueField: "UserId",
            filter: "contains",
            minLength: 3,
            valuePrimitive: true,
            dataSource: new kendo.data.DataSource({            
                contentType: "application/json; charset=utf-8",
                serverFiltering: true,
                transport: {
                    read: {                       
                        url: '../Warehouse/SearchUser' ,
                        data: function () {
                            debugger;
                            UserSearcText:"asd"
 
                        }
                        
                    }
                },
            }),
        });
}

 

///Mvar grid = new BaseGrid('grdWarehouse_OnWarehouseUserRelation');
    grid._batch = false;
    grid._dataSourceAutoSync = false;
    grid._toolbar = ['create'/*, 'save', 'cancel'*/];
    grid._editable = {
        mode: "inline",
        create: true,
        update: true,
        destroy: true,

    };
    grid._autoBind = false;
    grid._schemaMethod = {
        model: {
            id: 'Id',
            fields: {
                Id: { editable: false },
                //User: { defaultValue: { UserId: '', UserName: '' } },
                
            }
        }
    };
    grid._columns.push(grid.GridColumn('Id', null, '200px', null, null, null, null, null, null, null, true));
    //grid._columns.push(grid.GridColumn('User', 'User', '200px', null, "#=User.UserName#", null, null, null, null, null, null, null, null, null, userNameAutoCompleteEditor));
    grid._columns.push(grid.GridColumn('UserId', 'User', '200px', null,'#=modelName(this)#', null, null, null, null, null, null, null, null, null, userNameAutoCompleteEditor));
    grid._columns.push(grid.GridColumn(null, '&nbsp;', '200px', { style: 'text-align:right' }, null, null, null, null, null, null, null, null, null, ['edit', 'destroy']));

    grid._cancelMethod = function (e) {
        var uid = $("#grdWarehouse_OnWarehouseUserRelation").data("kendoGrid").dataItem($(e.container).closest("tr")).uid
        dataSource = $("#grdWarehouse_OnWarehouseUserRelation").data("kendoGrid").dataSource
        var item = dataSource.getByUid(uid);
        dataSource.cancelChanges(item);
    };

//My problem  ı need filter text to send the controller.But  I cant catch searc text CAN YOU HELP ME!!!!??????????

This my grid

01.var grid = new BaseGrid('grdWarehouse_OnWarehouseUserRelation');
02.    grid._batch = false;
03.    grid._dataSourceAutoSync = false;
04.    grid._toolbar = ['create'/*, 'save', 'cancel'*/];
05.    grid._editable = {
06.        mode: "inline",
07.        create: true,
08.        update: true,
09.        destroy: true,
10. 
11.    };
12.    grid._autoBind = false;
13.    grid._schemaMethod = {
14.        model: {
15.            id: 'Id',
16.            fields: {
17.                Id: { editable: false },
18.                //User: { defaultValue: { UserId: '', UserName: '' } },
19.                 
20.            }
21.        }
22.    };
23.    grid._columns.push(grid.GridColumn('Id', null, '200px', null, null, null, null, null, null, null, true));
24.    //grid._columns.push(grid.GridColumn('User', 'User', '200px', null, "#=User.UserName#", null, null, null, null, null, null, null, null, null, userNameAutoCompleteEditor));
25.    grid._columns.push(grid.GridColumn('UserId', 'User', '200px', null,'#=modelName(this)#', null, null, null, null, null, null, null, null, null, userNameAutoCompleteEditor));
26.    grid._columns.push(grid.GridColumn(null, ' ', '200px', { style: 'text-align:right' }, null, null, null, null, null, null, null, null, null, ['edit', 'destroy']));
27. 
28.    grid._cancelMethod = function (e) {
29.        var uid = $("#grdWarehouse_OnWarehouseUserRelation").data("kendoGrid").dataItem($(e.container).closest("tr")).uid
30.        dataSource = $("#grdWarehouse_OnWarehouseUserRelation").data("kendoGrid").dataSource
31.        var item = dataSource.getByUid(uid);
32.        dataSource.cancelChanges(item);
33.    };

 

 

 

 

 

 

Merve
Top achievements
Rank 1
Veteran
 answered on 28 Aug 2020
1 answer
245 views

Due to some performance issues on the application.  I need to do the binding via a json file instead of using an api.  However, I was running into an issue doing sorting/filtering.

The application displays a list of data.  It needs to filter data by a date range.  

Could someone provide me a direction on what I need to do?

 

Hetali
Telerik team
 answered on 27 Aug 2020
9 answers
2.1K+ views

I found the following section regarding exporting large datasets from the Kendo Grid:

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/excel-export#use-server-side-processing

We currently have this exact need, but I am unable to find any code giving an example of how to tie the grid data to the TDP library. The closest I can find relating to exporting with this library is http://docs.telerik.com/devtools/document-processing/libraries/radspreadstreamprocessing/export but the code samples are not closely related to my situation. Can you provide or point me to some code samples that show how to process a large data set from a Kendo grid?

 

Thank you.

Viktor Tachev
Telerik team
 answered on 27 Aug 2020
5 answers
618 views
Is there a solution (or workaround) to the following problem: 

Tooltips are only displayed for active ("enabled") listbox items. 

I have two linked listboxes (ListBoxA and ListBoxB). ListBoxA shows valid and invalid entries. Invalid entries are disabled in ListBoxA so that they cannot be added to ListBoxB. I want to display tooltips for all entries in ListBoxA so that the user can see why an entry may be is disabled.

Sample code https://jsfiddle.net/chstorb/b2u9cowd/

Kind regards,

Chris 
Nikolay
Telerik team
 answered on 27 Aug 2020
2 answers
101 views

I've modified the first example at https://docs.telerik.com/kendo-ui/framework/datasource/crud by using a model that is strictly typed with kendo.data.Model.define instead of using the flat JSON object array. If I click on the edit button in a row in the grid and change the value of "Units in Stock" and then click on the cancel button, the change will NOT be discarded. The error "kendo.all.min.js: 27 Uncaught TypeError: n.wrap is not a function" is displayed in the browser's developer console.

 

What do I have to change so that the example with kendo.dataModel.define works correctly?

Sample code https://jsfiddle.net/chstorb/pq45mn19/

Kind regards,

Chris 

Plamen
Telerik team
 answered on 27 Aug 2020
2 answers
163 views

HI, I want to have a kendo drop down list with multiselect and filtration options into it. I don't want to use kendo multiselect widget. 

I need to have only kendo dropdownlist with multiselect and filter option so that i can select the options from the drop down and display into my custom div container.

 

Kindly suggest any option for this. please refer the screen shot.

Anand
Top achievements
Rank 1
Veteran
 answered on 26 Aug 2020
5 answers
1.6K+ views

I am using KendoUI components to write a mobile friendly website. I've come across my first issue with the KendoUI controls. I have an Input DOM element as below:

<input type="number" id="myNumberInput" min="1" max="10" />

and the javascript behind this is as follows:

var inputDOM = $("#myNumberInput");
inputDOM.kendoNumericTextBox({format: "#"});

after the kendo control has been created, both the new input tag created by kendo and the old ones have both had their "type" properties set to "text" instead of "number". This has now completely removed the benefits on a phone where a context specific (i.e a number pad) is displayed when a "number" type input is selected.
Is there any way I can change the type property back to "number", or is there anything i'm missing?.
I can change the type of the original input object by just doing the below after the kendo control is made

inputDOM.prop("type", "number");

but this doesn't help the actual control now visible to the user. I've also tried the wrapper and element properties on the numericTextBox object as below

inputDOM.data("kendoNumericTextBox").element.prop("type", "number"); inputDOM.data("kendoNumericTextBox").wrapper.prop("type", "number");

but this did not seem to change the property of the visible control, the "element" only changed the value of the original now hidden Input element.
Any ideas where i've gone wrong, or how I can achieve this?

Tsvetomir
Telerik team
 answered on 26 Aug 2020
1 answer
563 views

I am getting below error on our search screen.
This happens only when searched from specific field ( Group), if we search from any other field then we do not get this error. 

ERROR:
kendo.web.js:5724 Uncaught TypeError: Cannot read property 'length' of undefined

SEARCHED FIELD:
<div class="col-md-3">
                <div class="form-group">
                    @Html.LabelFor(model => model.Group)
                    @Html.EditorFor(model => model.Group, new { htmlAttributes = new { @class = "form-control", maxlength = 15, id = "Group" } })
                </div>
            </div>



KENDO.WEB.MIN.JS:
sort:function(e,t,n,i)
{
var r,o,s=a(e,t),
l=[];
if(n=n||Z,s.length)
{
for(r=0,o=s.length;r<o;r++)
l.push(n.create(s[r]));
return this.orderBy({compare:n.combine(l)},i)
}return this
},



VIEW:
@(Html.Kendo().Grid(Model)
                .Name("SearchGrid")
                .Columns(columns =>
                {
                    columns.Bound(s => s.UserID).Visible(false).HtmlAttributes(new { id = "UserID" });
                    columns.Bound(s => s.SelectAll).ClientHeaderTemplate("<input id='selectall' class='chkbx' type='checkbox' onclick='ToggleChkBox(this.checked);'> Select All</>").ClientTemplate("<input type='checkbox' class='chkbxq' id='#= UserID #' />").Filterable(false).Sortable(false).Width(100).HtmlAttributes(new { style = "text-align:center" });
                    columns.Bound(s => s.UserName).Width(145).HtmlAttributes(new { id = "UserName" });
                    columns.Bound(s => s.FirstName).Width(165);
                    columns.Bound(s => s.LastName).Width(165);
                    columns.Bound(s => s.Email).Width(225);
                })
                .NoRecords(true)
                .Pageable(pager => pager.PageSizes(new int[] { 10, 20, 30, 50 }))
                .PersistSelection(true)
                .Sortable()
                .Events(events => events.Change("Grid_OnRowSelect"))
                .Scrollable()
                .Filterable()
                .Selectable()
                .AutoBind(true)
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .ServerOperation(false)
                    .Model(model => { model.Id(s => s.UserID); })
            )
)

Nencho
Telerik team
 answered on 26 Aug 2020
1 answer
123 views

Hi,

I'm trying to define my custom (annual) view on scheduler in angularJS.

My definition is:

 

var SchedulerAnnualView = kendo.ui.SchedulerView.extend({
        startDate: function () {
            var date = kendo.ui.AgendaView.fn.startDate.call(this);
            if (date == null)
                date = new Date();
             
            return new Date( date.getYear(), 0, 1);
        },
        endDate: function () {
            var date = kendo.ui.AgendaView.fn.startDate.call(this);
            if (date == null)
                date = new Date();
            date.setDate(date.getDate() + 363);
             
            return date;
        },
        nextDate: function () {
            var start = kendo.ui.SchedulerView.fn.startDate.call(this);
            if (start == null)
                start = new Date();
             
            return new Date(start.getFullYear() + 1, 0, 1);
        },
        previousDate: function () {
            var start = kendo.ui.SchedulerView.fn.startDate.call(this);
            if (start == null)
                start = new Date();
             
            return new Date(start.getFullYear() - 1, 0, 1);
        }
}

 

When i click on my defined view the error occurs:

Uncaught TypeError: Cannot read property 'replace' of undefined
    at Object.ve.format (kendo.all.js:822)
    at r.dateForTitle (kendo.all.js:82119)
    at init._renderView (kendo.all.js:93251)
    at init._selectView (kendo.all.js:93217)
    at init.view (kendo.all.js:93239)
    at HTMLLIElement.<anonymous> (kendo.all.js:93504)
    at HTMLDivElement.dispatch (jquery-2.2.0.min.js:3)
    at HTMLDivElement.r.handle (jquery-2.2.0.min.js:3)

 

What's wrong in my code?

Paul
Top achievements
Rank 1
 answered on 26 Aug 2020
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?