Auto complete for Document type works as expected when i add new file (Tool bar add file).
How do I achieve the same auto complete and validation if user clicks edit/Update? I am using ScaffoldColumn to make the Doc type editable when user clicks Edit in Kendo Grid??

 @(Html.Kendo().Grid<FileDataModel>()
                  .Name("grid")
                  .Columns(columns =>
                  {
                  columns.Bound(c => c.FileName);
                  columns.Bound(c => c.Title);
                  columns.Bound(c => c.SelectedDocType);
                  columns.Template(@<text></text>).Title("<b>Download</b>")
                          .ClientTemplate("<a href='" + Url.Action("Download", "Home", new { @id = "#=Id#" }) + "'>Download</a>")
                          .HtmlAttributes(new { style = "text-align: left;" });
                      columns.Command(command =>
                      {
                          command.Edit();
                          command.Destroy();
                      }).Title("<b>Action</b>");
                  }).Events(e => e.DataBound("onDataBound"))
                  .Scrollable(a=>a.Height("auto"))
                  .Selectable()
                  .Groupable()
                  .Sortable()
                  .Editable(config => config.Mode(GridEditMode.PopUp))
                  .Pageable(pageable => pageable
                      .Refresh(true)
                      .PageSizes(true)
                      .ButtonCount(5))
                  .ToolBar(toolBar => toolBar.Template("<a class='k-button  k-button-icontext' onclick='addFilePopup()' href='#' id='addNewFile'></span>Add new file</a>"))
                  .DataSource(dataSource => dataSource
                      .Ajax()
                      .Batch(false)
                      .PageSize(20)
                  .Model(model =>
                  {
                      model.Id(p => p.Id);
                      model.Field(p => p.Id).Editable(false);
                      model.Field(p => p.CreatedDate).Editable(false);
                      model.Field(p => p.DateSigned).Editable(false);
                      model.Field(p => p.DateSubmitted).Editable(false);
                      model.Field(p => p.DjjNumber).Editable(false);
                      model.Field(p => p.ScanDate).Editable(false);
                      model.Field(p => p.ScanUser).Editable(false);
                  })
                  .Read(read => read.Action("GetFiles", "Home", new { djjNumber = Model.DjjNumber }))
                  .Update(update => update.Action("EditingInline_Update", "Home"))
                  .Destroy(destroy => destroy.Action("EditingInline_Destroy", "Home"))
          ))

</div>


Kendo Autocomplete and Validation function.
$("#txtDocType").kendoAutoComplete({
            dataSource: new kendo.data.DataSource({
                type: "json", // specifies data protocol
                pageSize: 3,//This is to set search limit
                serverFiltering: true,
                transport: {
                    read: '@Url.Action("GetDocumentTypes", "Home")',
                    parameterMap:function(){
                        return {filterKey:$("#txtDocType").data("kendoAutoComplete").value()};
                    }
                },
            }),
            dataTextField:"Type",
            filter: "contains",
            minLength: 3,//This is to set minimum character length for autocomplete
        });
    });

    function ValidateDocumentType(){
        var isValidDocType=true;
        $.ajax({
            data:{documentType:$("#txtDocType").val()},
            url:'@Url.Action("GetDocumentType", "Home")',
            async: false,
            success:function(data) {
                if(data==false)
                    isValidDocType=false;
                complete=true;
            },
        });
        return isValidDocType;
    }

I have a Kendo ListView, which I have selected set to "multiple". I also have a button on that page that will do data processing. Part of it's function is to get the selected items from that ListView and put them into some type of array. However I can't even accessthe bloody selected items from the ListView.

With Telerik's PATHETIC support for Angular I have to resort to jQuery, but even with that older code I still can't get a list of selected items from the ListView.

Obligatory code sections that proably won't make sense to anybody, but need to be included otherwise support will whine about not having code to review.

HTML:

Angular Controller:

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.