Telerik Forums
Kendo UI for jQuery Forum
1 answer
44 views

I have implemented a grid with inline editing, which has a dropdown in one of its columns. The problem is, everytime I am trying to save a change I made, I get the following TypeError and I think it is the dropdown which causes this:

kendo.all.js:6412 Uncaught TypeError: Cannot read properties of undefined (reading 'data')
    at init.setup (VM13051 kendo.all.min.js:formatted:4953)
    at init.update (VM13051 kendo.all.min.js:formatted:4946)
    at Object.<anonymous> (VM13051 kendo.all.min.js:formatted:5531)
    at Function.Deferred (VM12816 AJS097.P:528)
    at init._promise (VM13051 kendo.all.min.js:formatted:5526)
    at init._send (VM13051 kendo.all.min.js:formatted:5557)
    at init.sync (VM13051 kendo.all.min.js:formatted:5341)
    at init.saveRow (VM13051 kendo.all.min.js:formatted:48900)
    at init._editUpdateClick (VM13051 kendo.all.min.js:formatted:48689)
    at HTMLAnchorElement.proxy (VM12816 AJS097.P:65)

Here is the implementation of the grid (I tried to keep it as simple as I could, by removing anything that might be unnecessary for this problem):

jq(document).ready(function() { var copyBool = false grid_counter = 0; jq("#inline_grid").kendoGrid({ autoBind: true, dataSource: { transport: { read: { url: "GetJsonData_Grid.p", dataType: "json", data:{ "function": "testfunction", "element": "grid", "param1": "testparam1", "param2": "", "param3": "", "rowid": $("rowid").value } } }, schema: { data: "data", total: "recordsCount", model: { id: "field1", fields: { field1: { type: "string", validation: { required: true, maxlength: "3", field1validation: function(input) { var grid_length = jq("#inline_grid").data("kendoGrid").dataSource.data().length + 1; if(input.is("[name='field1']") && input.val() == "0") { input.attr("data-field1validation-msg","the number must be greater than 0"); returnfalse; } elseif(input.is("[name='field1']") && input.val() == "") { input.attr("data-field1validation-msg","the number must not be empty"); returnfalse; } elseif(input.is("[name='field1']") && (input.val() < "0" || input.val() > "99999999")) { input.attr("data-field1validation-msg","the input is invalid"); input.val(grid_length); returnfalse; } returntrue; } } }, field2: { type: "string", validation: { required: false }}, field3: { type: "string", validation: { required: false }}, field4: { type: "string", validation: { required: false }}, field5: { type: "string", validation: { required: false }}, field6: { type: "string", validation: { required: false }} } } }, pageSize: 15 }, toolbar: [ { name: "create", text: "Add", iconClass: "" }, ], dataBound: function(e) { if(grid_counter == 0) { this.select("tr:eq(0)"); grid_counter++; } }, selectable: true, change: function(e) { var selectedRows = this.select(), dataItem = this.dataItem(selectedRows[0]); ... }, sortable: false, scrollable: { virtual: true }, persistSelection: true, columns: [ { field: "field1", title: "nr", width: "30px", attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: textEditor }, { field: "field2", title: "active", width: "20px", attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: cbEditor }, { field: "field3", title: "art", width: "100px",attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: ddlEditor }, { field: "field4", title: "description", width: "100px",attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: textEditor }, { field: "field5", title: "comment", width: "100px",attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: textEditor }, { field: "field6", title: "processed", width: "60px", attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: cbEditor }, { command: [ { name: "edit", text: { edit: " ", update: "Save", cancel: " "} }, { name: "copy", text: " ", iconClass: "k-icon k-i-copy", click: function(e) { e.preventDefault(); var data = this.dataItem(jq(e.target).closest("tr")); field1 = data.field1; field2 = data.field2; field3 = data.field3; field4 = data.field4; field5 = data.field5; field6 = data.field6; copyBool = true; jq("#inline_grid").data("kendoGrid").addRow(); } }, { name: "destroy", text: " ", iconClass: "k-icon k-i-delete" }, ], title: "&nbsp;", width: "60px", attributes: {style: "text-align:right;"} } ], noRecords: true, pageable: { previousNext: false, numeric: false, alwaysVisible: true, pageSizes: [5,10,15] }, editable: { mode: "inline", createAt: "bottom" }, edit: function(e) { var model = e.model, container = e.container, nummer = parseInt(jq("#inline_grid").data("kendoGrid")._data[jq("#inline_grid").data("kendoGrid")._data.length - 2].field1) + 1; jq("#inline_grid tbody").find("tr.k-state-selected").removeClass("k-state-selected k-state-selecting"); /* field1 */if(e.model.isNew() && !e.model.dirty) { e.container .find("input[name=field1]") .val(nummer) .change(); } if(copyBool) { e.model.set("field2", field2); e.model.set("field3", field3); e.model.set("field4", field4); e.model.set("field5", field5); e.model.set("field6", field6); copyBool = false; }

... }, save: function(e) { $("model").value = "test"; $("nr").value = e.model.field1; $("active").value = e.model.field2; $("art").value = e.model.field3; $("description").value = e.model.field4; $("comment").value = e.model.field5; $("processed").value = e.model.field6; ... }, remove: function(e) { $("model").value = "test"; $("nr").value = e.model.field1; ... } }); var inline_grid = jq("#inline_grid").data("kendoGrid"); function textEditor(container,options) { jq('<input data-value-update="input" type="text" class="k-textbox k-valid" id="' + options.field + '" name="' + options.field + '" maxlength="30" autocomplete="off" data-bind="value:' + options.field + '"/>') .appendTo(container); } function cbEditor(container,options) { jq('<input type="checkbox" class="k-checkbox" id="' + options.field + '" name="' + options.field + '" value="yes"/>') .appendTo(container); } function ddlEditor(container,options) { jq('<input id="ddl_' + options.field + '" data-text-field="field1" data-value-field="field1" data-bind="value:' + options.field + '"/>') .appendTo(container) .kendoDropDownList({ dataTextField: "field1", dataValueField: "field1", autoBind: false, dataSource: { transport: { read: { url: "GetJsonData_Grid.p", data: { "function": "testfunction", "element": "ddl", "param1": "testparam1" } }, dataType: "json" }, schema:{ data: "data", total: "recordsCount" }, sort: { field: "field1", dir: "asc" } }, optionLabel: "-- select --", optionLabelTemplate:"<span style='color:gray;'>-- select --</span>", filter: "startswith", filtering: function(e) { var filterValue = e.filter != undefined ? e.filter.value : ""; e.preventDefault(); filtering("#ddl_" + options.field,filterValue,2); }, headerTemplate: "<div> \ <table> \ <tr> \ <td style='font-weight:bold;width:100px;'>Code</td> \ <td style='font-weight:bold;width:200px;'>Description</td> \ </tr> \ </table> \ <div>", template: "<div> \ <table> \ <tr> \ <td style='width:100px;' nowrap>#= field1 #</td> \ <td style='width:200px;' nowrap>#= field2 #</td> \ </tr> \ </table> \ <div>", autoWidth: true, change: function(e) { ddl_value = this.value(); // Tooltip e.sender.select(function (dataItem) { if(dataItem.field1 == ddl_value) { jq("[data-container-for=" + options.field + "] .k-widget.k-dropdown").prop("title", dataItem.field2); return (dataItem.field1 == ddl_value); } }); } }); }; }); // jq(document).ready(function() {

Any idea what might be causing the typeError?

 

Thanks in advance,

Syian

Georgi Denchev
Telerik team
 answered on 21 Sep 2021
1 answer
11 views

Hi Team,

This dojo to illustrate the problem: https://dojo.telerik.com/iNIsiHig

When using jquery 3.6.0, the window does not get focus. Using any previous jquery like 3.5.1 or 1.12.4 makes it work.

Please advise.

 

Best regards,

Laurent.

Martin
Telerik team
 answered on 21 Sep 2021
0 answers
3 views
Is it possible instead of uploading files can I choose a file from the file explorer window and upload a hyperlink which has the file path to that file from a shared server. 
Ronan
Top achievements
Rank 1
 asked on 20 Sep 2021
1 answer
18 views

Hi Team,

is there a way we can open the table wizard popup as a slider instead of a popup? currently as it attaches to the body itself, there is no way to even do it using JQuery or CSS post render.

 

Ianko
Telerik team
 answered on 20 Sep 2021
1 answer
9 views

I am currently working with the Pivot Grid; its quite nice. I have noticed though that if the Column is removed, the grid itself still retains data and formatting unique to that column. Using the demo as an example:
https://demos.telerik.com/jsp-ui/pivotgrid/index

The default columns are:

[Date].[Calendar] and [Product].[Category]

The default measure is:

[Measures].[Reseller Freight Cost]

If you remove all three of the above, both column fields and the measure, the resulting PivotGrid will still reflect a financial amount even though only a Row is populated with a Field.

See screen shot:

This is confusing to me and my users; why is it working this way? Is it possible to change this behavior?

Nikolay
Telerik team
 answered on 20 Sep 2021
1 answer
9 views

I am trying to find a way to scroll to a specific row while using virtual scrolling but my solution has not been consistent. Here is the function that is being called each time I want to select a specific row:

function selectGridRow(grid_element,grid_value,grid_field) {
	var dataSource = grid_element.dataSource,
            filters    = dataSource.filter() || {},
	    sort       = dataSource.sort() || {},
	    models     = dataSource.data();
		
	var query         = new kendo.data.Query(models),
            rowNum        = 0,
	    modelToSelect = null;
	
	models = query.filter(filters).sort(sort).data;
	
	// Item Position
	for (var i = 0; i < models.length; ++i) {
		var model = models[i];
		if (model[grid_field] == grid_value) {
			modelToSelect = model;
			rowNum = i;
			break;
		}
	}
	
	grid_element._selectedIds = {}; 
	
        // Change to the page where the row is and select it
	var currentPageSize = grid_element.dataSource.pageSize(),
	    pageWithRow     = parseInt((rowNum / currentPageSize)) + 1; 
	
	grid_element.dataSource.page(pageWithRow);
	
	var row = grid_element.element.find("tr[data-uid='" + modelToSelect.uid + "']");
	
	if (row.length > 0) {
	   grid_element.select(row);
	   grid_element.content.scrollTop(grid_element.select().position().top);  
        }
}

While the above function sometimes works fine, finds the row and also scrolls to it, other times this fails. For example, when a row at the very top is selected and I am trying to select a row at the very bottom, I can see grid changing page but the row is not getting selected.

Is there anything I am missing here?

Georgi Denchev
Telerik team
 answered on 20 Sep 2021
1 answer
3 views

I have a grid that I'm filling with the results of a REST API call. The grid should have a dynamic button that renders based on the status in the results.

The API is actually sending a valid link so but when I try to display the result in a column it renders as text is there a trick to this?

Example result that is not rendering as a button just as text. For the field

Properties.AppointRetire

<a href="/Governance/Forms/Staff/Retire.aspx?ID=9526295&OfficeHolderID=9526744&SEQN=170" class="TextButton">Retire</a>"

 

CODE:


function fillgrid(parsedPayload) {

          $("#grid").kendoGrid({
dataSource: {
              data: parsedPayload,
              pageSize: 15,
            },
            columns: [
              { field:"Properties.DivisionBranch", title: "Division - Branch", width: 300  },
              { field:"Properties.FirstName", title: "First Name", width: 200  },
              { field: "Properties.LastName", title: "Last Name", width: 200  },
              { field: "Properties.Appointed", title: "Appointed", type: "date", format: "{0:dd/MM/yyyy}" },
              { field: "Properties.GoverningCommittee", title: "Governing Committee", width: 300 },
              { field: "Properties.Office", title: "Office", width: 200  },
              { field: "Properties.Occupation", title: "Occupation", width: 200  },
              { field: "Properties.Status", title: "Office <br />Status", filterable:false, width:80  },
              { field: "Properties.AppointRetire", title: " ", filterable:false, width:100  }
            ],
            filterable: {
              mode: "row",
              operators: {
                       string: {
                            contains: "Contains"
                               }
                             }
            }, 
            toolbar: ["excel", "pdf", "search"],
           excel: {
                filterable: false
            },
            sortable: true,
            pageable: {
                        pageSizes: [10, 20, 50, "all"],
                        buttonCount: 15
           }
          });
        
 }


Georgi Denchev
Telerik team
 answered on 20 Sep 2021
0 answers
8 views
I have  kendo editor and kendo listview grouping controls ,  editor is working fine but after bind the data, listview group fiter is not working with this lib "https://kendo.cdn.telerik.com/2021.3.914/js/kendo.all.min.js" Please help on this issue.
kiran
Top achievements
Rank 1
 updated question on 18 Sep 2021
0 answers
5 views

Hello

We have an application where new kendo window opens from a hyper link on a child pop up from the parent window. when the new window is closed and the child pop up is closed , some of the buttons on the parent window does not work they just gets frozen. Please advise how can we fix this. I tried many options...

Note : the new window has a splitter, we used Kendo splitter.

When i click button, it gives " Uncaught TypeError: Cannot read properties of undefined" in the console

t
Top achievements
Rank 1
 updated question on 16 Sep 2021
1 answer
9 views
Hi,

The width of the dropdown list which appears when you click on the Kendo MultiSelect control is the same width as the multiselect control itself.
Is there a way to increase the dropdown width so items which are longer can be displayed on the same line?

P.S: i had implemented virtualization for multiselect
Dimitar
Telerik team
 answered on 16 Sep 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
Liu
Top achievements
Rank 1
Iron
Alex
Top achievements
Rank 1
Veteran
Iron
Iron
George C.
Top achievements
Rank 2
Iron
Veteran
Top users last month
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
Liu
Top achievements
Rank 1
Iron
Alex
Top achievements
Rank 1
Veteran
Iron
Iron
George C.
Top achievements
Rank 2
Iron
Veteran