Telerik Forums
Kendo UI for jQuery Forum
2 answers
1.5K+ views

I have a standard task of showing remote data in the grid with paging enabled( user test data is a 100 rows). 

My question is that I don't understand how to properly return the data. My current version just displays 5 records and that's it.

Following is my grid setup in the controller. 

$scope.grdUsers = {

        dataSource: {
            schema: {
                model: {
                    fields: {
                        userid:     { type: "number" },
                        FullName:   { type: "string" },
                        username:   { type: "string" },
                        email:      { type: "string" }
                    }
                }
            },
            transport: {
                type: 'json',
                read: function (e) {
                    var requestData = {
                        page: e.data.page,
                        pageSize: e.data.pageSize,
                        what: 'wa_users',
                        tstamp: (new Date()).getTime()
                    };
                    $http({ method: 'POST', url: './waOpps.ashx',  params: requestData }).
                    success(function (data, status, headers, config) {
                        e.success(data);
                    }).
                    error(function (data, status, headers, config) {
                    });
                }
            },
            pageSize: 5,
            filterable: true,
            serverPaging: true,
            serverSorting: true
        },
        selectable: "row",
        pageable: true,
        sortable: true,
        columns: [
            {
                field: "FullName",
                title: "Name",
            },
            {
                field: "username",
                title: "username",
            },
            {
                field: "email",
                title: "email"
            }
        ]
    };

 

My server side is:

class tmpuser
        {
            public Int32 userid;
            public String FullName;
            public String username;
            public String email;
            public tmpuser(Int32 uid)
            {
                userid = uid;
                FullName = String.Format("fullname {0}",userid);
                username = String.Format("username {0}", userid);
                email = String.Format("email {0}", userid);
            }
        };


        private void getusers(HttpContext context)
        {
            Int32 page = Convert.ToInt32(context.Request["page"]);
            Int32 pageSize = Convert.ToInt32(context.Request["pageSize"]);
            Int32 startIndex = (page - 1) * pageSize;
            List<tmpuser> lst = new List<tmpuser>();
            for (int i = startIndex; i < Math.Min(startIndex + pageSize, 100); ++i) 
                lst.Add(new tmpuser(i));
            String v = JsonConvert.SerializeObject(lst);
            context.Response.Write(v);
        }​

Viktor Tachev
Telerik team
 answered on 20 Aug 2015
1 answer
161 views

Hi,

I have read you can add custom connectors to shapes but I'm unable to find a good example on how to do this.

I need to be able to define a custom shape and add a number of custom connectors in a fixed position on the right edge of the shape (rectangle).

This is so I can refer to the connector names when adding connections between shapes like this:-

_diagram.connect(shape1.getConnector["branch1"], shape2.getConnector["left"])

Thanks â€‹

 

 

Kiril Nikolov
Telerik team
 answered on 20 Aug 2015
2 answers
130 views

Hi There,

 

I have a dynamically created kendo grid. The problem here is that the kendo grid fills up the entire page even when there are just 2 columns in the grid. This is not the desired behavior I need. What I need is tha the grid should fit the columns based on the contents and the grid should fit to number of columns.

 

I tried changing the CSS 

.k-grid table{    display: inline-block}

but this CSS messes up the alignment between the kendo grid header and content columns.

 

Can you guys please guide me on how to achieve this? I have created a JSFiddle with two grids and I want the kendo grid to behave similarly.

Nilesh
Top achievements
Rank 1
 answered on 20 Aug 2015
1 answer
165 views

Hello,

 I am using an older version of Kendo UI in my project (2014.1.416) and was wondering: is there a way to draw an arrow on the start and on the end of line on chart? That version does not have drawing...

On image you see blue chart and arrows. I need those arrows =)

Plamen Lazarov
Telerik team
 answered on 20 Aug 2015
1 answer
197 views

We are using kendoNumericTextBox with format "#,#.##########" , when ever the value entered is huge say 123456789123456789123456789, we are observing javascript error 'The number of fractional digits is out of range'.

 Example : http://dojo.telerik.com/ideMA/2

Can any one help us understand the cause of this error?​​

In our case there is no requirement to restrict the length of the text box.
Petyo
Telerik team
 answered on 20 Aug 2015
1 answer
70 views

How can I process keyboard navigation of the scheduler?
When the scheduler is active (has focus), and push button 1-4 then the scheduler will change view. Is there ability to process it or do a preventDefault?
When navigate by scheduler using cursor buttons of the keyboard, when go from day to day (week to week, month to month).  Is there ability to process it or do a preventDefault?
I found navigate event but this event is not fired when buttons were pushed.

Thanks

Alexander Popov
Telerik team
 answered on 20 Aug 2015
5 answers
90 views

Hello,

I'm using kendo UI grid and we need the grid to be navigatable. But when the user use tab to move from a cell to another when editing, the value is not kept, especially for numeric columns. 

You can see the behavior here 

http://jsbin.com/agowir/2/

Thanks for your help.

Regards

Kiril Nikolov
Telerik team
 answered on 20 Aug 2015
5 answers
158 views

Hello,

I'm working with the SchedulerDataSource within an Android Cordova project and I'm using the offline capabilities of the SchedulerDataSource keep the data in the LocalStorage when the device goes offline. As long as the App is running going on- and offline works as expected, but when I start the App offline (i.e. without network connection) the data within the LocalStorage gets corrupted and is pretty useless afterwards. As far as I could find out the issue is connected to the schema configuration of the datasource. When I use field mappings (the from option) in the model of the schema configuration all mapped field values are set to null upon an 'offline' startup.

The problem is not related to Android as I can also reproduce it in a Windows environment. In addition the standard DataSource component shows the same behaviour.

Here's a modified sample from the demos to illustrate the effect (see comment in code to simulate offline startup):

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>
 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
   
    <div id="example">
        <div id="team-schedule">
            <label>Online: </label><input id="online" type="checkbox" checked>
        </div>
        <div id="scheduler"></div>
    </div>
    <script>
      $(function() {
      var ds = new kendo.data.SchedulerDataSource({
            offlineStorage: "hs-scheduler-offlinetest",
            batch: true,
            transport: {
              read: {
                url: "http://demos.telerik.com/kendo-ui/service/tasks",
                dataType: "jsonp"
              },
              update: {
                url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
                dataType: "jsonp"
              },
              create: {
                url: "http://demos.telerik.com/kendo-ui/service/tasks/create",
                dataType: "jsonp"
              },
              destroy: {
                url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
                dataType: "jsonp"
              },
              parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                  return {models: kendo.stringify(options.models)};
                }
              }
            },
            schema: {
              model: {
                id: "taskId",
                fields: {
                  taskId: { from: "TaskID", type: "number" },
                  title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                  start: { type: "date", from: "Start" },
                  end: { type: "date", from: "End" },
                  startTimezone: { from: "StartTimezone" },
                  endTimezone: { from: "EndTimezone" },
                  description: { from: "Description" },
                  recurrenceId: { from: "RecurrenceID" },
                  recurrenceRule: { from: "RecurrenceRule" },
                  recurrenceException: { from: "RecurrenceException" },
                  ownerId: { from: "OwnerID", defaultValue: 1 },
                  isAllDay: { type: "boolean", from: "IsAllDay" }
                }
              }
            },
            filter: {
              logic: "or",
              filters: [
                { field: "ownerId", operator: "eq", value: 1 },
                { field: "ownerId", operator: "eq", value: 2 }
              ]
            }
          });
        // --------------------------------------------------------------------------
        // --- uncomment line below to simulate an offline start upon page reload ---
        //ds.online(false);
         
        $("#scheduler").kendoScheduler({
          date: new Date("2013/6/13"),
          startTime: new Date("2013/6/13 07:00 AM"),
          height: 600,
          views: [
            "day",
            { type: "workWeek", selected: true },
            "week",
            "month",
            "agenda"
          ],
          timezone: "Etc/UTC",
          dataSource: ds,
          resources: [
            {
              field: "ownerId",
              title: "Owner",
              dataSource: [
                { text: "Alex", value: 1, color: "#f8a398" },
                { text: "Bob", value: 2, color: "#51a0ed" },
                { text: "Charlie", value: 3, color: "#56ca85" }
              ]
            }
          ]
        });
 
        $("#online").on("change", function() {
            alert("Online: " + this.checked);
            $("#scheduler").data("kendoScheduler").dataSource.online(this.checked);
        });
      });
    </script>
</body>
</html>

 

Any help or hint how to get around this is highly appreciated.

Thank's in advance.

 

Kind regards,

Chris

 

Rosen
Telerik team
 answered on 20 Aug 2015
15 answers
161 views
Hi,

I recently upgraded my web app to use the latest Q3 2014 release and noticed that IE8 immediately displays the error above when loading the new library (Object doesn't support this property or method). I have tried both kendo.all.js and kendo.all.min.js and can see that the problem line is 104252, presumably because of the call to indexOf() which is not supported by IE8?

if (SKIP_SHORTCUTS.indexOf(name.replace("kendo", "")) == -1)

Is IE8 still supported by this release and if so, please can you advise a workaround until a fix is made available?

Regards,

Dan.
Petyo
Telerik team
 answered on 20 Aug 2015
9 answers
2.5K+ views
Hi 

I need to implement  Custom Edit functionality for Kendo UI Grid instead of inline Edit and Popup edit .Please suggest on this . I am very new to kendo UI .

Thanks,
Nawaz
Alexander Valchev
Telerik team
 answered on 20 Aug 2015
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
Licensing
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
+? 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?