Questions on Kendo UI for jQuery Forum

0 answers

103 views

Kendo Datepicker value is not persisting when i click on kendo grid Filter

Hi,

My kendo datepicker is not persisting the date value when I am clicking on the kendo grid column filter and request is hitting the api. I have attached the screenshots. Following is my code.

$element.before($operators).kendoDatePicker({
   format: "MM/dd/yyyy",
   value: kendo.toString(new Date()),
});

Grid

asked on 14 Jun 2022

1 answer

560 views

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

161 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

297 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

136 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

902 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

818 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

284 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

955 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

159 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