Questions on Kendo UI for jQuery Forum

1 answer

116 views

kendo jquery grid unbind not working comman add row

greetings,

I am currently migrating from kendo version 2015.2.902 to 2023.1.314 for some of the company's core applications and I have the following problem.

When adding the create command to any grid, adding a new row is not working, if I disable the following code in the ondatabound event

function onGridDataBound() {
    /*$('.k-grid-add').unbind("click");*/

    $('.k-grid-add').bind("click", function () {
        if (esModuloAtributos() && configuradorUtils.mode === "edit") {
            setKendoDropDownInitSelection("xxxx");
            setKendoDropDownInitSelection("xxxxx");
        } else if (esModuloAgrupaciones() && configuradorUtils.mode === "edit") {
            setKendoDropDownInitSelection("xxxx");
            setKendoDropDownInitSelection("xxxxxx");
        }
        $("#Todos").prop("checked", false);
        return validaFiltros();
    }); 
}

The grid works to create and add the new row, but it does not maintain the functionality that if x condition is met it should add the row.

Grid

answered on 27 Feb 2024

1 answer

116 views

Error to export data to excel file from grid/ jquery

Hi there,

Currently I try to export data from a grid with details, however when I trigger the event export the UI generate the next error.

Code: In this object we have the data.

The code run until at the end and after this is the message.

I am using the documentation and examples, but dont works too.

https://docs.telerik.com/kendo-ui/knowledge-base/detail-grid-export

Another thing I reviewed that work with angular.

Thank you for your help !

Grid

answered on 27 Feb 2024

1 answer

575 views

Getting a Maximum call stack size exceeded error when trying to read more than 1000 records in Org Chart

Hi there, can you please tell me if this is a bug? or if I'm doing something wrong.

I get this error when I try to read 2000 records in from API, it says "Maximum call stack size exceeded". The response is retrieved but when the results are not showing in the Org Chart. They do show when I read 1000 records.

OrgChart

answered on 27 Feb 2024

0 answers

152 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

75 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

76 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

251 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

224 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

86 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