Questions on Kendo UI for jQuery Forum

0 answers

161 views

File Manager - Kendo jQuery - Undefined filename

HI,

I am using Kendo jQuery.

FileManager is not showing the folder names , instead it is showing as "undefined".

Version :

<script src="~/lib/kendo-ui-2023.3.1010/js/kendo.all.min.js"></script>
<script src="~/js/kendo-ui-license.js" type="text/javascript"></script>

Visual Studio C# backend response

c# Code :
public virtual JsonResult OnPostFileManagerRead(string target)

{
try
{
........
........
var files = directoryBrowser.GetFiles(path, Filter);

var directories = directoryBrowser.GetDirectories(path);

var result = files.Concat(directories).Select(f => new
{
Name = f.Name,
Size = f.Size,
Path = VirtualizePathString(f.Path),
Extension = f.Extension,
IsDirectory = f.IsDirectory,
HasDirectories = f.HasDirectories,
Created = f.Created,
CreatedUtc = f.CreatedUtc,
Modified = f.Modified,
ModifiedUtc = f.ModifiedUtc
});

return new JsonResult(result.ToArray());
}
catch (DirectoryNotFoundException)
{
throw new Exception("File Not Found");
}
}

throw new Exception("Forbidden");
}
catch(Exception ex)
{
return new JsonResult(ex);
}
}

Query :

1. What might be the issue ?

2. How can i resolve this issue ?

FileManager

updated question on 27 Feb 2024

0 answers

78 views

Kendo Chart Axis Label (categoryAxis)

Hi. I have a single JSON Array like this:

[{
            "country": "Spain",
            "year": "2008",
            "unit": "GWh",
            "solar": 2578,
            "hydro": 26112,
            "wind": 32203,
            "nuclear": 58973
}];

And, What I want to do is make this single array into a chart. (I hope the name of the series is the same as the axis text.)

Like this.

but, If I write code like this... All series are included in one category. How can I solve this?

var tempData = [{
    "country": "Spain",
    "year": "2008",
    "unit": "GWh",
    "solar": 2578,
    "hydro": 26112,
    "wind": 32203,
    "nuclear": 58973
}];

$("#chart").kendoChart({
    dataSource: {
        data : tempData
    },
    series:
    [{
        field: "nuclear",
        name: "Nuclear"
    }, {
        field: "hydro",
        name: "Hydro"
    }, {
        field: "wind",
        name: "Wind"
    }],
    categoryAxis: {
      categories: ["Nuclear", "Hydro", "Wind"]
    }
});

Charts

asked on 27 Feb 2024

1 answer

77 views

Attributes in kendo template not being replaced correctly for custom tools for Kendo editor jp

Hello,

I am debugging my code using Kendo Dojo example, https://demos.telerik.com/kendo-ui/editor/custom-tools, then click "Edit in Kendo UI Dojo" https://dojo.telerik.com/uyaWeQeb .

Here's the code I added to the example in tools array:

,{
name: "addTagv2",

tooltip: "Add a tag/segment",
label: "tag/segment",
template: '<button style="padding-left: 5px !important;" type="button" name="#: name #" title="#: tooltip #">#: label #</button>'

},
{
name: "editTagv2",

tooltip: "Edit a tag/segment",
label:"tag/segment",
template:'<button style="padding-left: 5px !important;" type="button" name="#: name #" title="#: tooltip #">#: label #</button>'
}

However, when I inspect the buttons I see the following HTML rendered:

<button style="padding-left: 5px !important;" type="button" name="Dojo output" title="Add a tag/segment" tabindex="-1">tag/segment</button>

<button style="padding-left: 5px !important;" type="button" name="Dojo output" title="Edit a tag/segment" tabindex="-1">tag/segment</button>

Where is "Dojo output" coming from? Is "name" a reserved word or property for the tool button.

Thanks,

James

Thanks,

James

Editor

answered on 26 Feb 2024

0 answers

272 views

Kendo-grid resize column will reset the grid, reverting to original values. How do I make resized widths stay set?

AngularJS version 1.5.8.
Kendo UI version 2016.3.914+Official

I have a kendo grid with the resizeable property set to true. However, when I display the grid and then use my cursor to resize the grid, it appears the grid rebinds the data and reverts all columns to their original size.

How do I make resized widths stay set?
Are there any properties I should look at to help with this issue?

Grid

updated question on 22 Feb 2024

0 answers

234 views

Kendo UI - Drag and Drop functionality not working as expected within a Scheduler component

Context

We're using Scheduler component and a custom list of items. We're also using the Draggable component to let the items to be dropped into the Scheduler component. You can find the layout of the implementation in the attachment.

The configuration of the items is the following:

$(element)
  .find(`.${NS}customer-list__draggable`)
  .kendoDraggable({
    hint: () => {
      var draggableElem = $(`
      <span class="ui-draggable ${NS}customer-list__dragging">
        ${scope.customer.name} <br>
      </span>
      `);
      draggableElem.css({
        borderLeft: `3px solid ${scope.customer.displayColor}`
      });
      return draggableElem;
    },
    dragstart: event => {
      // prevent dragging on agenda view
      if ($rootScope.scheduler.viewName() === "agenda") {
        event.preventDefault();
      }
    },
    autoScroll: false,
    containment: "window",
    cursorOffset: { right: 0, top: 0, left: 0, bottom: 0 },
    distance: 50,
    group: "schedulerCustomerGroup"
  });

The configuration of the Drop are is the following:

scheduler.view().table.kendoDropTargetArea({
  group: 'schedulerCustomerGroup',
  filter: '.k-scheduler-table td, .k-scheduler-header-all-day td, .k-event',
  dragenter: (e) => {
    var offset = $(e.dropTarget).offset(),
          slot = scheduler.slotByPosition(offset.left, offset.top);

    $(slot.element).css('background', '#bce8f1');
  },
  dragleave: (e) => {
    var offset = $(e.dropTarget).offset(),
          slot = scheduler.slotByPosition(offset.left, offset.top);

    $(slot.element).css('background', '');
  },
  drop: (event) => {
    var offset = $(event.dropTarget).offset(),
        slot = scheduler.slotByPosition(offset.left, offset.top),
        dragElem = event.draggable.element[0],
        customer = _.find($rootScope.customers, {id: $(dragElem).data('customerId')});

    $(slot.element).css('background', '');

    scheduler.addEvent({
      title: customer.name,
      start: slot.startDate,
      end: slot.endDate,
      description: '',
      customerId: customer.id,
      streetAddr: customer.streetAddr,
      city: customer.city,
      state: customer.state,
      country: customer.country,
      zip: customer.zip,
      phone: customer.phone,
      lat: customer.lat,
      long: customer.long,
      accountId: customer.accountId,
      contactId: customer.d_tx_uid,
      isAllDay: slot.isDaySlot,
    });
  }
});

You can notice the group setting is the same in both configurations: schedulerCustomerGroup.

The filter configured in the kendoDropTargetArea is the following:

.k-scheduler-table td
.k-scheduler-header-all-day td
.k-event

As you can see, the filter include all the cells in the Scheduler component.

Problem

The problem I'm having is when using the Work Week, and resizing the browser to an specific dimension, some cells are not being detected as drop area.

As you can see, I cannot drop the item in Wed 2/21.

A workaround is to resize the browser, but that's not a final solution I'm expecting to have.

Drag and Drop

Scheduler

asked on 21 Feb 2024

1 answer

95 views

Want to costomized validation

I want to costomised validation, but right now it is showing incorrect validation , I am providing the screen sort and working code. pls provide the correct code so I can costomised the validation.

our working code is:
$("#EnterpriseNote-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("ListEnterpriseNoteData", "Enterprise", new { Id = ViewBag.EnterpriseID }))",
type: "POST",
dataType: "json",
// data: additionalData
}, create: {

url: "@Html.Raw(Url.Action("AddEntrpriseNoteData", "Enterprise", new { newdata = "", Id = ViewBag.EnterpriseID }))",
type: "GET",
dataType: "json",
// data: addAntiForgeryToken
},update: {
url: "@Html.Raw(Url.Action("EditEnterpriseNote", "Enterprise"))",
type: "POST",
dataType: "json",
// data: addAntiForgeryToken
},
destroy: {
url: "@Html.Raw(Url.Action("DeleteEnterpriseNote", "Enterprise"))",
type: "POST",
dataType: "json",
// data: addAntiForgeryToken
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
strNoteText: {
editable: true, type: "string",

validation: {
required: {
message: 'Note Text is required'
},
}
},
strNextReminderDate : { editable: true, type: "date" },
strFirstname: { editable: false, type: "string" },
strAssignedTo: {
editable: true, type: "string",
validation: {
required: {
message: 'PhoneNumber is required'
},
Assignedvalidation: function (input) {
var trimmedValue = input.val().trim();
debugger
if (input.val() == "") {
var acv = $(".k-tooltip-validation[data-for='strAssignedTo']");
acv.text("PhoneNumber is required");

}
return true;
},
}, },
bitClosedYN: { type: "boolean", editable: true, }
}
},
sort: [{ field: "id", dir: "desc" }]
},
requestEnd: function (e) {
if (e.type == "create" || e.type == "update") {
this.read();
}
},
error: function (e) {
//display_kendoui_grid_error(e);
// Cancel the changes

$('#divError').html('<div class="alert alert-danger alert-dismissable">'
+ '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Note cannot be deleted because it is being used.'
+ '</div>');
this.cancelChanges();
},
pageSize: 4,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [10, 15, 20, 50, 100]

},
toolbar: [{ name: "create", text: "Add New" }],
editable: {
confirmation: "Are you sure you want to delete this item?",
mode: "inline",
//mode: "incell"
},
scrollable: false,
///////////////////////////code by puja verma//////////////////////
dataBound: function (e) {

var dataItems = this.dataSource.view();
var isFieldPending = false;
var validationErrors = [];
for (var i = 0; i < dataItems.length; i++) {
if (dataItems[i].strNoteText === "") {
isFieldPending = true;
validationErrors.push("Please Save the new record before clicking Next");
break;

}
}

@*////////////////////code by puja verma///////////////////*@
var nextButton = $("#nexttocomplete");
var validationMessage = $("#validationMessageEnterprisenotes1,#validationMessageEnterprisenotes");
if (isFieldPending || validationErrors.length > 0) {
nextButton.prop("disabled", true);
validationMessage.text(validationErrors.join('\n'));

}

else {
nextButton.prop("disabled", false);
validationMessage.text("");
}
},
///////////////////////////code by puja verma//////////////////////
// dataBound: onDataBound,
columns: [

{
title: "Action",
command: [
{
name: "edit",
text: {
edit: '<i style="color:#B60202;" class="fa fa-edit fa-lg"></i>',
update: '<i style="color:#B60202;" class="fa fa-floppy-o" aria- hidden="true"></i>',
cancel: '<i style="color:#B60202;" class="fa fa-close fa-lg"></i>'
}
},

{
name: "destroy",
text: '<i style="color:#B60202;" class="fa fa-trash fa-lg"></i>'
}
],
width: 130
},

{
field: "strNoteText",
title: "Enterprise Note",
width: 300
},
{
field: "strAssignedTo",
title: "Assigned to",
width: 300,
template: '#=strFirstname#',
editor: function (container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataSource: noteList,
dataTextField: "strFirstname",
dataValueField: "strAssignedTo",
valuePrimitive: true,
autoBind: false,
optionLabel: "Select site admin",
height: 500
})
},
},
{
field: "strNextReminderDate",
title: "Reminder Date",
format: "{0:dd/MM/yyyy}",
width: 300
},
{
field: "bitClosedYN",
title: "Status",
width: 100,
//template: "<input type='checkbox' name='bitClosedYN' checked='checked' disabled='disabled' />",
template: "#= (bitClosedYN == true ) ? 'Yes' : 'No' #",
attributes: { class: "ob-fld-boolean" },
}

]
});

Grid

Upload

answered on 21 Feb 2024

1 answer

178 views

Unable to select tab strip tab programmatically

Hi,

I am unable to programmatically select a tab in tab strip.

error received

HTML markup

Below is my js code

TabStrip

answered on 21 Feb 2024

1 answer

210 views

Kendo UI - can I drag across the range slider by dragging the tooltip?

I'm using the range slider from Kendo UI for jQuery. It provides a drag handle and a tooltip that is not draggable. Is it possible to make it so that I can click and drag the tooltip to move the drag handle across the slider? The file for this is fairly dense and I am not the original author so I'm not sure what to provide for reference. I'm just wondering if it's possible even thought it's not covered in the Kendo docs as far as I can tell.

General Discussions

updated answer on 20 Feb 2024

1 answer

85 views

Insert Image tool does not insert image at current position.

Hii,

I am using Kendo version Kendo UI v2020.2.617 in our project, and while using insertImage tool from the editor I am facing some issues.

Following are the issues I faced -

1. When I select the insertImage tool and try adding an image at a certain position, it jumps to the top of the editor (Once in multiple try it sticks at a certain position).

2. insertImage tool does not render images from all URLs. I entered multiple URLs but only on some URLs I got an image rendered.

I have attached the screenshot above regarding the issue where once the image is rendered at the last position else it is rendered at the top.

Will you please help me out with possible ways to fix this?

Thank you,

Sameep Sawant

ImageEditor

answered on 20 Feb 2024

1 answer

143 views

pdf export, wrap header

the font was increased the way

/*kendo-pdf-document .k-grid th {
    font-size: 25px;
    word-wrap: break-word;            
}*/

but if the header does not fit, it is cut, word-wrap does not work, how to make header wrap?

Grid

answered on 19 Feb 2024