Hi Kendo UI Team,

I was wondering why the Gantt control does not display German translations (e.g. view names) and the solution seems to be that there no german translations for it. The file kendo.messages.de-DE.js does not contain any at least.

Or am I missing something?

Hi!

Using http://demos.telerik.com/kendo-ui/grid/angular

When we do any add/edit rows in the Grid the data gets submitted at the backend asynchronously.  We have the save operation to be performed at the form level not at individual section level.How can I keep data from getting saves at Grid Level?

Thanks

I have a problem with select all options for filtered value. 

First, I cascade from dropdown 

function KendoPartnerDropdown(selector, data, textVal, value){
    $(selector).kendoDropDownList({
            dataTextField: textVal,
            dataValueField: value,
            dataSource: data,
            change:filterMultiSelect
    });
    
  
}

function filterMultiSelect(){
    var PartnerDropdown = $("#partner").data("kendoDropDownList");
    var multiSelectBox = $("#portfoliosMultiSelect").data("kendoMultiSelect");
    var partnerIndex = PartnerDropdown.dataItem().PartnerIndex;
    var filters = buildMultiselectFilters(partnerIndex);

    if(filters.length === 0){
        multiSelectBox.dataSource.filter({});
        multiSelectBox.value(getMultiselectValues(filteredDataValues(multiSelectBox.dataSource.data())));
      
    }else{
        multiSelectBox.tagList.empty();
        multiSelectBox.dataSource.filter(filters);
        // view() shows filtered data for multiselect. 
        var filterdata = multiSelectBox.dataSource.view();
        //setting default value (depending on filtering)
        multiSelectBox.value(getMultiselectValues(filteredDataValues(filterdata)));
    }

 updateMultiSelectCheckAllElementState();
}

    
function buildMultiselectFilters(partnerIndex) {
    var filters = [];
        if (partnerIndex !== 0){
            filters.push({ field: "PartnerIndex", operator: "eq", value: partnerIndex });
        }
        if (!$("#showClosedCheckbox").is(":checked")){
            filters.push({field:"CloseDate", operator: "neq", value: null});
        }
    return filters;
}

and then in multiselect is shown only corresponding filtered values.

Multiselect looks like this:

 function kendoPortfolioMultiSelect(selector, data, textVal, value) {

     $(selector).kendoMultiSelect({
         dataTextField: textVal,
         dataValueField: value,
         placeholder: "Select portfolio/s",
         dataSource: data,
         headerTemplate: '<div class="dropdown-header k-widget k-header">' +
                                '<span>ALL</span>' +
                                '<span> <input type="checkbox" id="checkAll" checked onclick="toggleCheckAllState()"></span>' +
                         '</div>',
         itemTemplate: '#:data.Number#<input type="checkbox" onclick = "multiselectItemClick(#:data.Index#)" class="multiSelectPortfolios" checked/></span>',
         tagTemplate: ` # if (values.length < 2) { #
                             # for (var idx = 0; idx < values.length; idx++) { #
                                  #:data.dataItems[idx].Number#
                              # } #
                         # } else { #
                               #:values.length# out of #:maxTotal#
                    # } # `,
         tagMode:"single",
         autoClose: false,
         change: onMultiselectPortfoliosChange,
         select: onSelect,
         value: getMultiselectValues(data)
     });
      toggleCheckAllState();
      showClosedClicked();

 }

function onMultiselectPortfoliosChange(){
      updateMultiSelectCheckAllElementState();
      var currData = $("#currency").data("kendoDropDownList");
      currData.value($("#portfoliosMultiSelect").data("kendoMultiSelect").value().RefCurrency);
 }

function onSelect(e){
   var input = e.item.children("input");
   input.prop("checked", !e.item.hasClass("k-state-selected"));
   updateMultiSelectCheckAllElementState();
}

function filteredDataValues(data){
    var filteredDataPortf = []; 
        data.forEach(f=>{
            filteredDataPortf.push({CloseDate:f.CloseDate, Index:f.Index, Language:f.Language, Number: f.Number, PartnerIndex:f.PartnerIndex, RefCurrency:f.RefCurrency});
    }) 
    return filteredDataPortf;
}


function onMultiselectPortfoliosChange(){
      updateMultiSelectCheckAllElementState();
      var currData = $("#currency").data("kendoDropDownList");
      currData.value($("#portfoliosMultiSelect").data("kendoMultiSelect").value().RefCurrency);
 }

function toggleCheckAllState(){
    var multiSelect = $("#portfoliosMultiSelect").data("kendoMultiSelect"); 

    if ( $("#checkAll").is( ":checked" ) ){
        var filterdata = multiSelect.dataSource.view();
        var newValues = getMultiselectValues(filteredDataValues(filterdata)); 
         multiSelect.value(newValues);
   
         $('.multiSelectPortfolios').prop("checked", true);
          
    }else{
        multiSelect.value(getMultiselectValues(filteredDataValues([])));
        $('.multiSelectPortfolios').prop("checked", false);
    }
   
   multiSelect.trigger("change"); 
 }
 
 function multiselectItemClick(data) {
   var multi = $("#portfoliosMultiSelect").data("kendoMultiSelect");
    
    if($('.multiSelectPortfolios:checked').length === $('.multiSelectPortfolios').length){
        $('#checkAll').prop('checked',true);
        multi.value().splice(multi.value().length,0,data);
    }else{
        $('#checkAll').prop('checked',false);
        var removeIndex = multi.value().indexOf(data);
        multi.value().splice(removeIndex, 1);
    }
 }
 
 function showClosedClicked() {
    $('#checkAll').prop('checked',true);
    filterMultiSelect();    
 }
 
 function  getMultiselectValues(data){
       var values = new Array();
      if (data[0] != null) {
            for (var i = 0; i < data.length; i++) {
                if (data[i] == null)
                    break;
                values[i]=data[i].Index;
            }
        }
        return values;
   }

//----checking checkboxis (if it's checked)------/
function updateMultiSelectCheckAllElementState() {
   var multiSelect = $("#portfoliosMultiSelect").data("kendoMultiSelect"); 
  
   var items = multiSelect.ul.find("li");
    $("#checkAll").prop('checked',true);
   items.each(function () {
        var element = $(this);
        var input = element.children("input");
        if (!input.prop("checked")){
            $("#checkAll").prop('checked',false);
        }
   });
 
}

function toggleCheckAllState() select/deselect all item.

The things that I want:

1. when I cascade from dropdown list and get filtetred value, I want that filtered value/s is mark as selected (and ALL checkbox)

2. When I uncheck ALL from filtered multiselect and check ALL again I want that all FILTERED values are selected (this part throws me an error: Cannot read property 'Index' of undefined)

Thanks!

How can I properly add element to grids pager? I want to add some additional label, buttons ...

I tried with:

and it works, but problem is, that every time setOptions is called, pager is destroyed and recreated. So I detach my div before calling setOptions and after that prepend it again:

but the problem is that also resize destroy pager (I have grid in PageControl in Window). When user resize/maximize/restore/minimize window grid.resize is called which destroy pager and all events, on custom element (this.footer) added to grids pager, are gone.

Hi,

I'm using kendo-ui with aurelia and opted for the kendui templating for exporting grouped grid data and have everyting working except the section marked below when grouping and refreshing the dataset. In summary I want to refresh datasource and maintain aggregate groupings.

Thanks,

John

This works. No aggregate totals in groups.
 changeData() {
    let s1 = moment(this.startDatePicker._value).format('MM-DD-YYYY')//  moment(this.startDatePicker.value).format('MM-DD-YYYY')
    let s2 = moment(this.endDatePicker._value).format('MM-DD-YYYY') //moment(this.endDatePicker.value ).format('MM-DD-YYYY')
   //  the api fetching new data
   api.getTWO(s1, s2)
      .then((jsonRes) => {
        let twos = jsonRes;
         let grid = jQuery(this.grid).data('kendoGrid');
        grid.setDataSource(dataSource)        //  dataSource.read();

      })
  }
attached() {
   jQuery(this.grid).kendoGrid({
      toolbar: ["excel"],
      excel: {
        fileName: "Kendo UI Grid Export.xlsx",
        proxyURL: "//demos.telerik.com/kendo-ui/service/export",
        filterable: true,
        allPages: true
      },
      dataSource: {
        type: "json",
        transport: {
          read: "http://localhost:8080/api/v1/two/getAll/" + s1 + "/" + s2

        },
        group: [{ field: "TenantCategory_Desc" }, { field: "CYM" }],// set grouping for the dataSource
        schema: {
          model: {
            fields: {
              CompanyName: { type: "string" },
              CYM: { type: "string" },
              CDATE: { type: "string" },
              TenantCategory_TenantCategory: { type: "string" },
              TenantCategory_Desc: { type: "string" },
              Comments: { type: "string" },
              Total: { type: "number" },
              TenantCategory_Amt: { type: "number" }
            }
          }
        },
        pageSize: 20,

        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
      },

      height: 550,
      filterable: true,
      groupable: true,
      sortable: true,
      pageable: true,
      columns: [
        { field: "CompanyName", filterable: false },
        "CYM",
        "CDATE",
        { field: "TenantCategory_Desc", title: "TenantCategory_Desc" },
  
        {
          field: "Total",
          title: "Total"
        }, {
          field: "TenantCategory_Amt",
          title: "TenantCategory_Amt"
        }
      ],
   

    });
  }


}



This Does Not work

 changeData() {
     let s1 = moment(this.startDatePicker).format('MM-DD-YYYY')
    let s2 = moment(this.endDatePicker).format('MM-DD-YYYY') 

    api.getTWO(s1, s2)
      .then((jsonRes) => {
        let twos = jsonRes;
        let dataSource = new kendo.data.DataSource({ data: twos });
        let grid = jQuery(this.grid).data('kendoGrid');
        let dataSource = new kendo.data.DataSource({ data: twos });
        let grid = jQuery(this.grid).data('kendoGrid');
        grid.dataSource.group({
          field: "TenantCategory_Desc", aggregates: [
            { field: "TenantCategory_Desc", aggregate: "count" },
            { field: "Total", aggregate: "sum" }
          ],
        })
        grid.setDataSource(dataSource)
        dataSource.read();
       
      })
  }


  attached() {
     this.startDatePicker.value = this.ss1;
    jQuery(this.grid).kendoGrid({
      toolbar: ["excel"],
      excel: {
        fileName: "Kendo UI Grid Export.xlsx",
        proxyURL: "//demos.telerik.com/kendo-ui/service/export",
        filterable: true,
        allPages: true
      },
      dataSource: {
        type: "json",
        transport: {
          read: "http://localhost:8080/api/v1/two/getAll/" + this.ss1 + "/" + this.ss2

        },
        group: {
          field: "TenantCategory_TenantCategory", aggregates: [

            { field: "TenantCategory_Desc", aggregate: "count" },
            { field: "Total", aggregate: "sum" }
          ]
        }
        ,
     
        schema: {
          model: {
            fields: {
              CompanyName: { type: "string" },
              CYM: { type: "string" },
              CDATE: { type: "string" },
              TenantCategory_TenantCategory: { type: "string" },
              TenantCategory_Desc: { type: "string" },
              Comments: { type: "string" },
              Total: { type: "number" },
              TenantCategory_Amt: { type: "number" }
            }
          }
        },
        pageSize: 20,

        aggregate: [{ field: "TenantCategory_Desc", aggregate: "count" },
          { field: "Total", aggregate: "sum" }]
      },
      groupable: true,
      sortable: true,
      scrollable: false,
      pageable: true,
      columns: [

        { field: "TenantCategory_Desc", title: "TenantCategory_Desc", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
        { field: "Total", title: "Total", aggregates: ["sum"], footerTemplate: "#= kendo.toString(sum, '0.00') #", groupFooterTemplate: "#= kendo.toString(sum, '0.00') #" },
        { field: "CompanyName", filterable: false },
        { field: "CYM", title: "YearMonth", filterable: true },
        { field: "CDATE", filterable: false },
      ]
    });
  }
}

}

Hi, 

Im creating a SchedulerDataSource using remote data, however the when the SDS gets the responed data its applying (I assume) some kind of timezone logic that is changing the times of the start and end dates. I do not want this, as the times are stored correctly in the Database being read. Please advise on how I can stop this from happening?

CODE:

My Server Response:
[{"id":1,"start":"2016-10-04T07:00:00.000Z","end":"2016-10-04T08:00:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":1,"locationId":1},{"id":3,"start":"2016-10-04T11:00:00.000Z","end":"2016-10-04T13:00:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":1,"locationId":1},{"id":6,"start":"2016-10-04T14:00:00.000Z","end":"2016-10-04T15:30:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":2,"locationId":2},{"id":9,"start":"2016-10-04T12:30:00.000Z","end":"2016-10-04T13:30:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":1,"locationId":1},{"id":10,"start":"2016-10-04T09:00:00.000Z","end":"2016-10-04T10:00:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":1,"locationId":1},{"id":11,"start":"2016-10-04T10:30:00.000Z","end":"2016-10-04T11:30:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":1,"locationId":1}]

schema.parse Results:
Event (Id:1, start: 2016-10-04T07:00:00.000Z, end: 2016-10-04T08:00:00.000Z)
Event (Id:3, start: 2016-10-04T11:00:00.000Z, end: 2016-10-04T13:00:00.000Z)
Event (Id:6, start: 2016-10-04T14:00:00.000Z, end: 2016-10-04T15:30:00.000Z)
Event (Id:9, start: 2016-10-04T12:30:00.000Z, end: 2016-10-04T13:30:00.000Z)
Event (Id:10, start: 2016-10-04T09:00:00.000Z, end: 2016-10-04T10:00:00.000Z)
Event (Id:11, start: 2016-10-04T10:30:00.000Z, end: 2016-10-04T11:30:00.000Z)

timePickerDataSource.fetch() data iteration results:
SDS Event (Id:1, start: Tue Oct 04 2016 09:00:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 10:00:00 GMT+0200 (South Africa Standard Time))
SDS Event (Id:3, start: Tue Oct 04 2016 13:00:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 15:00:00 GMT+0200 (South Africa Standard Time))
SDS Event (Id:6, start: Tue Oct 04 2016 16:00:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 17:30:00 GMT+0200 (South Africa Standard Time))
SDS Event (Id:9, start: Tue Oct 04 2016 14:30:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 15:30:00 GMT+0200 (South Africa Standard Time))
SDS Event (Id:10, start: Tue Oct 04 2016 11:00:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 12:00:00 GMT+0200 (South Africa Standard Time))
SDS Event (Id:11, start: Tue Oct 04 2016 12:30:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 13:30:00 GMT+0200 (South Africa Standard Time))

All the times in the fetch() results are pushed forward.
My solution (more like hack) is to recreate the dates without the timezone info...

Please advise on a more correct/efficient way to maintain the integrity of my times.

Many Thanks and Kind Regards,
Grant