Questions on Kendo UI for jQuery Forum

1 answer

469 views

jQuery Grid Detail Template not working when kendo grid is re-generated

We have a .Net Core 6 application.

We are using the "jQuery Grid Detail Template" to display a customer's orders in a KendoGrid. Then when the detail template icon is clicked, we fetch the order details and show those rows in another sub kendoGrid.

We are following this example: https://demos.telerik.com/kendo-ui/grid/detailtemplate

We can get this working for our situation, but only for the first customer that is searched.

When a different customer orders are searched, and the detail icon is clicked, we get an error ("Uncaught TypeError: Cannot convert undefined or null to object").

Our UI uses the "kendo-dropdownlist" for customer names, and a "Html.Kendo().DatePicker()" for the From/To date ranges. And a "Html.Kendo().DropDownButton()" for a Search button.

This is what happens when the form is first loaded:
1: user selects customer + date range then clicks [Search]
2: the javascript function "GetMyData()" is called
3: The "$("#myOrders-grid").kendoGrid" is populated correctly
4: when any details icon is clicked, the "detailInit: detailInit" function is called, the detail data is fetched and displayed correctly in sub grid.

PROBLEM occurs here
5: user selects a different customer and clicks [Search]
6: The "$("#myOrders-grid").kendoGrid" is populated correctly
7: BUT when any details icon is clicked, this error is generated: "Uncaught TypeError: Cannot convert undefined or null to object"
the "detailInit: detailInit" function is never triggered
8: HOWEVER: If I select the original customer and original date range from dropdown and press [Search], the details icon works again, but only for the original customer and date range.

It seems like something remembers only the original customer's data. Do I have to clear something from memory?

What am I doing wrong below?

//My pseudo code 
function GetMyData(e) {
	var formattedStartDate = dateFns.parse(datefrom.value, 'YYYY-MM-DD hh:mm:ss')
	var formattedEndDate = dateFns.parse(dateto.value, 'YYYY-MM-DD hh:mm:ss')
	var myUrlString = '@Url.Action("GetOrders", "MyController")'
	var payloadContent = {
		"customerId": parseInt(customerDropdown.value),
		"startDate":  formattedStartDate,
		"endDate": formattedEndDate
		}
	$("#myOrders-grid").kendoGrid({
		dataSource: {
			transport: {
				read: function(options) {
					axios.post(myUrlString, payloadContent).then(function (response) {
						options.success(response.data);
					})
				}
			},
			pageSize: 10,
			sort: { field: "eventStart", dir: "asc" },
			schema: {
				model: {
					fields: {
						eventStart: { type: "date" },
						...ETC
					}
				}
			}
		},
		detailTemplate: kendo.template($("#template-details").html()),
		detailInit: detailInit,
		height: 600,
		sortable: true,
		pageable: {
			numeric: true
		},
		columns: [
			{ field: "eventStart", title: "Event Start", format: "{0:MM/dd/yyyy}", width: "6%" },
			...ETC
		],
		excel: {
			fileName: "orders-data.xlsx",
			allPages: true,
			filterable: true
		},
	})
}

function detailInit(e) {
	var detailRow = e.detailRow;
	var detailsUrlString = '@Url.Action("GetDetails", "MyController")'
	var payloadContent = {
		"customerID": e.data.custId,
		"orderID":  e.data.orderid
		}

	detailRow.find(".detailTabstrip").kendoTabStrip({
		animation: {
			open: { effects: "fadeIn" }
		}
	});

	detailRow.find(".details").kendoGrid({
		dataSource: {
			transport: {
					read: function(options) {
						axios.post(detailsUrlString, payloadContent).then(function (response) {
							options.success(response.data);
						})
					}
				},

			pageSize: 10,
			sort: { field: "orderID", dir: "asc" },
			schema: {
				model: {
					fields: {
						description: { type: "string" },
						...ETC
					}
				}
			},
		},
		scrollable: false,
		sortable: true,
		height: 250,
		pageable: true,
		columns: [
			{ field: "description", title:"Description" },
			...ETC
		]
	});
}

<script type="text/javascript" id="template-details">
        <div class="detailTabstrip">
            <ul>
                <li class="k-active">
                    Order Details
                </li>
                <li>
                    Customer Details
                </li>
            </ul>
            <div>
                <div class="details"></div>
            </div>
            <div>
                <div class='customer-details'>
                    <h3>Customer details will go here later</h3>
                </div>
            </div>
        </div>
</script>

Grid

Templates

answered on 14 Nov 2022

1 answer

683 views

Is there a way to declare a databound function for kendo grid inside an another grid?

I want to resize my grid that inside another grid. These grids are hierarchical. I wrote something for that but this works for second click. The processes I mentioned are seen in the pictures (firstclick, secondclick). the red circle shows extand button.

The js code block I wrote for solution but it does not work properly:

// The code inside the databound function of master grid
    $("#SiparisListeleGrid td a.k-icon").click(function () { // onclick for a element that opens second grid inside the row
        if ($(this).hasClass("k-i-expand")) { // if the grid is expand

            // uid of tr element
            var tr_UID = $(this).parents("tr").data("uid");

            // master grid
            var ustGrid = $("#SiparisListeleGrid").data("kendoGrid");

            $(ustGrid.dataSource.data()).each(function (i, item) {
                if (item.uid == tr_UID) {
                    var altGrid = $("#Grid_SiparisSatir_" + item.SipUstID).data("kendoGrid");
                    var rowCount = altGrid.dataSource.view().length;

                    $("#Grid_SiparisSatir_" + item.SipUstID).attr("style", "height:" + (rowCount * 40 + 125) + "px;");

                    $("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content").css("height", (rowCount * 40));

                    $("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content-locked").css("height", (rowCount * 40));
                }
            });
        }
    });
    // This code block only works on second clicking the expan button.
    // Does not recognize the second grid when clicked for the firs time
    // Should I use databound for second grid? However I do not know how can I do that.

Data Source

Grid

Hierarchical Data Source

Templates

answered on 13 Oct 2022

1 answer

103 views

Split data by delimiter and format hyperlink

{name: “coy a, coy b, coy c”, id:”1,2,3”}

expected result in kendo grid

<a href=“/company/detail/1”>coy a</a>,
<a href=“/company/detail/2”>coy b</a>, 
<a href=“/company/detail/3”>coy c</a>

Grid

Templates

answered on 28 Jul 2022

3 answers

95 views

Kendo filter field dropdown not loading.

I have a filter on a datasource which in return updates a grid. The following are the code to filter and its' template handler.

The problem with this is that, I can load the categories at first when I'm creating the filters. But when I save and reload the filter from local storage, the category dropdown does not load. Please help me with this. It loads up only on a fresh filter.

Thanks in advance.

@(Html.Kendo().Filter<Lovely>()
                                .Name("OrgFilter")
                                .ApplyButton(true)
                                .ExpressionPreview(true)
                                .DataSource("DataSource")
                                .Fields(f =>
                                {
                                    f.Add(p=>p.OrgName).Label("Organization");
                                    f.Add(p=>p.CategoryId).Label("Category").EditorTemplateHandler("CategoryDropdown");
                                    f.Add(p=>p.AsAtDate).Label("As At Date");
                                }))

<script>
function CategoryDropdown(container, options) {
        $('<input data-bind="value: value" name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataTextField: "CategoryId",
                dataValueField: "CategoryId",
                dataSource: @Json.Serialize(ViewData["Catogories"])
            });
    }
</script>

answered on 30 Jun 2022

1 answer

321 views

KendoUi Font icons are not loading

Actually we have kendoUi in angularjs project. which ic giving error in developer console like server not responding 404 error for webcomponentsicon.ttf and webcomponentsicon.woff. because of this icons are not loading. can anyone please help me to clear this issue

Hierarchical Data Source

answered on 15 Jun 2022

1 answer

89 views

unable to generate pdf in iphone 11. we are using kendo pdf export saveAs method

We are not able to generate pdf in phone 11 safari browser. we are using kendo pdf export (save As method). we are not getting any error in console.

answered on 28 Feb 2022

0 answers

166 views

Kendo Grid Invalid template error for Dynamic Object dataSource

Hi

I am kinda stuck while trying to populate my Kendo Grid using Dynamic data list (List<ExapndoObject>).

I am working on ASP.NET Core MVC project and My Page Model code is successfully creating a list of data with Dynamic columns and values using the following code:

Page Model Code:

public async Task<IActionResult> OnGetGridDataAsync(string startDate, string endDate)
        {
             //Populating Dynamic List
            var dataList = new List<System.Dynamic.ExpandoObject>();
     
            var apiData = API call for data

            foreach (var data in apiData)
            {
                dynamic newObject = new ExpandoObject();
                newObject.Student = data.StudentName; //Student Column

                var attendanceDays = API call for data
                foreach (var attendanceDay in attendanceDays)
                {
                    if (attendanceDay.Date >= DateTime.Parse(startDate) && attendanceDay.Date <= DateTime.Parse(endDate))
                    {
                        var attendanceSessionAttend = API call for data

                        var attendanceSession = API call for data
                        var SessionName = attendanceSession.Name + " (" + attendanceDay.Date.ToString("dd MMM") + ")";

                        AttendanceStatusDto attendanceStatus = null;
                        if (attendanceSessionAttend[0].AttendanceStatusId != null)
                        {
                            attendanceStatus = API call for data
                            AddProperty(newObject, SessionName, attendanceStatus.Code);
                        }
                        else
                        {
                            AddProperty(newObject, SessionName, "");
                        }

                    }
                }

                dataList.Add(newObject);
            }

            return new JsonResult(dataList);
        }

        private static void AddProperty(dynamic attendanceObject, string columnName, string columnValue)
        {
            var attendanceObjectDict = attendanceObject as IDictionary<string, object>;
            if(attendanceObjectDict.ContainsKey(columnName))
            {
                attendanceObjectDict[columnName] = columnValue;
            }
            else
            {
                columnName = columnName.Replace(" ",String.Empty);
                attendanceObjectDict.Add(columnName, columnValue);
            }
        }

JQuery code:

function populateGrid() {
        $.ajax({
            type: "GET",
            url: '?handler=GridDate',
            data: {
                'startDate': firstday.toDateString(),
                'endDate': lastday.toDateString()
            },
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                // notify the data source that the request succeeded
                console.log(result);
                generateGrid(result);
            },
            error: function (result) {
                // notify the data source that the request failed
                options.error(result);
            }
        });
    }

function generateGrid(response) {
               
        var gridOptions = {
            dataSource: response
        };

        $("#AttendanceTable").kendoGrid(gridOptions);

       var grid = $("#AttendanceTable").data("kendoGrid");
    };

when running the project, It is showing only the Student Column but other dynamic columns are showing 'Invalid Template error'

Invalid template:'<tr class="k-master-row" data-uid="#=data.uid#" role='row'><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['Student'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['Student'] ? '<span class="k-dirty"></span>' : '' ##:data.Student==null?'':data.Student#</td><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['MondaySession(28Feb)'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['MondaySession(28Feb)'] ? '<span class="k-dirty"></span>' : '' ##:data.MondaySession(28Feb)==null?'':data.MondaySession(28Feb)#</td></tr>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<tr class="k-master-row" data-uid="'+(data.uid)+'" role=\'row\'><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['Student'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['Student'] ? '<span class="k-dirty"></span>' : '' )+''+$kendoHtmlEncode(data.Student==null?'':data.Student)+'</td><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['MondaySession(28Feb)'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['MondaySession(28Feb)'] ? '<span class="k-dirty"></span>' : '' )+''+$kendoHtmlEncode(data.MondaySession(28Feb)==null?'':data.MondaySession(28Feb))+'</td></tr>';}return $kendoOutput;'

Below is the console view of the page with data:

Please help me out.

Data Source

Grid

Templates

updated question on 16 Feb 2022

1 answer

237 views

Kendo grid sort not working when the array contents are observable

Hi,
I have an observable array of observables which is linked to a kendo grid as datainput. I am trying to sort it by clicking on column header. I have made the sortable : true. But the issue is when the array is

self.array = ko.observableArray([{ Cabin: 'eco' }, { Cabin: 'taper' }]); The sorting works

But If the array is
self.AllocArray = ko.observableArray([{ Cabin: ko.observable('eco') }, { Cabin: ko.observable('taper') }]); then the sorting doesn't work.

Is there any possible solution around this?

Many thanks,

Jason

answered on 23 Nov 2021

2 answers

1.4K+ views

Using field value in column grid template

Hi,

within the columns definition of my grid I want to be able to call a function as the template.

currently I have:

 {field: 'recommended', title: 'Recommended', template: '# if(recommended)' + '{# <span class=\"glyphicon glyphicon-ok\"></span> #}' + 'else{# <span class=\"glyphicon glyphicon-ok\"></span> #}#'},

and I would like to have

 {field: 'recommended', title: 'Recommended', template: generateFlagTemplate(recommendedFieldValue)},

defining the function as

function generateFlagTemplate(field){
    return kendo.template("# if (field)" + "{# <span class=\"glyphicon glyphicon-ok text-success\"></span> #}" + "else {# <span class=\"glyphicon glyphicon-remove text-grey\"></span> #}#");
}

how can I pass the 'recommended' field value to the function?

I would like to have the function because the same template will be used in different places and saves me from having to duplicate my code.

thanks

Grid

Templates

answered on 02 Nov 2021

1 answer

354 views

Kendo Grid Group Header Template Breaks During Layout Editing

This was my original reference for aligning the aggregates in their respective columns in the groupHeaderTemplate.

https://docs.telerik.com/kendo-ui/knowledge-base/grid-align-group-header-with-cells

A requirement is to have the grid have an editable layout, i.e., hide/show columns, be grouped differently, rearrange columns, etc.

By default, the grid is working properly, following the reference above.

But once you do edit the layout (e.g., hiding the tasksCompleted column) of the grid, the groupHeaderTemplate no longer works properly. As is expected because the column or table td's are defined and fixed.