Questions on Kendo UI for jQuery Forum

1 answer

71 views

TreeList - Does not respect 'iconType' setting

Hi Guys

Have just tripped over an issue while testing the latest 2023.1.314 release whereby the TreeList expand/collapse graphics are now rendered using SVGs rather than Font Icons and completely ignore the

        kendo.setDefaults('iconType', 'font');

setting.

This undocumented breaking change means we can no longer easily replace the graphics used for expand/collapse via CSS like the following

        .k-i-expand:before {
             content: "\e11e";           // .k-i-plus
        }
        .k-i-collapse:before {
             content: "\e121";           // .k-i-minus
        }

which we use extensively across our site to give a consistent look and feel with other non Kendo UI components.

Therefore I would be most grateful if you could investigate and advise on the following:

a) Are Font Icons now deprecated and we can expect further places where their will be swapped out in favour of SVGs without warning?

b) Is this a regression/bug and the expand/collapse graphics should adhere to the 'icontype' setting and will be fixed in the next release?

Regards
Alan

TreeList

answered on 31 Mar 2023

1 answer

73 views

kendo UI TreeList getting API 200/500 response code

Hi,

There are question as below, I could not provide a code snippet because for editing require an API which are not available as development is in progress

can I know is there a way to get the response code / response message after the API is call. For example code below, after the create API call I would like to get the response code example 200 or 500 so that we can manipulate error message that require to show for user. Example if kendo taskboard it have "requestEnd" event

transport: {
	read: {
		url: crudServiceBaseUrl ,
		dataType: "json"
	},
	create: {
		url: crudServiceBaseUrl + "/add",
		dataType: "json"
	},
	update: {
		url: crudServiceBaseUrl + "/update",
		dataType: "json"
	},
	destroy: {
		url: crudServiceBaseUrl + "/delete",
		dataType: "json"
	},
	parameterMap: function (options, operation) {
		if (operation !== "read" && options.models) {
			return { models: kendo.stringify(options.models) };
		}
	}
},

when I perform transport "destroy", I realize that it will first remove the node before calling API. I wonder what happen if I fail to remove from our own logic (hit issues when remove from database) then how can we revert the node?
Is it in treelist we can get parent value and assign to a hidden field? Treelist only support number for id and parentid (hierarchy), howeer in our case we use GUID. Therefore, I generate number just for hierarchy display (and drag and drop) purpose. However the models only recognize the parentid but not guid that is from other field.
on my page I reliaze that sometimes the jquery are calling the API and sometimes not? Is it related to the placement file of my kendo script versus jquery file?
When I add new item, from backend we success to trigger and I return response 200 and model data as per below

{"Project":"e81af126-13cd-40c4-951b-9611fa85f39c","ID":"fc980fda-40c5-4fda-b97d-dfc0aced6a10","Description":"123123","WBSType":1,"SequenceNumber":0,"Parent":null,"BudgetSalesAmountDC":0.0,"BudgetCostsAmountDC":0.0,"Quantity":10.0,"WBSIcon":"","ReportsTo":null,"WBSRunningNumber":0,"hasChildren":false}

however from front-end it will never append. I follow exact implementation from the snippet / tutorial, accept the response type

Drag and Drop

TreeList

answered on 23 Feb 2023

0 answers

111 views

kendo TreeList event drop element is missing or not in correct order

Hi,

I was developing using kendo UI TreeList, however I found an issue when I drop a row from 1 parent to another, the source was not reparenting to the correct parent. Instead if was set to wrong position (as for my case it become a parent itself).

Step to reproduce:
Open this url https://dojo.telerik.com/UCUXaloN

Drag "Sprint planning (2012-2728)" and drop it to "Kick off" as per image below
After the drop the e.position should be "over" and I expect the row will appear inside "Kick Off" node and not as a parent itself. In the drop event after the "over" I will have my own logic to perform certain task.

Help is needed as I try with different and still not able to position it correctly.

Drag and Drop

TreeList

asked on 27 Jan 2023

1 answer

406 views

Uncaught TypeError: $(...).kendoTreeList is not a function

Currently I'm develop hierarchy char by using Kendo UI Treelist feature. Below is my snipe code

in my .aspx file "

I include those scripting in header

<script type="text/javascript" src="../Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../Scripts/kendo/kendo.all.min.js"></script>

in my javascript (datasource is i load from my own data)

var wbsDataSource =

    [{
        ID: "1",
        Description: "Kick Off",
        Parent: null
    }, {
        ID: "2",
        Description: "Meeting",
        Parent: "1"
    }
]

var dataSource = new kendo.data.TreeListDataSource({
    data: wbsDataSource,
    schema: {
        model: {
            id: "ID",
            parentId: "Parent",
            fields: {
                Parent: {
                    field: "Parent",
                    nullable: true
                },
                ID: {
                    field: "ID",
                    type: "number"
                }
            },
            expanded: true
        }
    }
});

$("#treelist").kendoTreeList({
    dataSource: dataSource,
    height: 800,
    editable: {
        move: {
            reorderable: true
        }
    },
    columns: [{
            field: "Description",
            title: "Description",
            width: 280,
        }
    ]

});

however when i run the code above it throw me error "Uncaught TypeError: $(...).kendoTreeList is not a function"

it will only work when I change my html header into code below (JavaScript remain the same), especially with using the base HREF

<base href="https://demos.telerik.com/kendo-ui/treelist/dragdrop">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-ocean-blue.min.css" />
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/kendo.all.min.js"></script>

TreeList

answered on 24 Jan 2023

4 answers

721 views

row custom background color disappears on expand/collapse of treelist

Hi,

I am using the following method to modify row background colors.

Basically I want all parents to have one color while their children to have another color.

Here's what I am doing:

However, on expanding the treelist, it goes back to the original color (i.e. alternating white and greys)..What do I need to fix (or some other way) to accomplish what I am trying?

function onDataBound(e){

console.log("data bound event called");

var rows = e.sender.tbody.children();

for (var j=0; j<rows.length;j++){

var row = $(rows[j]);

var dataItem = e.sender.dataItem(row);

var stratName = dataItem.get("strategyName");

if (stratName.indexOf("parent") != -1 ) {

row.css({"background-color": "#fda"});

}

else{

row.css({"background-color": "#ced"});

}

}// end of onDataBound

Thanks a lot,

Labhesh

TreeList

answered on 08 Dec 2022

1 answer

63 views

TreeList does not show just inserted row if custom template for edit is enabled

I am using TreeList to edit hierarchical data. I have to use Custom Edit template to create/edit rows. But new row disappears after clicking on Update button in Popup window. I have to refresh page to see new rows. What am I doing wrong?

@(Html.Kendo().TreeList<Models.FlowItemModel>()
    .Name("treelist")
    .Toolbar(toolbar => toolbar.Create())
    .Columns(columns =>
    {
        columns.Add().Field(e => e.FieldType).Width(200).Title("Type");
        columns.Add().Field(e => e.FieldLabel);
        columns.Add().Field(f => f.LineNumber).Width(100).Title("#");
        columns.Add().Field(e => e.DropdownValues).Width(150).Title("DropDown");
        columns.Add().Width(350).Command(c =>
        {
            c.CreateChild().Text("Add child");
            c.Edit();
            c.Destroy();
        });
    })
    .Editable(editable => editable.Move(move => move.Reorderable(true)))
    .Editable(e => e.Mode("popup").TemplateName("CustomTreeListPopup"))
    .Filterable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Create(create => create.Action("CreateFlowItem", "Configurator").Data("getConfiguration"))
        .Read(read => read.Action("GetFlowItems", "Configurator").Data("getSelectedFlowItem"))
        .Update(update => update.Action("UpdateFlowItem", "Configurator").Data("getConfiguration"))
        .Destroy(delete => delete.Action("DeleteFlowItem", "Configurator"))
        .Model(m =>
        {
            m.Id(f => f.Id);
            m.ParentId(f => f.ParentId).Nullable(true);
            m.Field(f => f.LineNumber);
            m.Field(f => f.FieldLabel);
            m.Field(f => f.FieldType);
        })
    )
    .Events(events =>
     {
         events.DragEnd("onDragEnd");
     })
)

CustomTreeListPopup:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Kendo.Mvc
@using Kendo.Mvc.UI
@model Web.Models.FlowItemModel

<div class="k-edit-form-container">
    <h5>Flow Item</h5>
    <br />
    @Html.HiddenFor(model => model.Id, new { @id = "edit_Id", @Name = "edit_Id" })
    @Html.HiddenFor(model => model.ParentId, new { @id = "edit_ParentId", @Name = "edit_ParentId" })
    <div class="editor-label">
        @Html.LabelFor(model => model.FieldLabel)
    </div>
    <div class="k-edit-field">
        @Html.EditorFor(model => model.FieldLabel)
        @Html.ValidationMessageFor(model => model.FieldLabel)
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.FieldType)
    </div>
    <div class="k-edit-field">
        @(Html.Kendo().DropDownListFor(model => model.FieldType)
            .HtmlAttributes(new { style = "width:100%" })
            .AutoBind(false)
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetFieldTypes", "Configurator");
                });
            })
            )
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.DropdownValues)
    </div>
    <div class="k-edit-field">
        @Html.EditorFor(model => model.DropdownValues)
        @Html.ValidationMessageFor(model => model.DropdownValues)
    </div>
</div>

TreeList

answered on 23 Nov 2022

0 answers

43 views

Kendo TreeList no events during Filtering or Sorting???

i have two grids, one is a normal Kendo Grid, the Other is a TreeList grid; The regular kendoGrid, has events that fire when the user uses the Menu Filter or clicks the header when sorting. I need to capture when sort/filtering occurs; HOWEVER the TreeList grid doesnt seem to have such event??? i tried same/several renditions; the only one i see from the header Menu is when Columns are Hidden/Shown (e.g. columnShow: & columnHide:) - is there no event for columnMenuFilter (e.g. Set/Clear) and SORT (e.g. Asc/Desc)?

anyone please advise?

TreeList

updated question on 12 Sep 2022

1 answer

113 views

Kendo tree list - kendo switch

Good afternoon, excuse my English is bad,

I have a kendo treelist in which there is a boolean column with a kendo switch.
The problem is visual when interacting with my tree list the switch is painted several times as shown in the image:
 
this is the code i am using:

{
                    field: "IsModule", title: "@Mui.Is_Module",
                    //width: "70px",
                    editor: checkBoxEditor,
                    headerAttributes: { style: "text-align:center" },
                    attributes: { class: "text-center" },
                    template: "<input class='checkBoxEditor' #if (IsModule) { # checked='checked' # } # type='checkbox' disabled />"
                },

If anyone can give me an idea of what I'm doing wrong, I'd be very grateful.

 dataSource: dataSource,
            excelExport: exportExcel,
            columnMenu: true,
            editable: "inline",
            cancel: function (e) {
                var grid = this;
                var rowUid = e.container.data("uid");
                setTimeout(function () {
                    grid.element.find("tr[data-uid='" + rowUid + "'] .checkBoxEditor").kendoSwitch({
                        messages: {
                            checked: "@Mui.Yes",
                            unchecked: "@Mui.No"
                        }
                    });
                });
            },
            dataBound: function () {
                this.tbody.find(".checkBoxEditor").kendoSwitch({
                    messages: {
                        checked: "@Mui.Yes",
                        unchecked: "@Mui.No"
                    }
                });
            },

function checkBoxEditor(container, options) {
    $('<input type="checkbox" name="' + options.field + '"/>')
        .appendTo(container)
        .kendoSwitch({
            messages: {
                checked: "@Mui.Yes",
                unchecked: "@Mui.No"
            }
        });
}