Questions on Kendo UI for jQuery Forum

2 answers

1.0K+ views

kendoGrid.scrollTo( $row );

What is the most reliable way, in the opinion of the kendo staff?

This would be a good built-in method to add to the API.

EDIT: Got it!

var _offset = $(myRow).offset();
var _topoffset = _offset.top;
$("#grid div.k-grid-content").scrollTop(_topoffset);

Grid

answered on 20 Mar 2015

1 answer

349 views

How to Pass Column ID or Value to Delete confirmation in Kendo Grid

I want to pass column value to the delete confirmation. Are you sure you want to delete "Column Value" ? How can I do this ?

@(Html.Kendo().Grid<OrdersViewModel>()
.Name("Orders")
.HtmlAttributes(new {style = "height: 100%; border-width: 0;"})
.Columns(c =>
{
c.Bound(p => p.Id)
.Width(50)
}
.Editable(editable =>
{
editable.Mode(GridEditMode.InLine);
editable.DisplayDeleteConfirmation("Pass COlumn Value here");
}))

Grid

answered on 20 Mar 2015

6 answers

194 views

[Solved] ImageBrowser Screws Up Page Layout

I am using the Kendo Editor in an MVC/AngularJS application and there is a problem when I configure the imageBrowser for the editor.

When the editor is first displayed it is set to "read-only" until the user selects the "Edit" option as shown in the attached image "EditorReadOnly".
Once the user selects "Edit" the editor is set to "read-write" as shown in the attachment "EditorReadWrite". This has been working correctly for a while now.

I then decided to implement the "imageBrowser" options to allow the user to insert an image in the editor (see this thread for a background). When I included the configuration options to allow the user to browse for the images to be inserted my page layout gets screwed up as shown in the attachment "EditorImageBrowser".

The HTML for the template is;

<div class="form-group" show-errors>

<div class="col-md-10 col-sm-8">

<div class="row">

<label id="sectionText" for="txtNarrative" class="col-xs-12 control-label" style="text-align: left;">{{formData.sectionTitle}}</label>

<div class="col-sm-12">

<div ng-class="{'has-error' : frmSection.txtNarrative.$invalid && frmSection.txtNarrative.$dirty}">

<textarea kendo-editor="txtNarrative"

ng-model="rptSectionText.narrative"

id="txtNarrative"

name="txtNarrative"

class="form-control"

ng-required="true"

k-encoded="false"

k-tools="editorTools"

style="height: 400px;"

stylesheets="['/Content/KendoEditor.css']"></textarea>

</div>

<div class="row" style="margin-top: 10px;">

<div class="col-sm-6">

<input type="radio" name="status" value=0 ng-disabled="!formData.editing" ng-model="rptSectionText.status" /> Draft

<input type="radio" name="status" value=1 ng-disabled="!formData.editing" ng-model="rptSectionText.status" /> Submitted

<input type="radio" name="status" value=2 ng-disabled="!formData.editing" ng-model="rptSectionText.status" /> Approved

</div>

<div class="col-sm-6">

<div class="pull-right">

<input type="button" class="btn btn-default" ng-show="!formData.editing && formData.editable" value="Edit" ng-click="toggleEdit()" title="Edit the selected section text" />

<input type="button" class="btn btn-danger" ng-show="!formData.editable && rptSectionText.id" value="Revise" ng-click="toggleReview()" title="Remove the Approved status to allow editing" />

<input type="button" class="btn btn-danger" ng-show="formData.editing" value="Undo" ng-click="undoChanges()" title="Undo any changes made to the section text since it was loaded or last saved" />

<input type="submit" class="btn btn-success" ng-show="formData.editing" ng-disabled="frmSection.$invalid" value="Save" ng-click="submitForm()" title="Save any changes made to the section text (document remains checked out)" />

<input type="button" class="btn btn-default" ng-show="formData.editing" value="Close" ng-click="closeEditor()" title="Check-in the document once all changes have been saved" />

</div>

The code in the controller to set the editor read-only is;

// Set the editor to read-only until the user selects "Edit"...

$scope.$on("kendoWidgetCreated", function (event, widget) {

// The following code which is the recommended way to modify the editor didn't work because the "if (widget === $scope.txtNarrative)" statement never returned true?

//if (widget === $scope.txtNarrative) {

// console.log("Found narrative widget...");

// $($("#txtNarrative").data().kendoEditor.body).attr("contenteditable", $scope.formData.edit);

//}

var editor = $('#txtNarrative').data('kendoEditor');

if (editor !== undefined) {

editor.body.contentEditable = false;

$('.k-editor-toolbar').hide();

}

});

And the code to configure the imageBrowser is;

// Set the editor to read-only until the user selects "Edit"...

$scope.$on("kendoWidgetCreated", function (event, widget) {

// The following code which is the recommended way to modify the editor didn't work because the "if (widget === $scope.txtNarrative)" statement never returned true?

//if (widget === $scope.txtNarrative) {

// console.log("Found narrative widget...");

// $($("#txtNarrative").data().kendoEditor.body).attr("contenteditable", $scope.formData.edit);

//}

var editor = $('#txtNarrative').data('kendoEditor');

if (editor !== undefined) {

$('#txtNarrative').kendoEditor({

imageBrowser: {

transport: {

read: "imagebrowser/read",

destroy: "imagebrowser/destroy",

create: "imagebrowser/createDirectory",

uploadUrl: "imagebrowser/upload",

thumbnailUrl: "imagebrowser/thumbnail",

imageUrl: "/content/images/{0}"

}

});

editor.body.contentEditable = false;

$('.k-editor-toolbar').hide();

}

});

Even though the page layout is screwed when I click the "Insert Image" toolbar button the image browser is displayed correctly and the selected image is placed in the editor.

Any suggestions on how to fix this would be greatly appreciated.

Editor

answered on 20 Mar 2015

2 answers

1.2K+ views

Change cursor on series hover

Hi,

We want to implement drill down functionality on series item (bar) click. For that we want to change mouse cursor to pointer on chart series item hover. When
mouse moves out of series, cursor should be set to default.

How can I achieve this?

Thanks,
Prashant Gham

Charts

answered on 20 Mar 2015

1 answer

437 views

[Solved] Data Source with list property in model, update not triggering

Given a model that looks like :

public class TempPart

{

public int DealerProductId { get; set; }

public string SupplierCode { get; set; }

public string Supplier { get; set; }

public string ProductNumber { get; set; }

public List<string> AlternativePartNumbers { get; set; }

}

I render a grid. Each row has a client template containing a tabstrip. One of these tabstrips contains a list of inputs that are used to display and update the "AlternativePartNumbers" above. A button on this tabstrip controls updating the datasource with the changed values, using the following javascript :

function updateAltNumbers(e) {

var id = $(e).closest("div").find("input[name='dpId']").val();

var dataItem = $('#partsGrid').data('kendoGrid').dataSource.get(id);

var dataItemColumn = dataItem.get("AlternativePartNumbers");

var i = 0;

$('#AltNumbersList_' + id).find('input').each(function (e) {

dataItemColumn[i++] = $(this).val();

});

dataItemColumn.length = i;

dataItem.set("AlternativePartNumbers", dataItemColumn);

$('#partsGrid').data('kendoGrid').dataSource.sync();

}

In the javascript debugger I can see that the dataItem is being updated, the array of strings is filled and added to the datasource. However, the sync method does not trigger the dataSource.Update. If I add an arbitrary field to this model and update that field before the sync as well, everything works fine and the updated record is submitted succesfully to the underlying controller :

public bool Update { get; set; }

dataItem.set("AlternativePartNumbers", dataItemColumn);

dataItem.set("Update", true);

$('#partsGrid').data('kendoGrid').dataSource.sync();

Any ideas on how to correct this behavior?

ic bool Update { get; set; }

dataItem.set("AlternativePartNumbers", dataItemColumn);

dataItem.set("Update", true);

$('#partsGrid').data('kendoGrid').dataSource.sync();

l

Data Source

answered on 20 Mar 2015

1 answer

276 views

Kendo Grid Disabling CSS Not working

Hello,

n my parent page, I have a kendo Grid(grid 1), which contains two command buttons Submit and Delete.

Once the user clicks on Submit, I am showing Partial View(Contains Kendo Grid (grid 2) in Kendo Window. On Window Close, using Databound function, I am making the submit button hide and Showing the delete button. When I click on Delete button, The same partial view which contains Grid 2 shows up but the style which is working when I click submit button not working. Here is the Style I am applying for partial view kendo Grid(Grid 2) in document.ready function

var grid = $("#Grid").data("kendoGrid");
grid.hideColumn(6);
$("#Grid").removeClass("Style");
$("#Grid").height('107');
$("#Grid").width('445');

Grid

answered on 20 Mar 2015

3 answers

271 views

Connector lines

when linking two shapes, the connector lines are drawn straightly without any intermediate points, I would like to have the connector lines straight and band at 90 degrees like in the attached screenshot.

Thanks in advance.

Diagram

answered on 20 Mar 2015

1 answer

313 views

Validation on Keydown?

Hi all,

I have a validator configured to perform validation on a textbox. I am seeing the validator being called on the keydown event. This brings up two questions.

1) Why is it calling the validator for every keystroke and not just when control leaves the textbox? I read that by default it validates only onblur.
2) Since the validator is being called on the keydown event the validation is one stroke behind. For example if I am typing 'abcd' I see the following
    press a - validator input.val() = ''
    press b - validator input.val() = 'a'
    press c - validator input.val() = 'ab'
    press d - validator input.val() = 'abc'

Because of this I cannot validate properly. What am I doing wrong?

Validation

answered on 20 Mar 2015

2 answers

475 views

AngularJS required attribute

Hi,

I'm using the DropDownList-control in an AngularJS-form. I have the following code:
<select name="Category" required="required" title="Vælg venligst en kategori" kendo-drop-down-list k-options="categoryOptions" ng-model="item.Category"></select>

It works pretty fine and I'm able to save the data back to the server. However, as you can see I have added the required attribute to the input-element. This results in the following error message in the console:
An invalid form control with name='Category' is not focusable.

I guess that the reason for this is the fact that the input-element has a display:none and therefore the browser is not able to locate it. But is there some other method to handle this?

Regards,

Peter

DropDownList

answered on 20 Mar 2015

3 answers

333 views

angularjs selected values issue

Hi,

in the past days I had a problem loading initial selected values into a kendo-multi-select.

The list is populated by a odata kendoDataSource and I've been setting k-options as
{
autoBind: false,
value: theArrayOfIdAndDisplayNameProperties
}

I've tried two different approaches:
1. load the selected values into the controller activation and use k-rebind
2. load the selected values into route resolve without using k-rebind

It turned out that the only way to get this work is the second, because if I'm loading data into the controller in an async way a digest exception is thrown every time. I've try to put the call in $timeout as explained into the guide: http://docs.telerik.com/kendo-ui/web/multiselect/how-to/AngularJS/pre-select-items but no chance.

Is there a way to load initial items from a controller without causing a digest error?

I'm using AngularJS 1.2.27 and Kendo UI v2014.3.1411

Thanks,
Enrico

MultiSelect

answered on 20 Mar 2015