Questions on Kendo UI for jQuery Forum

1 answer

30 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

28 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

31 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

24 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

29 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

54 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

51 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

86 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

72 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

1 answer

58 views

How can one dynamically set field property for Line Chart

I am trying to get my Line Chart to dynamically assert the field text rather than having to explicitly put the field in my remote datasource objects and then state that property as the field in the Line chart series.

so instead of doing it like

data = [

{Date: 09/10/2020, English: 88, Math: 99, Science: 45},

{Date: 08/22/2020, English: 76, Math: 90, Science: 95},

{Date: 08/01/2020, English: 70, Math: 80, Science: 75}

]

and LineSeries = [

{
field: "English",
categoryField: "date",
name: "English",
},
{
field: "Math",
categoryField: "date",
name: "Math",
},
{
field: "Science",
categoryField: "date",
name: "Science",
}

]

like in the Line Chart its done in the JQuery Line Chart example to get a seperate line for each subject and a data point for each distinct date.

Is it possible to instead do

data = [

{Date: 09/10/2020, Subject: "Math", Value: "78" },

{Date: 09/10/2020, Subject: "English", Value: "80" },

{Date: 09/10/2020, Subject: "Science", Value: "65" }

{Date: 08/22/2020, Subject: "Math", Value: "87"},

{Date: 08/22/2020, Subject: "English", Value: "97"},

{Date: 08/22/2020, Subject: "Science", Value: "57"},

]

and something like LineSeries = [ {
field: "Subject",
categoryField: "date",
name: "Subject",
},
] ? if not is there a seperate way to configure the series to get a seperate line for each subject and a data point for each distinct date?

Charts

Data Source

answered on 18 Sep 2024