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

Hi guys

I have a treeview which has some rules about the exact location that certain nodes can be dragged to.

I have been working through the logic and getting there, except I cam across this challenge

If I have 3 nodes and the same level and drag a new node between them

Node1

   drag position a

Node2

drag position b

Node3

It appears that if the mouse is closets to Node2  at both drag position A and B, I can get the same drag events.

To be clear, dropTarget = 'Node2' and status is  'i-insert-middle' can happen at both Drag A and Drag B  if the mouse is closest to Node2.

I think easiest demonstrated in this simple Dojo  I have filtered out all events other than target for the second node and insert middle events.

drag and drop drag events

Dragging on each side of the second node can give the same drag events  as per attached screen shots which show the same events for the different locations. of the drag

How can I determine where the exact location the user is dragging to? ( before they do it , so I can deny or allow)

Many thanks

Rob