Questions on Kendo UI for jQuery Forum

0 answers

15 views

Array of arrays.

Hi everyone,

I'm not very familiar with Kendo.

This is my first time using an array of arrays. I expected all the Arrays in the Array to be DataSource structures.

Instead, I had to write something like this:

var selected = new kendo.data.DataSource();

for ( var font of AP.page.selectedFonts ) {
    var newRow = {
        id: font.id,
        font: font.font,
        // I thought this array was automatically converted to a DataSource.
        items: new kendo.data.DataSource( { data: font.items } ) 
    };

    selected.add( newRow );
}

viewModel.set( "selectedFonts", selected );

Is this the correct approach?

Many thanks

Data Source

updated question on 13 Aug 2025

1 answer

53 views

Updating parent data grid from child grid

Hello

I have a grid and each row can be expanded, using detailInit, to show an inner grid.

I fetch the data beforehand so that I can populate the grid using local data.

In inner grid I have a column with a delete button - using template I call a delete function passing this as a parameter.

// column definition
 {
                    field: "delete",
                    title: "Delete",
                    width: 50,
                    template: "<span class='delete' onclick='delete(this)'><img src='.delete_icon.png'/></span>"
},

my delete function :

function delete(e) {
            let Loader = KENDO.KendoLoader($("body"));
            try {
                Loader.Show();
                let row = $(e).closest("tr");
                let grid = $(e).closest(".innerGrid");

                let dataItem = KENDO.KendoGrid(grid).GetDataItem(row);
                let innerRowId= dataItem.id;

                let parentRow = row.parent().closest(".k-detail-row").prev();
                let parentDataItem = KENDO.KendoGrid($("#ParentGrid")).GetDataItem(parentRow);

                KENDO.KendoGrid(grid).DeleteUI([innerRowId]); // DeleteUI gets array of ids to delete , implemented below
               
                // if no rows remain in inner grid, I need to update a column's value in the parent row
                if (KENDO.KendoGrid(grid).HasRows() == false) {
                    grid.hide();
                    grid.siblings(".noRecordsFound").show();

                     let updatedDataObj = {
                            id: parentDataItem.id,
                            someColumnOnParentRow: null
                        }

                        KENDO.KendoGrid($("#ParentGrid")).UpdateUI([updatedDataObj]); // UpdateUI gets array of objects to update, implemented below
                }
            }
            catch (error) {
                debugger;
                console.log(error.message);
            }
            finally {
                Loader.Hide();
            }
        }

We have created a own KENDO wrapper script for different widgets. Here is the kendoGrid code:

let KENDO = {
  KendoComponent(jQueryElement, component, options = null) {

        let kendoComponent = {};

        kendoComponent.InitKendoComponent = function () {
            let kComponent = jQueryElement.data(component);
            if (!kComponent) {
                if (options) {
                    kComponent = jQueryElement[component](options).data(component);
                }
                else {
                    kComponent = jQueryElement[component]().data(component);
                }
            }
            return kComponent;
        };

        return kendoComponent;
    },

   KendoGrid(jQueryElement, options = null) {

        let kendoGrid = {};

        let kGrid = KENDO.KendoComponent(jQueryElement, "kendoGrid", options).InitKendoComponent();
        if (options)
            kGrid.setOptions(options);

        kendoGrid.SetOptions = function (options) {
            kGrid.setOptions(options);
            return kendoGrid;
        }

        kendoGrid.GetData = function () {
            return Array.from(kGrid.dataSource.data());
        }

        kendoGrid.GetDataItem = function (jQueryTableRow) {
            return kGrid.dataItem(jQueryTableRow);
        }

        kendoGrid.UpdateUI = function (dataToUpdate = []) {
            dataToUpdate.forEach(obj => {
                let dataItem = kGrid.dataSource.get(obj.id);
                if (dataItem) {
                    for (let prop in obj) {
                        if (prop !== "id") {
                            dataItem.set(prop, obj[prop]);
                        }
                    }
                } 
            });
            return kendoGrid;
        }

        kendoGrid.DeleteUI = function (idsToDelete = []) {
            idsToDelete.forEach(id => {
                let dataItem = kGrid.dataSource.get(id);
                if (dataItem)
                    kGrid.dataSource.remove(dataItem);
            });
            return kendoGrid;
        };

        kendoGrid.HasRows = function () {
            return kGrid.dataSource.data().length > 0;
        }

        return kendoGrid;
    }
  
}

It appears that UpdateUI does not function as it should.

When I test I notice that when the last remaining row of inner grid is deleted, the parent row's column is indeed updated to null, the No Records Found message is shown instead of the inner grid, the parent row gets collapsed, and when I expand it the inner grid is shown with the last remaining row.

Suprisingly, if I comment out the UpdateUI line, the inner grid's row gets deleted, without collapsing the inner grid and the No Records Found message is shown as intended (the parent row's column does not get updated in this case, obviously).

Is it a bug in Kendo ? or am I doing something wrong?

Data Source

Grid

answered on 13 Jun 2025

1 answer

37 views

Pivotgridv2 measure is not slicing the data by the second attribute when expanding

When there is a second item in a row and both are expanded the value is no longer sliced(filtered?) by the first item. My users are used to this with excel etc and really want this functionality how can I achieve it?

Value sum is correct (sliced) for all rows

where second row is expanded and not correct(sliced?).

Here is a simplified version of my code showing the unwanted behavior

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
  <link href="../../styles/default-ocean-blue.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
  <script src="../../js/kendo.all.min.js"></script>
  <script src="../content/shared/js/console.js"></script>
</head>
<body>
  <div id="container">
    <div id="pivotgrid"></div>
    <div id="configurator"></div>
    <div id="pivotbutton"></div>
  </div>
  <script>
    var dataSource = new kendo.data.PivotDataSourceV2({
      "data": [
        { "Value": 77, "ASort": 2, "BSort": "b" },
        { "Value": 28, "ASort": 1, "BSort": "a" },
        { "Value": 63, "ASort": 2, "BSort": "a" },
        { "Value": 42, "ASort": 1, "BSort": "b" }
      ],
      rows: [
        { name: "ASort", expand: true },
        { name: "BSort", expand: true }
      ],
      "schema": {
        "model": {
          "fields": {
            "Value": { "type": "number" },
            "ASort": { "type": "number" },
            "BSort": { "type": "string" }
          }
        },
        "cube": {
          "dimensions": {
            "ASort": { "caption": "ASort" },
            "BSort": { "caption": "BSort" }
          },
          "measures": {
            "Value sum": {
              "field": "Value",
              "format": "{0:n}",
              "aggregate": "sum"
            }
          }
        }
      }
    });


    $(document).ready(function () {
      window.pivotgrid = $("#pivotgrid").kendoPivotGridV2({
        height: $(window).height() - 2,
        dataSource: dataSource

      }).data("kendoPivotGridV2");

      $("#configurator").kendoPivotConfiguratorV2({
        dataSource: pivotgrid.dataSource,
        filterable: true,
        sortable: true
      });

      $("#pivotbutton").kendoPivotConfiguratorButton({
        configurator: "configurator"
      });

      $("#container").kendoPivotContainer({
        configuratorPosition: "left"
      });
    });
  </script>

</body>
</html>

Data Source

PivotGridV2

answered on 15 May 2025

1 answer

44 views

Chart not showing data points which are actually set in the datasource

Hello.

We own a license for an older version of Kendo UI for jQuery, and we are now testing the latest release (demo version) to decide if we should upgrade.

We have a chart showing the datapoints from a datasource, where category is a date (rounded to minute) and value is a number. Series is set to show a gap if data point is missing.

The attached picture shows the chart on the left, and the content of the datasource._view array as logged in the browser's JavaScript console. As you can see after datapoint at 15.57 there's a big gap, even if the datapoints actually exist in the datasource.

The chart is updated by creating a new datasource when new data is available every 5 minutes.

What could be the reason if such behavior? Are we doing something wrong? Maybe we should reset the chart in some way before passing the updated datasource?

Thank you.

Charts

Data Source

answered on 21 Apr 2025

0 answers

28 views

Kendo Grid - prevent server side filtering

Settings of the data source are as follows:

$scope.dataSource = new $kendo.data.DataSource({
    pageSize: 10,
    serverPaging: false,
    serverFiltering: false,
    schema: {
        model: {
            id: "id"
        }
    },
    transport: {
        read: read
    }
});
 
$scope.gridOptions = {
    selectable: "multiple",
    pageable: {
        pageSizes: [5, 10, 15, 20, 25, 50]
    },
    persistSelection: true,
    resizable: true,
    filterable: { mode: "row" },
    sortable: {
        mode: "multiple",
        allowUnsort: true
    }
};
 
// template
<div kendo-grid k-data-source="dataSource " k-options="gridOptions">
</div>

Even if the serverFiltering is set to false, when I write something to the filter textbox, the read function is invoked, but just for the first time.

Any help, please?

Data Source

Grid

updated question on 15 Apr 2025

1 answer

33 views

Unable to Retrieve Data from Hidden jQuery AutoComplete

Hello,

I'm trying to retrieve data from the kendoAutoComplete component, but I'm encountering an issue when the input is hidden.

The happy path works perfectly when the input is visible. For example:

<input id="test">

var data = ["One", "Two"];
$("#test1").kendoAutoComplete({
dataSource: data
});

$("#test1").data('kendoAutoComplete').dataSource.data() // return ["One", "Two"]

However, the problem arises when the input is not visible (e.g., using style="display: none;"). I use the same code, but when I call the data() method, it does not return the original data. Instead, it returns undefined until I make the input visible again and reload the data source. Only then does it start working correctly.

Example:

<input id="test" style="display: none;>

var data = ["One", "Two"];
$("#test1").kendoAutoComplete({
dataSource: data
});

$("#test1").data('kendoAutoComplete').dataSource.data() // return "undefined"

Is there a workaround or specific configuration to ensure the data() method behaves as expected, even when the input is hidden?

Thank you in advance for your assistance!

AutoComplete

Data Source

answered on 26 Mar 2025

1 answer

72 views

How to render an array of array in Grid Cell?

Hi, as the title says, I want to render the inner data of a multilevel array to a grid cell, maybe value separated by ";".

Here is the array (JSON)

"anni":[{"anno":"2026"},{"anno":"2025"}]

I tried many template format for the field I want to use, but none worked.

Last:

template: "#=anni.anno#"

Thank you

Alessandro

Data Source

Grid

answered on 20 Feb 2025

0 answers

52 views

kendomultiselect value setting not rendered

I have an html page with two kendomultiselect controls initialized with a code like the following:

function msAssegnatariConoscenza_GetDataSource()
{
 return new kendo.data.DataSource(
  {
   serverFiltering: true,
   schema: {
    data: function (response)
    {
     //...
 return response;}
 },
   transport: {
    read: {
     url: "../Api/Assegnatari_SearchWithUO", //Assegnatari_Search
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 type: "POST"
 },
    parameterMap: function (data, type)
 {
     //...
     return JSON.stringify(data);
 }
   }
  }
 );
}

function msAssegnatariConoscenzaInit(fIsReadOnly)
{
 if (!datiSmistamento.AssConoscenza) datiSmistamento.AssConoscenza = [];

  $("#field_AssConoscenza").kendoMultiSelect({
 autoBind: false,
 dataTextField: "Nome",
 dataValueField: "ID",
 minLength: 3,
 delay: 500,
 height: 300,
 headerTemplate: '...',
 tagTemplate: '...',
 itemTemplate: '...', 
 filtering: function (e)
 {
    if (!e.filter || !e.filter.value)
 e.preventDefault();
 },
   dataSource: msAssegnatariConoscenza_GetDataSource() ,
   value: null,
 select: function (e)
 {
    var dataItem = this.dataItem(e.item.index());
 return selectAssegnatarioConoscenza($(this.element[0]).attr("id"), dataItem, e);
   },
 change: function (e) { return msAssegnatariConoscenza_changeEvent(this, e); }, //Fired when value changed by the user, not form code.
 dataBound: function (e) { e.sender.listView.focusFirst(); return false; }
  });
}

When I delete an element in one control, I have to add it to the other control.

On the change event of the first I set the new value of the second with the following code:

 msAssegnatariConoscenza.value([]);
 msAssegnatariConoscenza.dataSource.data(datiSmistamento.AssConoscenza);
 msAssegnatariConoscenza.value(datiSmistamento.AssConoscenza.map(avmAss => avmAss.ID));

So if I choose a new value in the second control typing chars and choosing from list, and then delete one on the first control, when I programmatically set the new value of the second control it will not be updated.

Can anyone tell me what I have done wrong?

Data Source

MultiSelect

updated question on 10 Jan 2025

0 answers

88 views

Is there a dataSource function I can call to trigger a read(), but only if necessary?

Hello we have a number of input elements, dropdowns, multiselects, etc which we are trying to defer loading for.

The problem is they use custom shared datasources, so setting them to AutoBind false is not automatically triggering the read() function, and we have added some additional dataSource behavior around multiselectors, which leads me to my question:

Is there a dataSource function like read() which only reads data from the server if its actually necessary? e.g. on the first load, if the dataSource has detected that the user has done something to the UI element to warrant a refresh, etc?

I know there are a tonne of undocumented functions on the kendo objects, some of them not intended for everyday use, but I'd be interested to know if any of them do what we need.

asked on 25 Sep 2024

0 answers

77 views

Kendo dropdownlist virtual with server filtering making multiple Server Requests

We are instantiating late bind a new dropdownlist using jquery, making it virtual and reading data from an ajax call on the server

Here is an example of a dropdown initialization

$('#articles-row select:first').kendoDropDownList(
{
    filter: "contains",
    dataTextField: "Name",
    dataValueField: "Id",
    virtual: {
        itemHeight: 35,
        valueMapper: valueMapperArticles
    },
    dataSource: {
        pageSize: 80,
        serverPaging: true,
        serverFiltering: true,
        schema: {
            data: function (response) {
                console.log(response.Data)
                return response.Data;
            }
        },
        transport: {
            read: {
                url: "@Url.Action("Filter_Articoli")"
            }
        }
    }
});

And here is a simplified version of the datasource read method used in our program

public JsonResult Filter_Articoli([DataSourceRequest] DataSourceRequest request)
{
    IQueryable<Articles> art = _db.Articles
            .Where(x => !x.Disabled).AsQueryable();
    return Json(art.ToDataSourceResult(request));
}

When i instantiate the dropdown like so, he makes multiple server request, where the first one is correct i guess (using paging, sorting etc), and the other two are not necessary and badly formatted, making the execution of the page interrupt

Here is a screen of the three server request made by the datasource and the data obtained from the data formatting

Am i missing some configuration on the server or in the kendo dropdownlist instantiation?

Thanks in advance

Data Source

DropDownList

asked on 20 Sep 2024