Questions on Kendo UI for jQuery Forum

1 answer

592 views

[Solved] Custom sorting of column with link

my kendo grid is rendering using the html table way. one of the column is hyper. would like to know how do i sort this?

would like to add on to my post that for the date column it seems to not be sorting correctly. the sorting is treating it as string, how do i convert it to datetime and also handle the case whereby the date column is empty to show the string Never.

below is my markup

<table class="table" id="kendo-table" aria-describedby="Listing for Users">
   <thead>
      <tr>
         <th scope="col" data-field="fullname">
            Full Name
         </th>
         <th scope="col" data-field="status">
            Status
         </th>
         <th scope="col" data-field="email">
            Email
         </th>
	 <th scope="col" data-field="lastLogin">
            Last Login Date
         </th>
         <th scope="col" data-sortable="false" >
            Action
         </th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            <a class="no-left-padding" href="/Admin/UserAccount/ViewDetail/681513f5-5ae0-4d3f-8604-b9703f1a8041">
            User 1
	    </a>
         </td>
         <td>
            <div class="user-status">
               <span>
               Invited
               </span>
            </div>
         </td>
         <td>
            user@email.cim                       
         </td>
	<td>23 Nov 2000, 2:17AM</td>
         <td>
            <a onclick="return confirm('Are you sure you want to proceed?')" href="/Admin/UserAccount/Listing?_UserId=681513f5-5ae0-4d3f-8604-b9703f1a8041&handler=Delete">
            <em class="material-symbols-sharp material-delete"></em>
            </a>
         </td>
      </tr>
      <tr>
         <td>
            <a class="no-left-padding" href="/Admin/UserAccount/ViewDetail/681513f5-5ae0-4d3f-8604-b9703f1a8041">
            User 2                               </a>
         </td>
         <td>
            <div class="user-status">
               <span>
               Invited
               </span>
            </div>
         </td>
         <td>
            test@email.com                            
         </td>
	<td>23 Feb 2022, 3:17PM</td>
         <td>
            <a onclick="return confirm('Are you sure you want to proceed?')" href="/Admin/UserAccount/Listing?_UserId=681513f5-5ae0-4d3f-8604-2a5b7f1a8041&handler=Delete">
            <em class="material-symbols-sharp material-delete"></em>
            </a>
         </td>
      </tr>
      <tr>
         <td>
            <a class="no-left-padding" href="/Admin/UserAccount/ViewDetail/681513f5-5ae0-4d3f-8604-b9703f1a8041">
            User 3                               </a>
         </td>
         <td>
            <div class="user-status">
               <span>
               Invited
               </span>
            </div>
         </td>
         <td>
            test@email.com                            
         </td>
	<td>Never</td>
         <td>
            <a onclick="return confirm('Are you sure you want to proceed?')" href="/Admin/UserAccount/Listing?_UserId=681513f5-5ae0-3a12-8604-2a5b7f1a8041&handler=Delete">
            <em class="material-symbols-sharp material-delete"></em>
            </a>
         </td>
      </tr>
   </tbody>
</table>

Grid

answered on 14 Jun 2022

1 answer

180 views

show all day events side by side instead below each other in kendo JQuery scheduler

I want to display all-day events side-by-side instead of one below the other just like events shown in the example in 8 am o'clock. Here I have created an example and in the all-day row I want to position two events next to each other.

the second question is, how can I adjust the margin between the text in all day events and the box, that shows the event?

https://dojo.telerik.com/uXuHuvak

Scheduler

answered on 14 Jun 2022

0 answers

316 views

Posting form data using javascript with Kendo Upload stop working recently

Hi

I have upload code similar to the below and was working till recently.

Error preventing the form from being posted. but no error detail from JavaScript.

This only happen using Chrome, file Firefox no issue.

No problem when posting without the rawfile.

Can anyone help?Thanks in advance.

<script>

$("#submitForm").on("click", function(e) {

e.preventDefault();

// Append the desired file

var formData = new FormData();

var upload = $("#files").getKendoUpload();

var files = upload.getFiles();

formData.append('files', files[0].rawFile);

// Send the request

$.ajax({

url: 'index.php?type=save',

type: 'POST',

data: formData,

cache: false,

contentType: false,

processData: false,

success: function (response) {

console.log(response);

}

});

</script>

Upload

asked on 14 Jun 2022

1 answer

162 views

Horizontal line on top of all tabs in TabStrip

Hi,

I updated to latest version of Kendo jQery R2 2022. After the update I get an horizontal line on top of the tabstrips tabs if I add this line of code,

var tabStrip1 = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");

You can test to add it to your demo tabstrip code, you will get the same result.

TabStrip

answered on 13 Jun 2022

1 answer

922 views

This page uses the non-standard "zoom" property. Instead, you can use calc (), or "transform" together with "transform-origin: 0 0"

My application includes the file: kendo.common.min.css.

In firefox I receive the following warning:

This page uses the non-standard "zoom" property. Instead, you can use calc (), or "transform" together with "transform-origin: 0 0"

Can this be solved?

Styling

answered on 10 Jun 2022

3 answers

837 views

stop is not a function ?

Hey

I'm trying to do the most simple example in my solution, but I can't seem to get it working.

I'm using this example: http://demos.telerik.com/kendo-ui/autocomplete/angular

but getting e.removeData(....).stop is not a function.

any ideas?

AutoComplete

answered on 09 Jun 2022

0 answers

309 views

k-overlay html elemets isn't added to html layout after popup opened

After upgrading kendo MVC version to Version=2021.3.1207.545, k-overlay class stopped appearing after kendo window open

Window

asked on 09 Jun 2022

1 answer

989 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

172 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

147 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