Questions on Kendo UI for jQuery Forum

0 answers

131 views

Template source not passing correct model to a partial

Hi!

I'm trying to render a a template that has a form in it, the form is attached to aa ActionViewModel and the source of this template is a list of this ActionViewModel from my MainViewModel. I want to add a list of nested forms as I click in "Include action" button

Here is my MainViewModel:

public class MainViewModel {
    (...)
    public List<ActionViewModel> ActionSet {get; set;} = new List<ActionViewModel>();
    (...)
}

Here is my main cshtml:

@model MainViewModel
(...)
<div class="row">
	<div class="col-md-4 form-group">
		<button class="k-button" title="Include action" data-bind="click: includeAction">
			<i class="icon-add-2"></i> Include action
		</button>
	</div>
</div>
<div data-template="template-action" data-bind="source: @(model).ActionSet"></div>
(...)

<script id="template-action" type="text/x-kendo-template">
	<div data-role="sgewexpandable" data-bind="value: this" style="margin-bottom: 10px;">
		<div data-role="sgewexpandableheader" class="text-center">
			<label data-bind="text: ActionType.Description"></label>
		</div>
		<div id="action#=uid#"
			 class="form-group">
			@Html.Partial("_IncludeAction.cshtml").ToDecoded()
		</div>
	</div>
</script>

The problem is:

My _IncludeAction.cshtml is using ActionViewModel as model, but when I try to load this page, I get an error saying it was passed MainViewModel to the partial, instead of ActionViewModel, can anybody help me?

Templates

asked on 07 Jun 2022

1 answer

411 views

Is it possible to export a Kendo UI jQuery OrgChart

Hi there,

we want to build a dynamic, clickable OrgChart of our organisation to filter the employees by organizational unit depending on the center clicked.
I think this might work with the OrgChart component, but is it possible to export the OrgChart to pdf or jpeg?

kind regards

Simon

OrgChart

TreeList

answered on 07 Jun 2022

1 answer

311 views

Prevent resize on one tile

Given the tile layout in this Dojo: https://dojo.telerik.com/AGanihOY/2

How do I prevent resizing tile 1 but allow resizing on tile 2?

TileLayout

answered on 07 Jun 2022

2 answers

544 views

Get row index and custom template char

Hi all

Two questions:

#1
To determine if the row number of my row in datasource I had to do this:

    <script>
        var index = 0;
    </script>

    <script type="text/x-kendo-template" id="item-tmpl">
        #: index+1 #
        <div>
            CurrentRow: #: index #<br>
        </div>
    </script>

Is there a more elegant way?

#2
Can I replace the sharp ( "#" ) character in the templates with a custom one?

Many thanks

Data Source

answered on 04 Jun 2022

0 answers

211 views

Delete tile article does not work. How do you properly delete a tile?

I tried following the article here to delete a tile: https://docs.telerik.com/kendo-ui/controls/layout/tilelayout/add-remove

Unfortunately when I do this, the contents of the tiles is deleted. This would be ok if the contents was something hard coded but it is dynamic and changes as the user interacts with the page. I tried writing my own script to delete this which almost works, however when I hover over a tile I get a console error saying:

Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at init._createResizeHandle (kendo.all.js:177288:26)
    at HTMLDivElement.<anonymous> (kendo.all.js:177517:72)
    at HTMLDivElement.dispatch (jquery.min.js?v=82hEkGrSMJh3quMSG4f7FbngmAPLTDM63H4eNayS4Us:2:43090)
    at v.handle (jquery.min.js?v=82hEkGrSMJh3quMSG4f7FbngmAPLTDM63H4eNayS4Us:2:41074)
_createResizeHandle @ kendo.all.js:177288
(anonymous) @ kendo.all.js:177517
dispatch @ jquery.min.js?v=82hEkGrSMJh3quMSG4f7FbngmAPLTDM63H4eNayS4Us:2
v.handle @ jquery.min.js?v=82hEkGrSMJh3quMSG4f7FbngmAPLTDM63H4eNayS4Us:2
Show 2 more frames
kendo.all.js:177288 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at init._createResizeHandle (kendo.all.js:177288:26)
    at HTMLDivElement.<anonymous> (kendo.all.js:177517:34)
    at HTMLDivElement.dispatch (jquery.min.js?v=82hEkGrSMJh3quMSG4f7FbngmAPLTDM63H4eNayS4Us:2:43090)
    at v.handle (jquery.min.js?v=82hEkGrSMJh3quMSG4f7FbngmAPLTDM63H4eNayS4Us:2:41074)

Here is my code:

//Note: findObjectIndexByProperty is a custom function that I wrote which is not included in this snippet. It returns the index 
//of the object in an array of objects.    
$("#myTileLayout").on("click", ".js-remove-tile-button", function (e) {
        var domElement = $(e.currentTarget).closest(".k-tilelayout-item");
        var itemId = $(domElement).attr("id");
        let layout = $("#myTileLayout").data("kendoTileLayout");
        let itemsIndex = findObjectIndexByProperty(layout.items, "id", itemId);
        let containersIndex = findObjectIndexByProperty(layout.options.containers, "id", itemId);

        layout.items.splice(itemsIndex, 1);
        delete layout.itemsMap[itemId];
        layout.options.containers.splice(containersIndex, 1);
        $(domElement).remove();

    });

TileLayout

updated question on 03 Jun 2022

1 answer

162 views

[Solved] [ kendo scheduler ]change field validation message

Hi,

Like Demo https://demos.telerik.com/kendo-ui/scheduler/timeline,

I want to change field start validation message when field input value is empty,

Like this:

start: { type: "date", from: "start", required: {message: "my validation message"} }

It's not work....

Thank you very much for your help.

Scheduler

Validation

answered on 03 Jun 2022

1 answer

452 views

Expand Expansion Panel using jquery

I am using Kendo for ASP.NET Core. I have a bunch of expansion panels implemented on my screen. I want to be able to expand or collapse them using jquery. I am able to reference them using ("selector").data("kendoExpansionPanel") but I don't know which method would help me be able to expand or collapse them. Any help would be appreciated.

ExpansionPanel

answered on 03 Jun 2022

1 answer

273 views

Spreadsheet Validation at the Column Level?

I'm looking at the spreadsheet validation here: https://demos.telerik.com/kendo-ui/spreadsheet/validation
It should that validation rules are set at each individual cell. We are looking to build this grid dynamically (populating from a database) and that would require iterating through each cell to set validation. Is there a way to set validation at the column level?

Spreadsheet

Validation

answered on 03 Jun 2022

0 answers

133 views

Show/Hide first row depending on selected row in Grid

Hi,

I am using Kendo UI for jQuery in my ASP .Net 6 application. would like to check if it is possible to hide the red box area in the attached image, and the area to be shown only when user select a row in grid

Grid

asked on 02 Jun 2022

1 answer

159 views

[Solved] with custom button select cell value

Hello,

What should I write to get the value inside the cell? I run in angular, I want to assign the cell value I selected to the variable.

  @ViewChild('spreadsheet') spreadsheetEl!: ElementRef;

  constructor(private hostEl: ElementRef) {}

  ngAfterViewInit() {
    kendo.jQuery(this.spreadsheetEl.nativeElement).kendoSpreadsheet({
           columns: 3,
           //rows: 10,
           sheetsbar: false,
           toolbar: {
            home: [
              "open", "exportAs",

              {
                  type: "button",
                  text: "Material select",
                  showText: "both",
                  icon: "k-icon k-i-cog",
                  click: function(e: any) {



                    var sheet = this.spreadsheetEl.nativeElement.activeSheet();
                    var range = sheet.selection();
                  }
              }
          ],
            insert: false,
            data: false,
            },
...

thank you

regards

Button

Spreadsheet

answered on 01 Jun 2022