Questions on Kendo UI for jQuery Forum

1 answer

11 views

Treeview has scrollbars and gray line when text is too long

I have a DropDownTree on my site. When the text of the item is too long to fit I am seeing a horizontal scrollbar and the gray colored background does not expand. I don't want auto width as that makes the container grow larger than the input control is. How can I instead have it wrap?

DropDownTree

answered on 27 Mar 2024

1 answer

28 views

How to auto expand selected item in dropdowntree

I have a kendo dropdown tree with a selected value that was there on initialization. When the user clicks on the dropdown for the first time, I want the list to auto expand the selected node so the user can see it the child item. How do I do this?

Similarly, I would like the user to be able to click on a parent node and, instead of selecting the parent node, since that isn't allowed in my case, it should just expand so they can see the children.

DropDownTree

answered on 27 Mar 2024

1 answer

13 views

Get row data in custom command

Hi support team.

how to get the row data? the following is currently not working..

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "id" },
      { field: "name" },
      { command: [
        {
          // for click to work when there is template, add class "k-grid-[command.name]" to some element, otherwise the click handler will not be triggered
          name: "settings",
          template: "#= data.id # text in the command column <a class='k-button k-grid-settings'><span class='k-icon k-i-settings'></span>Settings</a>",
          click(e){
            kendo.alert("how to")
          }
        }
      ]
      }
    ],
    dataSource: [{ id: 1, name: "Jane Doe", bib: 1 }, { id: 2, name: "Jane Doe 2", bib: 1 }]
  });
</script>
</body>
</html>

Grid

answered on 27 Mar 2024

1 answer

10 views

window not loading content using setOptions

Hi support team,

when setting the content using the setOptions method we only see a white window. Why is not loading?

 var window = $('#kendo-window')
            
         	if(!window.data("kendoWindow")) {
            window.kendoWindow({})
          }
          
         window.data("kendoWindow").setOptions({
                 title: title,
           			 content: "../content/web/window/ajax/ajaxContent1.html",
           			 modal: true,
                 actions: ["maximize","close"],
                 position: {
                     top: "10",
                     left: "10"
                 },
                 width: width,
                 minHeight: 900,
               	 scrollable: true,
                 animation: {
                     open: {
                         effects: "fade:in",
                         duration: 500
                     },
                     close: {
                         effects: "fade:out",
                         duration: 500
                     }
                 }
             })
         
         window.data("kendoWindow").center().open()

Window

updated answer on 26 Mar 2024

1 answer

15 views

How to reset the scroll position in a Kendo Drodown on some action.

My requirement is similar to this question "How to reset the scroll position in a Kendo Dialog (jquery) in Kendo UI for jQuery | Telerik Forums"Reset Scroll Position in Kendo Dialog jQuery

My only requirement is to reset the scroll position of the dropdown whenever a button is clicked. Currently, when I reopen the dropdown, it remembers the last scroll position. I want this position to be reset whenever the user performs an action, such as clicking a button.

DropDownTree

answered on 26 Mar 2024

1 answer

19 views

why the HYBRID UI demo is yet 2022?

Does it stop upgrading?

ActionSheet

answered on 19 Mar 2024

1 answer

30 views

How can I save and load values in timepicker if the value provided is in HH:mm:ss format instead of normal date format?

I am trying to fix an issue on an old react application with jquery dependencies and I am not familiar with the approach used here. We are using the following dependencies(some important ones mentioned). Node version is 14.x

"dependencies": {
"@progress/kendo-ui": "^2021.3.1207",
"@types/node": "^12.20.15",
"@types/react": "^17.0.11",
"moment": "^2.29.4",
"react": "^17.0.2",
.
.
.
}

  "devDependencies": {
    "@types/jquery": "^3.5.5",
.
.
.
  }

Right now we are using the below timepicker and this passes in a datetime value on save, in this format 2024-03-14T09:00:00.000Z. But I want to change this to pass in value as a time in this format HH:mm:ss .

      <input
        id={this.id}
        name={this.props.validationName}
        data-role="timepicker"
        data-bind={`value: ${ValueCodes.Start}`}
        data-format="h:mm tt"
        required={true}
        disabled={true}
      />

I understand that the ValueCodes.Start mentioned above is linked with the type of the input filed. I did find the following set of codes that determine the type of that field in the corresponding datasource builder file.

export class ValueCodes {
  public static readonly Start = 'sTRT_TIME';
.
.
.
}

protected getDataSourceOptions() {
    const fields: { [key: string]: { type: string } } = {};
    switch (this.categoryCode) {
      case 'INIT':
        fields[ValueCodes.Start] = { type: 'date' };
.
.
.
        break;
.
.
.
      default:
        break;
    }
    return {
      fields: fields,
      transportOptions: { baseUrl: `${X.getApiUrl()}value/${this.categoryCode}` }
    };
  }
}

On changing the 'type' from 'date' to 'time' here, fields[ValueCodes.Start] = { type: 'date' }; I encountered some errors. I was only able to save the value in my desired format, if I disable validation. Aprart from that the timepicker now will not load the datetime or time value fetched from the backend because of the 'type' change from 'date' to 'time'.

Is there a specific way in kendo that I can try to overcome this?

Data Source

Date/Time Pickers

answered on 19 Mar 2024

1 answer

22 views

Kendo grid editable display server side validation error

Hello Kendo Experts,

I'm currently working on integrating a Kendo JQuery Grid with an ASP.NET Core server-side setup that utilizes Fluent Validation for data validation. When submitting data via the grid, the server responds with a structured error message in case of validation failures, following this format:

{
    "type": "https://tools.ietf.org/html/rfc7231#section-6.5.1",
    "title": "One or more validation errors occurred.",
    "status": 400,
    "traceId": "|30c76381-41abcc1635c93e3c.",
    "errors": {
        "ProductId": [
            "'ProductId' must not be empty."
        ],
        "Quantity": [
            "'Quantity' must not be empty.",
            "'Quantity' must be greater than '0'."
        ]
    }
}

My goal is to handle these validation errors and present them to the user in a user-friendly manner within the Kendo Grid interface. This involves processing the error messages received from the server and displaying them near the corresponding input fields for easy identification and correction by the user.

Could you kindly provide guidance or suggestions on how to achieve this? Any insights or examples on how to format and display these error messages effectively within the Kendo Grid would be greatly appreciated.

Thank you for your assistance.

Grid

Validation

answered on 14 Mar 2024

1 answer

27 views

Trying to create a multi filter column using the ItemTemplate and from the Enum Data, But ItemTemplate function is not being called

I am trying to create a multifilter from enum data type column using the ItemTemplate. But ItemTemplate Javascript function is not being called and data is not being shown in combobox. Please can you give me a help. Here is the code

Enum Records

public enum EmpTypes
{
    [Display(Name = "Service")]
    Service = 0,
    [Display(Name = "Sales")]
    Sales = 1,
    [Display(Name = "Purchase")]
    Purchase = 2,
    [Display(Name = "Office")]
    Office = 3
}

Kendo Grid

columns.Bound(c => c.EmpTypes).Title("Type")
        .Filterable(filterable => filterable
            .Multi(true)
            .UI(“”).DataSource(s=>s.Read(r=>r.Action(“GetEmpTypes”,”Report”)))
            .ItemTemplate(“typetemplate”));
<script>
 function typetemplate(e)
{
  alert('Test');
}

</script>

Action Method in MVC controller

Public ActionResult GetEmpTypes()
{
 List<EmpType> emptypes = new List<EmpType>();
emptypes.Add(EmpType.Sales)
emptypes.Add(EmpType.Report)
return Json(emptypes,JsonRequestBehavior.AllowGet);
}