Questions on Kendo UI for jQuery Forum

1 answer

876 views

How to customize the color of notification?

I can now do it in the 'show' event, but since showing of notification is animated, so the color is changed after some delay, and I don't want to give up using animation. Is there a better way I can customize the notification color? Thank you.

Notification

answered on 09 Jun 2022

1 answer

144 views

In ViewModel binds value with another

I'm using Kendo JQuery with MVVM.

I would like to automatically change the value of the a variable ("label") when another variable changes ("optionId").

This is my VieModel:

  var vm = kendo.observable({
    optionId: '',
    label: ( this.optionId == 'Spaghetti' ? "Pasta selected" : "Animal selected" ),

    setOption: function( event ) {

      var value = event.currentTarget.value;

      this.set("optionId", value );
      //this.set("label", this.optionId == 'Spaghetti' ? "Pasta selected" : "Animal" );

    }
  });

If I remove the commented line, it works. But that's not what I want because I would have to add that line in every method.

I thought I could write:

label: ( this.get("optionId") == etc... )

but I can't. I believe this would work.

Here is an example on Kendo Dojo. Here:

https://dojo.telerik.com/agewIWAk

Any idea?
Many thanks.

MVVM

answered on 08 Jun 2022

0 answers

103 views

Grid Transport call for CREATE is not sending model on Ajax Call

I have an OData 4 API in Dot Net to which I am making calls on a grid to read(GET), update(PUT), create(POST) and destroy (DELETE).

For some reason, the resulting AJAX call from the create does not include the model, and it is always null at the API handler, causing ModelState.IsValid to be false.

read, and update are both working fine, and API create(POST) call from Postman with correct JSON in the body of the request accomplishes the add.

Can't seem to figure out how I am misconfiguring the grid create transport. Have include screen shots of relevant code, can include complete file of UI and API on request.

I also have 2 short videos illustrating the create error and successful update, but since I cannot upload mp4 files, I have not included. they are available on request.

Any help would be greatly appreciated. Thanks!

Data Source

DropDownList

Grid

asked on 07 Jun 2022

1 answer

86 views

PDFViewer with Accept-Language header on file request

I'm using the following code to implement kendo pdf viewer on my project:

pdfViewer = $("#pdfViewer").kendoPDFViewer({
    pdfjsProcessing: {
        file: {
            url: url,
            httpHeaders: {
                authorization: token
            }
    }
...
}).getKendoPDFViewer();

Is there a way to include the Accept-Language header on the http request?

Globalization

PDFViewer

updated answer on 07 Jun 2022

0 answers

99 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

343 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

218 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

465 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

145 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();

    });