Questions on Kendo UI for jQuery Forum

7 answers

1.1K+ views

Unable to set readonly Html.Kendo().EditorFor(model)

Hi I have a disable or read only issue with Kendo editor in my c# MVC project :

@(Html.Kendo().EditorFor(m => m.Other_Areas)
.Name("Other_Areas")
.Encode(false)
.Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough().JustifyLeft().JustifyCenter().JustifyRight().JustifyFull().InsertUnorderedList().InsertOrderedList().Outdent().Indent()
.CreateLink().Unlink().InsertImage().InsertFile().SubScript().SuperScript().TableEditing().ViewHtml()
)
.HtmlAttributes(new { @class = "form-control" }))

Currently I have @Html.TextAreaFor(m => m.Other_Areas, new { @class = "form-control" }) and "clicking "View" link calls a function called

enableControls() { document.getElementById('Other_Areas').disabled = false;} this is just working fine. Now that I have replaced with Html.Kendo().EditorFor none of the following works:

//var cteditor = $("#Other_Areas").data("kendoEditor"),
//editorBody = $(cteditor.body);
//editorBody.removeAttr("contenteditable").find("a").on("click.readonly", false)
//$($("#Other_Areas").data().kendoEditor.body).attr("contenteditable",false);
//$("#Other_Areas").css("z-index", 2);
//$('Other_Areas').contents().find("body").attr('contenteditable', false);
//$('.k-editor-toolbar').hide();
//$('#Other_Areas').attr('disabled', true);
//$($("#Other_Areas").data().kendoEditor.body).attr("contenteditable", false);
//$('#Other_Areas').data('kendoEditor').contentEditable(false);
//$($('#Other_Areas').body).attr('contenteditable', false);

//var cteditor = $("#Other_Areas").data().kendoEditor;
//var editorBody = $(cteditor.body);
//editorBody.attr("contenteditable", false);

// $("#Other_Areas").data("kendoEditor").disable = true;

//$('.k-editor textarea').each(function (idx, element) {
// $($(element).data("kendoEditor").body).attr("contenteditable", false);
//});
$(editor.body).attr('contenteditable',false);
$('.k-editor textarea').each(function (idx, element) {
$($(element).data("kendoEditor").body).attr("contenteditable", false);
});

Currently I am using Kendo.mvc.dll version 2020.1.406.545

I tried several samples (http://dojo.telerik.com/oMaDAZ etc) and it seems all are version specific. If I download as a seperate html/app it just works fine. Its not working in my application. I tried to add external references listed in example but my application throws multiple error stating that auto populate, date control etc are not working or Jquery not defined etc. May be because, I already have 2020 version kendo.mvc.dll locally and in addition if I add, the duplicate references leading to this error.

Please advise on how to completely disable the Html.Kendo().EditorFor(m => m.Other_Areas) including the tools disabling like https://dojo.telerik.com/@NeliKondova/urIZAZAy

Please advise.

Many thanks,

Swati

Editor

answered on 02 Apr 2021

4 answers

574 views

Multirow select only returning first row of grid

My grid has "selectable: "row multiple"" set, and I want to make copies of all selected rows when a "Copy" custom button is pressed.

Please take a look at my code so far:

$('a.k-grid-copy').click(function (e) {

e.preventDefault();

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

grid.select().each(function () {

console.log(this);

var selected = grid.dataItem(this);

console.log(selected);

grid.dataSource.add({

a: selected.a,

b: selected.b,

c: selected.c

});

When I console.log(this) in the body of the .each() function, the rows are logged correctly. However, grid.dataItem(this) will return the first selected row in the first loop iteration, then for all subsequent iterations, it will return the first row of the grid (whether or not it is selected). Why is this happening? As I stated above, this for each iteration is CORRECT, but when you set var selected to grid.dataItem(this), selected becomes the first selected row on the first iteration in .each(), then it becomes the first row in the grid on all subsequent iterations.

Here is a Dojo that recreates the problem: http://dojo.telerik.com/ApAJU

The issue only appears when selecting multiple rows. Try selecting any number of rows > 1, press the Copy button, and see the console. The <tr> elements are correct, but the JS objects are not. This does not happen when you do not add the rows after (a.k.a if you ONLY log and do not create copies, there is no problem). Thus, there is something wrong with adding the copies.

Thanks

Andy

Grid

answered on 02 Apr 2021

1 answer

1.3K+ views

Click "selection checkbox" from button outside of grid

I am using the Selection Checkbox feature of a Grid. For reference, built from this demo: https://demos.telerik.com/kendo-ui/grid/checkbox-selection

So I have a grid like the following:

$("#rgrid").kendoGrid({
        dataSource: GridRepoDataSource(),
        sortable: true,
        persistSelection: true,
        change: onChange,
        columns: [
            {
                selectable: true,
                width: "50px"
            },
            {
                field: "name",
                title: "Name"
            },
            {
                field: "description",
                title: "Description"
            }
        ]
    });

What I'm trying to do is after the grid has been loaded I have a button outside of the grid. When I click on the button, I want to select the check-box in the row based on the name. And hoping that when I do click on that button, hoping that the OnChange event still fires.

Thanks,

Richard

Grid

answered on 02 Apr 2021

5 answers

501 views

Get cursor position

Can we get cursor position on diagram while clicking (or even not clicking) on the diagram canvas like e.point in click event?

Diagram

answered on 01 Apr 2021

1 answer

215 views

Kendo Grid Export from Sandbox (restricted) mode from new tab

I am trying to use the Export to Excel provided from Kendo Grid similar to here - https://demos.telerik.com/kendo-ui/grid/excel-export

It works on the browser, but is restricted when I try from a sandbox mode like an iframe integrated to another application. One way to overcome this is to do the export in a new focused tab. I saw the "proxyTarget" is a property in PDF export (https://www.telerik.com/forums/export-an-html-to-pdf-and-open-it-in-another-tab-or-new-browser) but not in Excel, is there any workaround for this use case?

Window

answered on 01 Apr 2021

3 answers

230 views

Spreadsheet event on comment

Hi ,

we have a requirement to disable comment option on click of few cells (which are disabled) or to show a toastr message on click of comment that user can't add comment on specific cell. Do you have any such feature or event to track this requirement ?

Spreadsheet

answered on 01 Apr 2021

1 answer

109 views

format of date in column of grid

Below code shows how I format the date of a column.

{
field: "DatumAanvraag",
title: "Datum aanvraag",
template: "#= DatumAanvraag ? kendo.toString(kendo.parseDate(DatumAanvraag, 'yyyy-MM-dd'), 'dd-MM-yyyy') : '' #"
},

The model is like this:

DatumAannvraag: { type: "date" },

This works for dates but when I add HH:mm a null is returned.

Any ideas how to optimize this code?

Grid

answered on 01 Apr 2021

2 answers

320 views

Populating Html on Grid Row Click

I would like to be able to populate some Html on a page after I click a row in a Kendo Grid. I am able to get data from the clicked row but not sure how populate the Html once I get it. I have a demo app that illustrates my problem at https://dojo.telerik.com/@rswetnam/iNATUDOz

As well as that, I was hoping to get assistance in:

Making an additional call on the change event to get other data associated with the original record select - e.g. customer purchases
Finding documentation associated with https://demos.telerik.com/kendo-ui/service/Northwind.svc/ e.g. how to make calls to order-details etc.

Thank you.

Roger

Grid

answered on 31 Mar 2021

2 answers

1.2K+ views

Get dataValueField(s) for the selected items of Autocomplete control in change event.

I have a Autocomplete kendo control. I am selecting some values by doing a filtering after selecting 5 items as shown in the attached image. I am able to retrieve value after individual selection. But I want to get dataValueField for the all the selected items of Autocomplete control in change event. Please find the below code. Kindly suggest in this

$("#Products").kendoAutoComplete({
dataSource: result,
dataTextField: "TagName",
dataValueField:"TagID",
filter: "startswith",
placeholder: "Select Product...",
separator: ", ",
select: function (e) {
if (e.dataItem) {
var dataItem = e.dataItem;
alert(dataItem.TagID);//Returns dataValueField value for individual selected item
alert(dataItem.TagName);//Returns dataTextField value for individual selected item
}
if (e.item)
{
//var dataItem = e.dataItem;
var item = e.item;
var text = item.text(); //Returns dataTextField value for individual selected item
}
},
change: function (e) {
alert($("#Products").data("kendoAutoComplete").value());//Returns dataTextField value for multiple selected items
var s=$("#Products").data("kendoAutoComplete").value(); //Returns dataTextField value for multiple selected items
//Need to get dataValueField for multiple selected items
}
});

AutoComplete

answered on 31 Mar 2021

0 answers

394 views

detailInit not working

On my page i have 2 tabs . First tab contains item with details . On page load details open perfectly . on First tab click , i get the data again .Now details does not open . But on second click on First tab , we get the data again and now i am able to expand the details data again . On each alternate click on the First tab , i am able to get expand details data again

Note : Details expands in debugger mode but only once

Grid

asked on 31 Mar 2021