Questions on Kendo UI for jQuery Forum

6 answers

178 views

Cannot add new rows to detail Grid (previous title: dsgfdsgdsga)

I have a hierarchical kendo ui grid that is successfully displaying items from my database, but for some reason the "Add New Record" button in the detail grid doesn't add a new row or fire any event, nor does it pull any error, and I am at a loss as to how to go about debugging this.
Each Log entity can have many LogAppends, and the children of a Log are rendering properly in the detail grid.
Here is my grid html:

<div kendo-grid k-options="registrationOptions" k-data-source="logginggridData" k-columns="gridColumns" k-selectable="true">

<div k-detail-template>

<kendo-tabstrip>

<ul>

<li class="k-state-active">Append Logs</li>

</ul>

<div>

<div kendo-grid k-options="detailGridOptions(dataItem)"></div>

</div>

</kendo-tabstrip>

</div>

$scope.detailGridOptions = function(dataItem) {

return {

dataSource: {

transport: {

read: {

url: "api/logappends/",

dataType: "json",

contentType: "application/json"

},

update: {

url: "api/logappends/",

type: "post",

dataType: "json",

contentType: "application/json"

},

create: {

contentType: "application/json",

url: "api/logappends/",

type: "post",

dataType: "json",

data: function(data) {

console.log("CREATING TEST DATA");

console.log(data.models[0]);

return data.models[0];

}

},

parameterMap: function(options, operation) {

if (operation == "update") {

return JSON.stringify(options.models[0]);

}

if (operation == "create") {

return JSON.stringify(options.models[0])

}

if (operation == "destroy") {

return JSON.stringify(options.models[0]);

}

},

error: function(e) {

// handle error

console.log(e);

},

schema: {

data: function(data) { //specify the array that contains the data

console.log("DATA RETURN TEST");

console.log(data);

return data || [];

},

model: {

id: "LogAppendId",

fields: {

LogAppendId: {

editable: true,

nullable: false,

type: "number"

},

DateAppended: {

type: "date"

},

Type: {

type: "string"

},

Comments: {

type: "string"

}

},

pageSize: 5,

filter: {

field: "LogId",

operator: "equal",

value: dataItem.LogId

}

},

scrollable: false,

sortable: true,

pageable: true,

toolbar: ["create"],

editable: "inline",

autoBind: true,

batch: true,

height: 550,

filterable: true,

columns: [{

field: "LogAppendId",

title: "ID",

width: "56px"

}, {

field: "Comments",

title: "Comments",

width: "240px"

}, {

field: "Type",

title: "Type",

width: "110px"

}, {

field: "DateAppended",

title: "Date Appended"

}, {

command: ["edit", "destroy"],

title: " ",

width: "250px"

}]

};

Any help would be appreciated. Thank you.

Grid

answered on 05 Jul 2016

1 answer

126 views

Hide columns after dragging them out of grid

Is any viable event for dragging columns (i.e. dragEnd) in Kendo Grid?

What i want to do: Drag and drop columns out of grid for hidding/deleting them.

Grid

answered on 05 Jul 2016

1 answer

215 views

Export Kendo UI Grid to word

Hi, I would like to know if is there a way to export a grid to a word filein front end?

Best

Grid

answered on 05 Jul 2016

1 answer

418 views

Kendo UI Donut Chart - Labels with 0 shown in middle

Hi,

I am trying to load a kendo UI Donut chart.

The code is given below:

function createChart(){
$("#chart").kendoChart({
title: {
position: "bottom",
text: "ABC"
},
legend: {
visible: true

},
chartArea: {
background: ""
},
seriesDefaults: {
type: "donut",
startAngle: 150

},
series: [
{
name: "Current Year: " + "<%= currentAcdYearName %>",
data: [
{
category: "Tenure-Track",
value: "10",
color: "#0de219"
}, {
category: "Perm Budget NTT",
value: "20",
color: "#90cc38"
}, {
category: "Soft Budget NTT",
value: "45",
color: "#568c35"
}, {
category: "Students",
value: "76",
color: "#606634"
}, {
category: "TBD",
value: "65",
color: "#304d38"
}
],
labels: {
visible: true,
background: "transparent",
position: "outsideEnd",
template: "#= category #: \n #=kendo.format(\'{0:P0}\', percentage)# "
}
}
],
tooltip: {
visible: true,
//template: '#= category # - #= kendo.toString(percentage,\"#\\%\")#'
//template: "#= category # (#= series.name #): #= value #%"
template: "#= category # (#= series.name #): \n #=kendo.format(\'{0:P0}\', percentage)# "

}

});
}

Once the values of any of the category becomes 0,eg.,

category: "TBD",
value: "65",
color: "#304d38"

If the value is 0 instead of 65, the label goes inside the center circle.

Could you please let me know how to retain the label on the donut without making it come inside the center of the donut.

Thanks,

minu

Charts

answered on 05 Jul 2016

2 answers

289 views

Left position not working

Hi,

Just notice now when i try to position the tooltip at left it will always display it at right.
The other positions are working as they should.

I've made an example here.

http://dojo.telerik.com/IlONI

Thanks in advance.

ToolTip

answered on 04 Jul 2016

2 answers

1.5K+ views

[Solved] Set Height On MultiLine Textbox in MVC Grid with InLine Editing

Is there a way to set the height on a MultiLine Textbox in the MVC Grid? It seems that IE 11 is showing a little more than a row but Chrome and FireFox show multiple rows when editing a row. I have the [DataType(DataType.MultilineText)] attribute set on the property I'm editing in my View Model.

ViewModel

[DataType(DataType.MultilineText)]

public string Comments { get; set; }

Grid column definition

columns.Bound(c => c.Comments).Width(400);

See attached for screenshots. I need this to be consistent so is there a way to get the height of the editor textbox the same?

Grid

answered on 04 Jul 2016

5 answers

293 views

Grid.hideColumn method while the grid is not shown

Hello,

Here is a short description about how we use KendoUI grid in our project :
- An http request is made from the browser to the server to get a JSON object that contains the grid structure (datatype, name, etc...)
- The grid is dynamically built with the JSON object content
- Some column must be hidden just after the grid construction, so, we use databound event :

dataBound : function() {

[...]

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

ao_Grid.hideColumn(as_ColumnsToHide[i]);

}

[...]

}

When this code is processed, the grid is not visible as it is in a tabstrip component from Telerik ASP.NET Ajax.
An error is raised from hideColumn() method after this "filter" directive :

cell = leafDataCells(container).filter(":visible").eq(headerCellIndex);

cell[0].style.display = "none";

cell[0].style is undefined because the filter method return 0 element.

Could you please see if there is a simple workaround in my situation ?
Regards.

Grid

answered on 04 Jul 2016

1 answer

139 views

Map modification: state names / alaska & Hawaii reattached and rescaled

Hi!

How can achieve look and feel (see picture)

1. state names visible

2 . alaska & Hawaii reattached

Highcharts us-all-territories.geo.json attached in zip

coordinates look different [1747,3920] and do not work with Kendu Map

Thanks

Map

answered on 04 Jul 2016

9 answers

694 views

Undo and Redo paste function

Hi there,

I have custom tool buttons on my editor, and those buttons paste some text inside the editor on click (using the paste function). I cannot undo or redo these paste operations. If I manually type some thing, then undo and redo works on that, but not on the pasted text.

What would be a good solution to this?

Thank you in advance,
Nisarg Patel

Editor

answered on 04 Jul 2016

4 answers

465 views

[Solved] Overflow not showing until window is resized

Hi,

I have a kendo toolbar that has one static button. The rest are added via javascript that calls to web service to determine what buttons are to be made available. If the code adds too many buttons, I expect the overflow to appear, but it does not. The window must be resized and then the overflow appears.

I've made a demo to show the issue: http://dojo.telerik.com/OXUpA

Please let me know what I can do to get the overflow to appear immediately when it is needed.

Toolbar

answered on 04 Jul 2016