Questions on Kendo UI for jQuery Forum

1 answer

1.6K+ views

Kendo Charts - How to manually set category access min/max?

I'm currently using Kendo UI with jQuery and have a line graph being rendered from a kendoChart object. I've noticed that the category axis (x axis) min and max date renders entirely based off of the data that is returned, using the earliest date as the starting point and latest as the end point. For the life of me, I can not find a way to manually set the start and end date on the chart before it renders. On the flipside, I was able to find where you set the value axis (y axis) min and max by using the chart.dataSource.options.valueAxis.min/max object.

Am I doing something wrong? Is this possible to do or is it unsupported?

Charts

answered on 21 Dec 2018

1 answer

92 views

Dropdowns and Custom Editors

I am using a grid to display system user information and have followed the guide for "Edit Records Using External Forms"

I need to implement a drop down editor for a few of the data fields associated with the user (country, userGroup, Roles) and have been struggling to accomplish that goal.

When I select a user I am using MVVM to populate the fields with the existing information.

This works great for text fields. But fields that require a drop down, will populate with the data source options but will not start with the correct selection already associated with the user.

I hope this is enough information to convey my issue. Let me know if I can provide anything else.

<input data-role="dropdownlist"

data-text-field="name"

data-value-field="groupID"

data-bind="value: selected.groupID,

source: loginGroupsDS"

/>

...

var userViewModel = kendo.observable({

...

loginGroupsDS: new kendo.data.DataSource({

transport: {

read: {

type: 'POST',

dataType: 'json',

url: crudServiceBaseUrl+'getLoginGroups'

}

},

schema: {

data: "groups"

}

}),

selected: {},

...

}

// where selected contains the data from the select grid row

// loginGroupsDS returns data in the form

groups: {[

{groupID: 2, name: "Administrator"}

]}

// userViewModel.selected has the same form

selected.groupID: {groupID: 2, name: "Administrator"}

Grid

answered on 21 Dec 2018

1 answer

154 views

Fitting kendo bar chart into an iframe

Hi, I have an iframe whose width and height can be changed dynamically. When the iframe width is increased/decreased, the chart is adjusting accordingly. However, when iframe height is decreased, the chart isn't getting auto-adjusted (fit) and scroll bar appears.

I know there is a property called chartArea to set height and width. However, given an iframe dimensions, I would like to know if there are any properties so that the chart gets auto-adjusted to fit and display.

Thanks
Vamshi

Charts

answered on 20 Dec 2018

1 answer

243 views

Custom Image Tile Layer

Hi,

I can use kendo map as an image viewer?

In other words, i can produce my own custom tile provider that create the images flux from a static image?

marc.

Map

answered on 20 Dec 2018

2 answers

81 views

Annimation effect in waterfall graph

Hello,

We have implemented a waterfall graph in one of our application. We display a graph for different years en like to make the annimation go from one year to the next. In de below sample is de default annimation. This animation makes it rather hard to see the difference between year 2018 and 209 for example because the annimation always start from the the bottom up.

http://g.recordit.co/aL5EaVS5Tw.gif

Thanks

Jan Willem

Charts

answered on 20 Dec 2018

14 answers

2.1K+ views

Edit/Delete button functions not working on inline or popup editing

I've created a grid using the Kendo Web. When using a datasource tied to a JavaScript array, the Edit/Update and Delete buttons appeared to function. When I changed the datasource to pull from a Transport, the Edit button appears to work, but the Update button does not close the window and complete the edit. Delete puts up the confirmation prompt and removes the line from the display, but I can't see any evidence that the HTTP call to the server is made.

If I hook the Grid SAVE event to a function, I can see that the function gets called.

I've simplified the code down to "only" 126 lines and have included it below.

Am I missing something obvious? If not, how would I proceed to troubleshoot this issue?

Thanks for looking at this.

001.<html>

002.<head>

003.<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" />

004.<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" />

005.</head>

006.<body>

007.<script src="http://code.jquery.com/jquery-1.9.1.js" ></script>

008.<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js" ></script>

009.<script>

010.$(document).ready(function(){

011./* -- Begin Doc ready --*/

012.var dataSource = new kendo.data.DataSource(

013.{

014. transport:

015. {

016. read:

017. {

018. url: "http://apvs26/HttpServices/api/SchedulingShiftDays",

019. type: "GET",

020. dataType: "json",

021. data: function( e )

022. {

023. console.log("data"); return{

024. shift: "rbj01"

025. };

026. }

027. },

028. update:

029. {

030. url: function() { console.log("update invoked"); return "http://apvs26/HttpServices/api/SchedulingShiftDays";},

031. type: "POST",

032. dataType: "json",

033. data: function( e )

034. {

035. console.log("update"); return{

036. shift: "rbj01"

037. };;

038. }

039. },

040. destroy:

041. {

042. url: "http://apvs26/HttpServices/api/SchedulingShiftDays",

043. type: "DELETE",

044. dataType: "json",

045. data: function( e )

046. {

047. console.log("delete"); return{

048. shift: "rbj01"

049. };;

050. }

051. },

052. create:

053. {

054. url: "http://apvs26/HttpServices/api/SchedulingShiftDays",

055. type: "PUT",

056. dataType: "json",

057. data: function( e )

058. {

059. console.log("create"); return{

060. shift: "rbj01"

061. };;

062. }

063. },

064. parameterMap: function( data, operation )

065. {

066. console.log('Map called w/' + data ); console.log( 'operation=' + operation );

067. var filter="$filter=";

068. for(var property in data)

069. {

070. filter += property + " eq '" + data[property] + "'";

071. }

072. console.log('Resulting filter: ' + filter);

073. return filter;

074. },

075. schema:

076. {

077. model:

078. {

079. id: "DayNumber",

080. fields:

081. {

082. DayNumber: { type: "number" },

083. Hours: { type: "number" },

084. StartTime: { type: "string" },

085. EndTime: { type: "string" },

086. DayName: { type: "string" },

087. Description: { type: "string" }

088. },

089. set: function(e) {console.log( "set" ); }

090. }

091. }

092. }

093.});

094.

095.$("#grid").kendoGrid({

096. dataSource: dataSource,

097. pageable: false,

098. scrollable: false,

099. toolbar: ["create"],

100. columns: [

101. { field: "DayNumber", title: "Day", width: "9%"},

102. { field: "DayName", title:"Name", width: "15%" },

103. { field: "StartTime", title: "Start Time", width: "8%"},

104. { field: "EndTime", title:"End Time", width: "8%"},

105. { field: "Hours", title:"Hours", format: "{0:n}", width: "9%"},

106. { field: "Description", title:"Description" },

107. { command: ["edit", "destroy"], title: "Actions", width: "18%" }

108. ],

109. editable: "inline"

110. //,save: onSave

111.});

112.

113.function onSave(e)

114.{

115. console.log("in onSave()");

116. return;

117.}

118.

119./* -- End Doc Ready -- */

120.});

121.</script>

122.<div id="gridcontainer">

123. <div id="grid"></div>

124.</div>

125.</body>

126.</html>

Grid

answered on 20 Dec 2018

3 answers

532 views

Tooltip k-callout incorrect position

I can't find solution for this bug after update from 2017 to 2018 Kendo UI.

Everything is on the screenshot.

Thanks in advance

ToolTip

answered on 20 Dec 2018

4 answers

691 views

Grid Column Resizing when all columns have width set.

I have set all the columns widths in a grid, when I resize one of the columns it seems to resize the adjacent columns as well.

When I don't set the column width on the last column it works as expected.
Here is a jsfilddle that has the behavior.
http://jsfiddle.net/mmowery/xpZHN/22/

I have tried to things like changing the scrollable, etc.

Hopefully, I am just missing something obvious.

Thanks in advance,
Michael

Grid

answered on 20 Dec 2018

1 answer

110 views

Kendo UI PDF Export

Hey There,

I am looking for a way to export several elements of a page. This PDF should be in A4 format and the individual elements should be arranged on it. Is this possible with Kendo UI?

General Discussions

answered on 19 Dec 2018

3 answers

1.4K+ views

sum total of another Column

Hii,

Can I show the total sum value of another Column to Current Header Row.

Please help me. it's urgent.

Here I want to show Disbursal Count sum Total group by Zone to header row of Zone Row as per my attachment.

Thanks,

Manoj Kumar
+91 9019625350

Grid

answered on 19 Dec 2018