Hello,

I'm using LitElement to create a reusable tab component, but when I 'm initializing the kendoTabStrip, the TabStrip property is undefined. 

In my firstUpdated function I'm setting the TabElement property:

    firstUpdated (changedProperties) {
        this.TabElement = this.shadowRoot.querySelector('#tabs-container')
    }
   

In the parent element, I'm setting the TabConfig property:

    setHtml () {
        const tabs = this.shadowRoot.querySelector('tabs')
       tabs.TabConfig = TabConfig(this)
    }

I have a setter in the tabs component that addsTabs after being set:

    set TabConfig (value) {
        const oldValue = this._TabConfig
        this._TabConfig = value
        const self = value.self
        this.addTabs(self, oldValue)
    }

I'm initializing the kendoabStrip using the previously set properties (all properties are defined):

    addTabs () {
        this.TabStrip = $(this.TabElement).kendoTabStrip(this.TabConfig).data('kendoTabStrip')

        this.TabConfig.tabs.forEach(tab => {
            if (tab.show) {
                this.TabStrip.append(tab) // This throws an error "Cannot read property append of undefined"
            }
        })
    }

I tried initializing the TabStrip property in the setter for the TabConfig, but ended up with the same result. Any idea as to why this.TabStrip is undefined?

Hi experts,

I have run into a problem where i have to update existing kendo grid implementation. Let me explain the ask as below.

Earlier we had a grid which was mapped with individual fields. For example, lets say i had a data of an employee which contains employee name, age, salary, address and department, perfect one-to-one mapping.

Now lets says employee got multiple departments. Business wants to keep same structure but change only Department column into multiple rows. Like if there are 2 departments for a particular employee i should have 2 rows in a single column against that employee. Have a look at the image attached. have a look at row 2 and column 3 and 4.

I am able to show it using template but while editing and saving it could not map to the actual field of array.

I have a listview populated with remote data through PHP. I want to add grouping but after reading the documentation can't figure out how to do it. This is the template I'm currently using. I want to group by a field called "category_name" and display show that field as the group header. I don't need any footer.

    <script type="text/x-kendo-template" id="template">
      <div class='product'>
        <img src='product_images/#:thumbnail_image#'>
        <div ID=divProductName style='color: rgb(21,159,136); font-size: 17px; font-weight: bold'>#:product_name#</div>
        <div style='font-size: 18px'>#:short_desc#</div>
      </div>
    </script>

This is the code from your grouping sample, which adds various classes such as "k-listview-item", "k-group-title" "k-card" which I am not using. It isn't clear to me if these classes are necessary when using grouping or how to incorporate it into my template. I would appreciate if you could modify my code to include this. Thanks.

<script type="text/x-kendo-template" id="template">
        <div class="k-listview-item k-content">
            <h4 class="k-group-title">#= data.value #</h4>
            <div class="cards">
                # for (var i = 0; i < data.items.length; i++) { #
                <div class="k-card" style="width: 15em; margin:2%">
                    <img class="k-card-image" src="#=destinationURL(data.items[i].ImageUrl)#" />
                    <div class="k-card-body">
                        <h4 class="k-card-title">#= data.items[i].Title #</h4>
                        <h5 class="k-card-subtitle">#= data.items[i].Description #</h5>
                    </div>
                </div>
                # } #
            </div>
            <h5 class="k-group-footer"> #=data.items.length# Destinations in #= data.value #</h5>
        </div>
    </script>

I know we do not have support for Bootstrap 5 yet. Still, I'm trying to get charts to work, but I'm getting strange behavior.

Any ideas?

Hello,

question about a calendar/scheduler capability. Something that is a regular feature of a service like calendly for instance.

We have a use-case where a user would schedule a series of meetings (eg. interviews), covering a specified period (eg. 2 weeks) and business hours for meetings (eg. 9am - 3pm). Then the user sends an invitation to say 50 people asking them to book their times (eg. 1 hour) .

Their calendar gets updated as the invitees keep booking their meetings and they always see the latest view of what is booked and what isn't.

This saves the user scheduling the meetings having to follow up with everyone and do it one by one., so basically invitees do the work.

Does Kendo UI Calendar/Scheduler support meeting invitations like this out of the box, or it would have to be a custom programmed view?

Thanks much, appreciate your help.

Dan

Hello  I am trying to get this type of bar chart. can you provide a example of how to show category name will be shown top on bar. 

I like to bind to this JSON below. De JSON should fill the dropdownlist. The first item would have a value of 0 and a text of Unknown.

{
    "0": "Unknown",
    "1": "Not executed",
    "2": "Not reported",
    "3": "Executed and Reported",
    "4": "Not to be executed",
    "select": null,
    "table": null
}

But somehow the dropdownlist only accepts JSON like:

Hi,

I need to select multiple rows in a kendo grid and  move them inside the grid to reorder them.

I'm using kendoSortable

grid.table.kendoSortable({
        filter: ">tbody >tr",
        hint: function (element) {
          //customize the hintvar table = $(
              '<table style="width: 600px;" class="k-grid k-widget"></table>'
            ),
          hint;
          table.append(grid.select().clone()); //append the dragged element
          table.css("opacity", 0.7);

          return table; //return the hint element
        },
        cursor: "move",
        placeholder: function (element) {
          return $('<tr colspan="4" class="placeholder"><td colspan ="' + grid.columns.length + '">Drop here</td></tr>');
        },
        change: function (e) {
          console.log(grid)
          var selectedId = [];
          grid.select().each(function(){
          selectedId.push(this.getElementsByClassName('idCompOperation')[0].innerText);
            
            });
           // do some stuff
        }
      });
 
          

In the change function I can get the multiple elements selected and change the order of them in the datasource but visually only the first column selected is moved in the table iven if I refresh the grid

Select 2 rows:

Drag to the beginning of the table

Just the first of the 2 rows is moved the other remains at the bottom

How can I do?

Thanks Mik

At the moment we are using Kendo UI Scheduler for jQuery. We like to add days off. We implemented business hours & weekends and that is working fine. We like to do the same but only on certain dates at certain hours. I found already something on the internet but I like to use standard functionality. If there is no standard for this, I like to add it as a wish.

Roel

I have grid with date columns start_date, end_date and status_date. I defined column as 

columns : [

{

   field: 'start_date',

   title: 'Start Date',

   format: '{0:dd-MMM-yyyy}'

} ,

{
   field: 'end_date',
   title: 'End Date',
   format: '{0:dd-MMM-yyyy}'
} ,

{
   field: 'status_date',
   title: 'Status Date',
   format: '{0:dd-MMM-yyyy}'
} ]

When I bind data at first time date formatted DD-MMM-YYYY (i.e. 01-Jan-2018) seems right. But when I'm trying to reset data the format has changed to DD-MM-YYYY (i.e. 01-01-2018).

var data = results;

var grid = $("#grid").data("kendoGrid");

grid.dataSource.data(data);

Please help to fix this. Thanks