Questions on Kendo UI for jQuery Forum

1 answer

141 views

Hello,

I currently have a Scheduler that is coded using the HtmlHelper @(Html.Kendo().Scheduler<Model>()) rather than using javascript. I have created a custom editor for the scheduler and would like to use it, but I cannot figure out how. I know with javascript it can simply be done with the format:

editable: {

//set the template

template: kendo.template($('#EditorID').html())

},

However, with the HtmlHelper format, the ".Editable" property only seems to allow a true or false value. Is there a setting I'm missing, or will I have to rewrite everything in javascript?

Thanks so much!

Scheduler

answered on 25 Nov 2015

1 answer

206 views

Positioning and Layout

I am new to html5 world. Need some help in layouts (css).

I created a sample in plunker. http://plnkr.co/edit/nXxN17?p=preview

Basically, i am looking for main body non-scrollable. All content should be with in main page and making center element scrollable(in this case listview).

this is my requirement.

body
div - 40px;
div - maxHeight: 100px; - header
div(pager) - 30px;
div(listview) - * fill height and scrollable
div -
div - maxHeight: 100px; - footer
div - height - 40px; - buttons always stays on bottom

Appreciate your help

- Thanks

Rakesh

General Discussions

answered on 25 Nov 2015

5 answers

1.1K+ views

Window only opens once

Hello, I'm really new using Kendo. I'm trying to open a window from a custom column in kendo grid. What am I doing wrong? Because the window opens just the first time.

<div id="window"

></div>

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

<script language="javascript" type="text/javascript">

$(document).ready(function () {

var isShareholder = "True"; //comes from code-behind

if (isShareholder == "True") {

var serviceUrl = '/mif/apps/Services/ControlServices.svc' + '/GetShareholdersByType';

var serviceData = '{ "appKey" : "E4AC543E-9D95-C360-EAF1EFC5A4CA716F", "operationNum" : "EQU/MS-11838-BO", "type" : "FUND_INVESTOR" }';

$.ajax({

url: serviceUrl,

data: serviceData,

type: "POST",

processData: true,

contentType: "application/json",

timeout: 10000,

success: function (response, status) {

if (status == "success") {

BindGrid(response);

}

},

error: function (message) {

alert(message.responseText);

}

});

}

});

function BindGrid(data) {

var dataSource = new kendo.data.DataSource({

data: data,

schema: {

model: {

fields: {

Code: { type: "string" },

OperationNum: { type: "string" },

ShareholderId: { type: "number" },

ShareholderName: { type: "string" },

AcronymIdb: { type: "string" },

InvestmentAmount: { type: "number" },

InvestmentExchangeRate: { type: "number" },

InvestmentDate: { type: "date" },

InvestmentCurrencyId: { type: "string" },

CurrencyName: { type: "string" },

InvestmentUsEqu: { type: "number" },

SharePercentage: { type: "number" },

Keyword: { type: "string" }

}

},

aggregate: [

{ field: "ShareholderName", aggregate: "count" },

{ field: "InvestmentAmount", aggregate: "sum" },

{ field: "SharePercentage", aggregate: "sum" }

]

//,pageSize: 3

});

$("#grid").kendoGrid({

dataSource: dataSource,

//change: onChange,

selectable: "multiple",

//height: 400,

filterable: true,

sortable: true,

pageable: false,

scrollable: false,

resizable: true,

animation: {

open: { effects: "fadeIn" }

},

//dataBound: function (e) {

// alert('databound');

//},

columns: [

{

field: "ShareholderName"

, title: 'Shareholder'

//, footerTemplate: '<div style="font-color: Red;">Totals' + ": #=count#" + "</div>"

}

, {

field: "SharePercentage"

, title: 'SharePercentageAbbr'

, format: "{0}%"

, width: "15%"

, filterable: false

, template: '<div style="text-align:center;">#=SharePercentage#%</div>'

//, footerTemplate: '<div style="text-align:center;">#=sum#%</div>'

}

, {

field: "InvestmentAmount"

, title: 'InvestmentAmountAbbr'

, format: "{0:C}"

, width: "15%"

, filterable: false

, template: "<div style='text-align:right;'>#=kendo.toString(InvestmentAmount, 'C')#</div>"

, footerTemplate:

"<div style='text-align:right; background-color: \\#8EBC00; color: \\#FFFFFF; font-weight: bold;'>#=kendo.toString(sum, 'C')#</div>"

}

, {

field: "InvestmentDate"

, title: 'InvestementDateAbbr'

, format: "{0:dd/MMM/yy}"

, filterable: false

, template: "<div style='text-align:center;'>#=kendo.toString(InvestmentDate, 'dd/MMM/yy')#</div>"

, width: "10%"

}

, {

field: "CurrencyName"

, title: 'InvestmentCurrencyAbbr'

, filterable: false

, width: "20%"

}

, { field: "Code", title: " ", filterable: false, template: "<input type='button' class='k-button k-button-send' value='Details' onclick='showDetails(\"#=Code#\")'/>" }

]

}).data("kendoGrid");

}

function showDetails(code) {

var windowElement = $("#window");

if (!windowElement.data("kendoWindow")) {

windowElement.kendoWindow({

width: "600px",

height: "400px",

title: "TESTING",

modal: true,

resizable: false,

//close: onClose,

close: function (e) {

// destroy window

this.destroy();

},

actions: ["Close"],

content: {

url: 'shareDetail.html',

data: {

op: code

}

});

}

</script>

If someone can help me, I would be really grateful.

Thanks,

Window

answered on 25 Nov 2015

1 answer

552 views

Expand and collapse selected row when dropdown value is selected

Can you please send me a code to expand or collapse any row in the grid ? Suppose, you are working on the grid that contains kendo dropdown and you want to expand only that row in which the kendo dropdown value is selected then how can we do that ? Also, how can we collapse that expanded row. I could found code that can expand/collapse all rows but I want to do any specific row only.

Grid

answered on 25 Nov 2015

1 answer

248 views

[Solved] Labels are not wrapped within its shape's container

Hi,

I'm trying to create a process diagram using the kendoDiagram function. However, the labels for each node are not contained inside its shape's container. I tried several methods to break the line, but none seem to work. Is it possible to wrap the text of each node so it will fit inside its shape's container?

Please see attached sample screenshot and the script I used.

Thanks!!

Diagram

answered on 25 Nov 2015

1 answer

338 views

Multi-column headers and locked columns problem, please help

I use Multi-column headers with locked columns in grid, it contains 8 columns, the 1,2,3,4th columns are top level and locked, the 5678 columns are subcolumns of the 5th column, but i find in the dataBound event, the columns.length is 8,the row's cells count isn't 8, it is just the subcolumns count, only 4, and i can't find the 1,2,3,4 column's cell in the databound event.

here are my code.

dataBound: function (e) {

var columns = e.sender.columns;

var pdColIndex = 0;

for (var j = 0; j < columns.length; j++) {

if (columns[j].title == 'pd') {

pdColIndex = j;

}

// columns.length is 8

var dataItems = e.sender.dataSource.view();

for (var j = 0; j < dataItems.length; j++) {

var row = e.sender.tbody.find("[data-uid='" + dataItems[j].uid + "']");

var pdCell = row.children().eq(pdColIndex);

// row.children().length is 4?????? can't find 1,2,3,4th column's cell.

}

please help!

Grid

answered on 25 Nov 2015

6 answers

292 views

Styling point marker on Area Chart

Hi, i need to make those markers bigger, because if i use majorGridlines in the categoryAxis which are very wide, the marker is behind it and can't be seen so i would need some way to change it's z-index i tried doing it manualy but couldn't. I'll upload a screenshot in case you don't know what i'm talking about. Thanks in advance!.

Charts

answered on 25 Nov 2015

2 answers

69 views

Angular Panelbar seems to break with later versions

Is there something I'm doing wrong?

Not working: http://dojo.telerik.com/iDExa/3

Working: http://dojo.telerik.com/iDExa/4

PanelBar

answered on 25 Nov 2015

2 answers

721 views

Toolbar always visible and positioned, draggable editor window

I'm working on a project using a single editor. It took me a while to find the difference of putting the editor inside a textarea and a div (inline). The div makes the toolbar window dragable and as such positionable next to the text editor window. Great, exactly what I want! The problem I have now is that the toolbar window (initially positioned left of the text window) always disappears when somewhere clicking outside the text window. Clicking inside the text window again lets the toolbar window appear over the text window (not on predefined position like on the left side). I would like to have the toolbar window always visible and present. I found out that the toolbar becomes to a widget type of: kendo.ui.Window when putting the editor is put inside a div. By this I can open() the toolbar window when required but I'd rather remove/disable the existing default logic of hiding/displaying the command line window than open() the command line window when it disappears. Is there such a possibility? I'm aware of this thread but doesn't explain how to permanently display the toolbar window: http://www.telerik.com/forums/position-of-toolbar-for-editor

Nice to have: Then I thought why not let user decide where and by what size (resizable) they want the toolbar window AND text window? Furthermore it would be nice to add a header title (with document name) on top of text window. After checking the documentation of kendo.ui.Window I thought it offers this all I need:

- pin/unpin to make it draggable over the area as it already works for the toolbar window
- using title() function for displaying the document title above the text window

So I put a window Widget around the editor DIV. This ended up in a weird behavior: The Window Widget appears correctly and right (not inside) of it the text window of the editor. When I drag (move) the Window Widget around, the text editor will be moved simultaneously. I would have expected to see the editor's text window inside the Window Widget not beside of it.That way I can't use the Window Widget around the textedtior window. I assume the editor got screwed up on being put inside the Window Widget.

Editor