Questions on Kendo UI for jQuery Forum

0 answers

376 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

11 answers

1.4K+ views

Make others svg compatible with kendo pdf export

Is there a way to make other svg pompatible with the pdf export?

Your charts are rendered as svg element and they are supported, but other chart doesn't:

http://dojo.telerik.com/eMUPu

General Discussions

answered on 16 Feb 2022

1 answer

153 views

clicking on the bottom grid row scrolls the page

Hi Team,

we are using kendo grid jquery version - 2016.2.607, and when the no of records are more than the screen size, and if user clicks on the one of the bottom records, page scrolls.

this is unwanted behavior and we want to stop this behavior.

from the earlier threads I could find that it could be due to "navigatable:true" as kendo control calls "scrollIntoView()" and that causes the above mentioned issue.

can you please confirm the issue? also can you suggest any work around.

Grid

answered on 16 Feb 2022

1 answer

1.3K+ views

Text change event during inline editing

I have a request to make dynamic validation during typing the text in the grid cell and highlight the cell green when input is valid and red when not valid according to validation rules. Is there a way to do so with Kendo grid?

Grid

answered on 16 Feb 2022

1 answer

1.8K+ views

Search and Filter Grid Column At The Same Time

I have a grid here: Dojo

It has filtering on the columns and a search bar on top. When I use both the grid behaves unexpectedly.

For example, use the column filter to get only columns with names that contain "Doe".

This returns John and Jane Doe.

Then in the search box type "33"

This returns John Doe and Lois Lane. At the same time it highlights the filter icons for Name and Age.

If I click the filter icon for Name it says "contains 33". None of the names contain "33" though. I also don't have my previous "Doe" filter applied to the name column anymore.

I would expect that I would only have 1 result. John Doe because his last name is Doe and he is 33 years old.

I would also expect that the filter icon for age is not highlighted since I never filtered on that specific column.

If I do it the other way around, type "Doe" in the search first and then filter by "33" in the age I get the results I was expecting.

If I hide a column using the select columns button in the upper left while it is filtered, the filter stays applied even though the column is hidden.

How do I solve these issues?

Grid

answered on 16 Feb 2022

1 answer

167 views

Select Listview item by text

How do I select an item in my listview by the text displayed?

ListView

answered on 16 Feb 2022

0 answers

257 views

data-bind events is not working now in latest version

<script type="x-kendo/template" id="template">
    <button data-role="button"
            data-icon="add"
            data-bind="events: { click: onClickAddProject }"
            style="width: 180px">
        Click me
    </button>
</script>
<script>
    var vm = kendo.observable({
        baseURL: `projects`,
        onClickAddProject: function () {
            console.log("OK")
            alert("OK")
        }
    });
    kendo.bind($("#view"), vm);
</script>

Grid

asked on 16 Feb 2022

1 answer

313 views

Kendo UI Waterfall chart customization

Dear All,

I 'd created a waterfall with similar to waterfall chart given in the demo section. I would like to add a net time at the end of the chart with value starting from 0.

Please find here the dojo https://dojo.telerik.com/EgABaJiR/2

required output is like in the image below