I need to add charts to a project that doesn't have any. To learn about the Kendo chart control I added sample code to an existing view in the project.  My guess is that the problem has to do with the CSS and JavaScript files that the project uses. Projects that I've downloaded that have chart code that works use Bootstrap 3 and Bootstrap 4 while our project uses Bootstrap 5.

This is the code:

Prior to the most recent version we could use reflection to get the grid name in this method.

We have changed it to pass the grid name, but was wondering if there is a programmatic way of getting the grid name without passing it

I am trying to customize the default presentation of the image of the standard image displayed in the various nodes.  I can see that it is defaulting to "full rounded" whereas I would like to use medium rounding.

Can someone point me to how I can accomplish this?  I have tried several things but everything tried, so far, is promptly ignored and the default rounded image is displayed.

I like the basic layout except for the rounded images.

Hopefully this makes sense to you folks.  Great product, sorry for the nitpicks.

Hello, 

We are using older version of Telerik Ui for Asp.net core (2020.2.617), where we are using kenod.window() component. Within this when we inspect close , min and max button they are rendered as <a> tag with role=button and href=#.

When i see the latest version in documentation they are rendered as <button> instead of <a>.

Is that a change recently made? Also , we are asked to change it to button due to accessibility implementation. We understand that we can upgrade our project to latest version , but is there any other way to do so with minimal of code change?

Hi Team,

I am using the Kendo TreeList with inline edit mode.

I have implemented the remove event to display a confirmation popup when the delete button is clicked. The confirmation box appears correctly, but after clicking "Confirm," the record is not being deleted.

Is there an alternative solution to achieve this functionality?

Thank you.

//// I have provided code for reference

@(Html.Kendo().TreeList<RVNLMIS.Models.DMS.FolderSettingModel>()
.Name("FolderTreeList")
.Toolbar(toolbar => toolbar.Create())
.Columns(columns =>
{
    columns.Add().Field(e => e.FolderName).HtmlAttributes(new { style = "text-align:left" })
    .HeaderAttributes(new { style = "text-align:left" }).Title("Folder Name").Width(400);

    columns.Add().Field(e => e.Level).HeaderAttributes(new { style = "text-align:left"})
    .HtmlAttributes(new { style = "text-align:right"}).Title("Level").Width(30);

    columns.Add().Title("Action").Width(300).Command(c =>
    {
        c.CreateChild().Text("Add child");
        c.Edit();
        c.Destroy();
        //c.Custom().Text("<i class='btn btn-xs btn-danger fa fa-trash'></i>")
        //.Click("showDeleteConfirmation");
    });
})
.Editable(e=>e.Mode("inline"))
.DataSource(dataSource => dataSource
    .Create(create => create.Action("Create", "DMSFolderSetting"))
    .Read(read => read.Action("FolderSettingDetails", "DMSFolderSetting"))
    .Update(update => update.Action("Update", "DMSFolderSetting"))
    .Destroy(delete => delete.Action("Destroy", "DMSFolderSetting"))
    .Model(m => {
        m.Id(f => f.FolderId);
        m.ParentId(f => f.ParentFolderId);
        m.Expanded(true);
        m.Field(f => f.FolderName);
        m.Field(f => f.Level);
    })
    .ServerOperation(false)
)
.Events(e=>e.Save("OnSaveRecord"))
.Events(e=>e.Remove("onDeleteConfirm"))
.Height(700)
)

//// Java script code

function showDeleteConfirmation(e) {
    e.preventDefault(); // Stop the default delete behavior

    var treeList = $("#FolderTreeList").data("kendoTreeList");
    rowToDelete = $(e.row).closest("tr");
    var dataItem = treeList.dataItem(rowToDelete);

    //console.log(e);
    //console.log(dataItem);

    // Store the row and update modal info
    $("#deleteModal").data("row", rowToDelete); // store row
    $("#folderName").text(dataItem.FolderName);

    $("#deleteModal").modal("show");
}

function confirmDelete() {
    var treeList = $("#FolderTreeList").data("kendoTreeList");
    var row = $("#deleteModal").data("row");

    if (treeList && row) {
        treeList.removeRow(row);
    }

    $("#deleteModal").modal("hide");
}

/// Confirmation Modal

I have a grid with custom editors and they are bound to the grid as such.

columns.Bound(x => x.Parent).EditorTemplateName("ParentEditor").ClientTemplate("#= Parent === undefined || Parent === null ? '' : parentTemplate(Parent)#");
columns.Bound(x => x.Child).EditorTemplateName("ChildEditor").ClientTemplate("#= Child === undefined || Child === null ? '' : childTemplate(Child)#");

The two editor templates look like this:

@model List<ParentViewModel>  
@(Html.Kendo()  
     .MultiSelectFor(m => m)  
     .DataTextField("Name")  
     .DataValueField("Id")  
     .Placeholder("Select one or more parents")  
     .AutoBind(true)  
     .TagMode(MultiSelectTagMode.Multiple)   
     .DataSource(source =>  
     {  
         source  
         .Read(read =>  
         {  
             read.Action("GetParent", "Lookup");  
         });  
     })  
     .Events(events => events.Change("onParentChange"))  
)  


@model List<ChildViewModel>
@(Html.Kendo()
      .MultiSelectFor(m => m)
      .DataTextField("Name")
      .DataValueField("Id")
      .Placeholder("Select one or more children")
      .AutoBind(true)
      .TagMode(MultiSelectTagMode.Multiple)
      .DataSource(source =>
      {
          source
          .Read(read =>
          {
              read.Action("GetChild", "Lookup").Data("getCurrentParents");
          })
          ;
      })
)

The UI is properly populating when the grid loads and looks like this:

Coumn Parent|Column Child
A           |A1
B           |B1, B2

When the user edits the row and removes item B from Column Parent, this code is invoked (which I got from Kendo UI Snippet | Kendo UI Dojo)

function onParentChange(e) {
    var selectedonParentChange = this.value();
    let dataItems = e.sender.dataItems();

	var multiSelect = $("#Child").data("kendoMultiSelect");
	var value = multiSelect.value();
	multiSelect.dataSource.filter(getFilterObj(dataItems));
	multiSelect.dataSource.filter({});  // Adding or removing has no effect
    multiSelect.refresh();
	multiSelect.value(value);
	console.log("Second value: " + multiSelect.value());
    var dataSource = multiSelect.dataSource;
    dataSource.read();
}

function getFilterObj(dataItems){
  let filtObj = {
    logic: "or",
    filters: [],
  };

  if(dataItems.length > 0){
    for (var i = 0; i < dataItems.length; i++) {
      filtObj.filters.push({
        field: "ParentId",
        operator: "eq",
        value: dataItems[i].Id
      });
    }
  } else {
    filtObj.filters.push({
        field: "ParentId",
        operator: "eq",
        value: ""
      });
  }

  return filtObj;
}

After the code runs, the UI looks like this:
Coumn Parent|Column Child
A           |A1

So far so good.  The problem is that when the user hits save this ends up on the Network in the form data:

Parent[0].Id: ParentIdA
Parent[0].Name: A
Child[0].Id: ChildId1
Child[0].Name: A1
Child[0].ParentId: ParentIdA
Child[1].Id: ChildId2
Child[1].Name: B1
Child[1].ParentId: ParentIdB
Child[2].Id: ChildId3
Child[2].Name: B2
Child[2].ParentId: ParentIdB