Questions on Kendo UI for jQuery Forum

1 answer

219 views

I have a Angular grid setup with locked columns (so there are scrolling), resizable = true, and fixed column width. However, occasionally the content is longer than the column width. I want to programmatically call autoFitColumn() method to make the columns to fit the content. I don't see any event to signal grid render complete. Where is a good place to call autoFitColumn()?

I tried dataBound event, but I use template with angular expression in it. At point of dataBound, the angular expression are not evaluated yet, so the calling autoFitColumn in this event will actually make things worse.

Best,

Ama

Grid

answered on 01 Feb 2016

1 answer

154 views

Several issues with diagram

Hello,

I've few problems with Kendo UI diagram control in my Angular 1.4 project. In my case I use diagram to draw an organization chart from the top to the bottom.

1. Is it possible to customize connectors (output) behavior to be drawn always from the the bottom (see attachment)? Now I've a badlook situation that connectors output random from every side.

2. How to restrict the pan/scroll area to not to move the diagram outside current viewport.

3. I want to load diagram `kendoDiagram(this.kendoDiagramOptions)` asynchronously by $q (Angular Promise) or rxjs. When I simply put this to the promise, diagram initialization seems to block whole application until its done. How to bypass this behavior.

Best regards.

Hello,
I've few problems with Kendo UI diagram control in my Angular 1.4 project. In my case I use diagram to draw an organization chart from the top to the bottom.
1. Is it possible to customize connectors (output) behavior to be drawn always from the the bottom (see attachment)? Now I've a badlook situation that connectors output random from every side.
2. How to restrict the pan/scroll area to not to move the diagram outside current viewport.
3. I want to load diagram `kendoDiagram(this.kendoDiagramOptions)` asynchronously by $q (Angular Promise) or rxjs. When I simply put this to the promise, diagram initialization seems to block whole application until its done. How to bypass this behavior.
Best regards.

Diagram

answered on 01 Feb 2016

1 answer

184 views

Treelist and footerAttributes

Will the treelist grid control support footerAttributes at some point? Is there a work around if I want to style the footer a certain way (e.g., background-color:white). I've tried footerTemplate, but it only styles the content of the template and not the entire cell.

Thanks in advance

TreeList

answered on 01 Feb 2016

3 answers

670 views

data-value-update attribute on Kendo Masked Textbox

Hi,

I'm using v2014.2.716 and I'm having an issue with the data-value-update attribute when used on anything other than a plain, un-kendo'd <input>.

Example
Given this markup:

<div id="routes">

<input id="route-value" data-role="maskedtextbox" data-value-update="keyup" data-bind="value:route" />

<h3 data-bind="html: route"></h3>

</div>

and this script:

<script>

var model = kendo.observable({

route: "Initial value"

});

$(document).ready(function () {

kendo.bind($("#routes"), model);

});

</script>

I would have expected that as one types in the textbox, the <h3> element would update as each character is typed in the textbox.

However, this *only* works if I remove the data-role="maskedtextbox" from the <input> element...is data-value-update not actually supported for Kendo widgets? If not, then how can I style this plain input to look just like a kendo masked textbox? I don't need the masking behaviour, but it will stick out like a sore thumb on my form if it's not a kendo widget!

Many thanks,

Stephen

MVVM

answered on 01 Feb 2016

4 answers

184 views

Unable to set widget in template by classname

Hello there

Maybe this is a known problem, I couldn't find this case in the Internet / forum here. I want to bind a MaskedTextBox Widget to a HTML element:

The id element "numbertest" is not available after loading the page. Thats why I added a class to the id element so it will be affected as soon as it is created. The id element is part of a Kendo UI template. In the ready function I added therefore:

$(".numericBox").kendoMaskedTextBox({
mask: "000"
});

And of course I need a valid class in the header:

.numericBox {
font-size: 20px;
}

Now the weird behaviour: The font size inside the element numbertest is set to 20 when the template is created but its not a MaskedTextBox (I can enter anything). To be sure its not only a MaskedTextBox problem I also tried to attach a NumericTextBox but that also wont work. Thats why I think its a general problem. I can only make it work when creating the numbertest element before the ready function is called. Then I'm able to bind the element numbertest to a MaskedTextBox by classname (and of course directly by accessing it by $("#numericBox"). ...

So my question: Is there a way to attach a Widget to a html element even if its not created after page is loaded (but later on by f.e. a Kendo UI template)?

Regards

MaskedTextBox

answered on 30 Jan 2016

1 answer

134 views

kendoDateTimePicker - Formatting not being applied on selection of a date in other month

Hi,

In the kendoDateTimePicker I have found that if you click a date that is not in the current month, the date format option is not applied.

If I am in January and click the 1st February then the date is formatted incorrectly in the input part of the control. Dates in January format as specified in the format option. It is formatted as below.

Mon Feb 01 2016 14:30:00 GMT+0000 (GMT Standard Time)

Does anyone know how I can get around this or is it a bug?

See the attached screen shots with the problem date highlighted.

Thanks

Kenny

DatePicker

answered on 29 Jan 2016

9 answers

1.1K+ views

[Solved] listen to cancel changes button event - toolbar

I have a grid with batch editing
toolbar: ["cancel"] creates 'cancel changes' button like in the demo : http://demos.telerik.com/kendo-ui/grid/editing

how could I listen to that event? I would like to perform some additional clean up actions

grid.cancel seems to only be working when I press ESC in edit mode

Grid

answered on 29 Jan 2016

17 answers

2.1K+ views

DataItem set collapses detail row (annoying): how to expand it?

I have a grid with detail rows. When I set the dataItem of a master row it causes it to collapse.

Is there a way to prevent the collapse on setting the master row dataItem? This seems like bad default behaviour.

Also: I can't seem to expand it again:

var parentRow = $(input).closest('.k-detail-row').prev('.k-master-row')[0];

var parentGrid = $(parentRow).closest('div.k-grid').data("kendoGrid");

var parentDataItem = parentGrid.dataItem($(parentRow).closest('tr'));

parentDataItem.set("QTY", newParent.QTY);

parentGrid.expandRow(parentRow);

The expandRow function isn't accepting the parentRow as an argument.

Grid

answered on 29 Jan 2016

1 answer

389 views

How to delete and update dependency in Gantt?

How can I delete and update a dependency in Gantt?... What actions should I take?.. i don't see buttons (for delete) or forms (for edit)

Also... this is correct for the Gantt's functionality?

var dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
transport: {
read: {
url: $('#URLObtenerDependencias').data('request-url'),
dataType: "jsonp"
},
update: {
url: $('#URLActualizarDependencia').data('request-url'),
dataType: "jsonp"
},
destroy: {
url: $('#URLEliminarDependencia').data('request-url'),
dataType: "jsonp"
},
create: {
url: $('#URLCrearDependencia').data('request-url'),
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read") {
return { models: kendo.stringify(options.models || [options]) };
}
}
},

Controller:

public JsonResult EliminarDependencia(int IdCronograma)
{
var models = this.DeserializeObject<IEnumerable<GanttDependencyModel>>("models").ToList();

---more code---
return this.Jsonp(models);
}

Gantt