Questions on Kendo UI for jQuery Forum

3 answers

1.5K+ views

I can't get the Kendo upload control to work for files larger than 40 meg. I first noticed it on my application, it will upload about 40% of a 40 meg file then the percent would start over to 0 again and continue to about 40% and do the same thing over and over again. I thought maybe it was on my end until I went to the demo page at http://demos.kendoui.com/web/upload/async.html and noticed that it does exactly the same thing. I tried it in both Chrome and Firefox with the same result. Can someone help me with this? I really need this to work.

Upload

answered on 24 Apr 2017

1 answer

551 views

Menu datasource: how to access it and add custom properties?

Hi,

I'm using the Kendo UI Menu for Angular 1 to list projects users can access in a solution. Is it possible to use JSON objects received from a WebAPI directly as menuItems or will I have to remap these into simpler objects? In this demo you are using custom attributes, will I be able to access these in the select event (how?)?

Further more, is it possible to access the datasource from another function in my Angular controller? I am currently storing the project ID in localstorage and if I'm able to use JSON objects or custom attributes in MenuItems I'd like to access the datasource so I can retrieve properties/attributes from the MenuItems.

BR,

Henrik

Menu

answered on 24 Apr 2017

3 answers

444 views

"Read" function for MVC PivotGrid?

I have a number of regular MVC grids that make their requests to controllers with additional data, and they make use of the Data attribute to call a function which returns an object. For example:

@(Html.Kendo().Grid<Model>()

.Name("Grid")

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(true)

.Read(read => read

.Action("ActionName", "ControllerName")

.Data("FunctionName")

)

...and this works fine, but for the PivotGrid I can't seem to find a matching equivalent. The configuration seems to be quite different in fact:

@(Html.Kendo().PivotGrid<Model>()

.Name("pivotGrid")

.DataSource(dataSource => dataSource

.Ajax()

.Transport(transport => transport

.Read("Action", "Controller")

)

.Events(ev => ev.RequestEnd("onRequestEnd").RequestStart("onRequestStart"))

I cannot seem to use the same configuration (Transport instead of Read), and I cannot find anywhere the "Data" action can be assigned. I can set this attribute to the relevant javascript function after page load using:

$("#pivotGrid").data('kendoPivotGrid').dataSource.transport.options.read.data = pivotSync;

...but I would like to be able to set this during the initial configuration of the pivot grid. Is this possible?

PivotGrid

answered on 24 Apr 2017

1 answer

237 views

KendoUI Grid Server Binding Example

I have successfully set up several KendoUI Grids, but I cannot get one using server-side paging to work. I modified my rest service so I will return a total value (hard coded right now).

Below please find the JSON that is put out and the javascript. Any help would be greatly appreciated.

$(document).ready(function(){

// Setup Rest Service

var loc = ( location.href );

var url = loc.substring( 0, loc.lastIndexOf( "/" ) ) + "/xpRest.xsp/test/";

dataSource = new kendo.data.DataSource({

pageSize: 20,

serverPaging: true,

serverFiltering: true,

serverSorting: true, transport : {

read : {

url : url + "READ",

dataType : "json"

},

type : "READ"

},

schema : {

total: "total",

model : {

id : "unid",

fields : {

unid : {

type : "string",

nullable : false

},

tckNbr : {

type : "string",

editable : false

},

tckSts : {

type : "string",

editable : false

}

});

grid = $("#grid-databound-dataItem").kendoGrid({

dataSource : dataSource,

height: 550,

filterable: true,

sortable: true,

pageable: true,

columns : [

{field : "tckNbr", title : "Number", type: "string"},

{field : "tckSts", title : "Status", type: "string"}

]

}).data("kendoGrid");

});

[

{

"total":100,

"data":

[

{

"tckNbr":"3031",

"tckSts":"1 Not Assigned",

"unid":"0014DA9095BF6D638625810700597A36",

"tckReqs":"Bryan S Schmiedeler",

"tckNts":

[

"Bryan DeBaun"

],

"tckBUs":

[

"NAP\/IFI"

],

"tckApps":"GTM",

"tckType":"Issue",

"tckPriority":"Medium"

},

{

"tckNbr":"3031",

"tckSts":"1 Not Assigned",

"unid":"00598976D88226D2862581070059AD25",

"tckReqs":"Bryan S Schmiedeler",

"tckNts":

[

"Bryan DeBaun"

],

"tckBUs":

[

"NAP\/IFI"

],

"tckApps":"GTM",

"tckType":"Issue",

"tckPriority":"Medium"

}

]

}

]

Grid

answered on 21 Apr 2017

5 answers

230 views

Grid Encapsulation

Hello,

I'm trying to create a grid that will be reused very often

<div>--other content--</div>

<kendo-grid [data]="gridData"></kendo-grid>

I tried to encapsulate this into my own <custom-grid> component

<custom-grid [gridData]="myData"></custom-grid>

I'm aware that in the jquery version i could use grid-options to give my encapsulated grid all the info i needed.

Was this removed in the angular version?

Thank you.

Grid

answered on 21 Apr 2017

2 answers

374 views

Kendo bar chart label

Hello Team,

I am using bar chart in my app, At some instances when I have large value my label is hiding within the chart.

I tried giving 100 % width to the parent div and 99% to the div on which I am building the chart but it doesn't always works because value can be of any length(e.g it works if i have 194, but doesn't work if I have 1987643).

I tried giving overflow:visible to <svg> and other parent div but no success.

Check the snapshot for the reference.

Charts

answered on 21 Apr 2017

10 answers

502 views

How to Reuse Editor for other columns with different name

I'm creating a custom Editor for TEXT AREA for my Kendo Grid. The grid will have in-line editing.

I was wondering if I could reuse the same editor for other columns as well ?

Code:

<%@ Control Language="C#" %> <textarea id="Description" name="Description" class="k-textbox"></textarea>

For example the above code can bind to column Description but what if I want to use it for another column such as Address ?

How to do it ?

Editor

answered on 21 Apr 2017

1 answer

147 views

Grid showing text on paging navigation

Hi all,

I recently updated to kendo UI 2017, and now I am having an issue with text showing behind the kendo grid paging navigation. I can do a css hack to hide the content and just show the glyphicons. But that is just a css hack.

Please take a look at the attach file and let me know what you think.

Thanks.

Grid

answered on 21 Apr 2017

1 answer

170 views

Grid behaviour is not understable

first scenario: pageSize:5
1. my grid is displaying 5 rows. on the right side of grid footer it says 1-3 of 3 items. how??
2. actual result have seven data items still grid doesn't allow me to go to the next page.

second scenario: pageSize:2
1. in the right side of grid footer it says 1-2 of 3 items, as soon as I clicked on second page it says 3-4 of 7 items.

i really do not understand why grid is behaving so weird. what am I doing wrong?
i have attached png files for both scenario and as well as in what form my data is coming. please take a look at those pictures.
the below one is my grid. please let me know what is wrong i'm doing.

references that I have follow to create this grid is http://www.telerik.com/forums/grid-support-for-data-in-array-form-instead-of-object-form#KyFQE9yl006Mm_iV0QM8fw

http://jsbin.com/utaquf/9/edit?html,js,output

001.$.ajax({

002. type: "GET",

003. url: "/Actionables/SearchSubmissions/",

004. data: {

005. filters: param,

006. moduleToSearch: moduleID,

007. moduleItemToSearch: moduleItemID,

008. },

009. success: function (result) {

010. var defer = $.Deferred();

011. function confirmation(result) {

012. if (result.length > 1) {

013. $('#field' + questionID).append('<div id=dialog></div>');

014. $("#dialog").append('<div id=grid></div>');

015. $("#dialog").kendoDialog({

016. modal: true,

017. visible: false,

018. draggable: true,

019. closable: false,

020. title: "Please Select One Submission",

021. maxWidth: 500,

022. //maxHeight:300,

023. animation: {

024. open: {

025. effects: "slideIn:down fadeIn",

026. duration: 500

027. },

028. close: {

029. effects: "slide:up fadeOut",

030. duration: 500

031. }

032. },

033. actions: [

034. { text: 'OK', primary: true, action: onOK }

035. ]

036. });

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

038. dataSource: {

039. data: result,

040. schema: {

041. data: function (result) {

042. return $.map(result, function (item) {

043. return $.map(item, function (innerData) {

044. for (var i = 0; i < displayFields.length; i++){

045. if (displayFields[i] == innerData.FieldIDString)

046. {

047. return {

048. EntryGroupID: innerData.EntryGroupID,

049. FieldTextString : innerData.FieldTextString,

050. EntryValue: innerData.EntryValue

051. }

052. }

053. }

054. });

055. });

056. }

057. },

058. pageSize: 2,

059. group: { field: "EntryGroupID" }

060. },

061. filterable: {

062. mode: "row"

063. },

064. pageable: {

065. refresh: true,

066. },

067. noRecords: {

068. template: "No records to display"

069. },

070. groupable:false,

071. //scrollable: true,

072. selectable: true,

073. columns: [{

074. field: "EntryGroupID",

075. title: "Submissions",

076. filterable: {

077. cell: {

078. operator: "contains"

079. }

080. }

081. }, {

082. field: "FieldTextString",

083. title: "Questions",

084. filterable: {

085. cell: {

086. operator: "contains"

087. }

088. }

089. }, {

090. field: "EntryValue",

091. title: "Answers",

092. filterable: {

093. cell: {

094. operator: "contains"

095. }

096. }

097. }]

098. });

099. var wnd = $("#dialog").data("kendoDialog");

100. wnd.wrapper.find('.k-dialog-title').css('background', CIMSFields.backgroundColour).css('color', IMSFields.textColour).css('width','100%').css('text-align','center');

101. wnd.open().center(true);

102.

103. function onOK(e) {

104. var data = [];

105. var grid = $("#grid").data("kendoGrid");

106. var selectedItem = grid.dataItem(grid.select());

107. if (selectedItem != null) {

108. $.map(result, function (item) {

109. if (selectedItem.EntryGroupID == item[0].EntryGroupID) {

110. data.push(item);

111. defer.resolve(data);

112. }