Questions on Kendo UI for jQuery Forum

1 answer

279 views

grid.setOptions error "Custom commands should have name specified"

Hi Support

Back in 2016, I asked the same question: https://www.telerik.com/forums/grid-setoptions-error-custom-commands-should-have-name-specified (but must have solvedtheissueanotherway).

Now, I have the same requirement (to persist the state of a grid: https://demos.telerik.com/kendo-ui/grid/persist-state)

Using Kendo UI v2021.3.1216, I still get the same error when I call grid.setOptions: "Custom commands should have name specified".

I have changed the "Persist state" grid demo (https://demos.telerik.com/kendo-ui/grid/persist-state) by just adding the following code to the grid setup:

toolbar: [
{ template: kendo.template($("#toolbar-template").html()) }
],

The toolbar template is simply:

<script id="toolbar-template" type="text/x-kendo-template">
x
</script>

The dojo: https://dojo.telerik.com/@mortenma71/EgoYILeS/2

It seems that the persisting grid state with a toolbar template is not possible. The saved options has an empty toolbar (see screenshot)

Could you help?

Thanks.

/Morten

Grid

answered on 18 Feb 2022

1 answer

845 views

KendUI version 2014.1.416 compatibility with jQuery 3.6.0

Hello guys, I hope you are all well.

I have a question about the KendoUI version 2014.1.416 as I am facing some issues with the kendoSortable() function.

At the moment, the jQuery version is the latest (3.6.0) and I have also placed the latest jQuery Migrate version (3.2.2) but the .data("kendoGrid") function always returns an "undefined" result, meaning that it does not find the actual grid.

Do you happen to know whether the problem is the latest jQuery version or the syntax to get the kendoGrid?

Below I have placed the JS line of code to fetch the grid.

- code sample: var grid = e.detailRow.find(".js-filter-conditions-grid").data("kendoGrid");

Regards,

R

Application

Data Source

Grid

answered on 18 Feb 2022

3 answers

379 views

SetOptions of floatingActionButton

Hi

I use a set of floating action buttons where one of the buttons is used to show / hide the whole button set. As soon as I hide the buttons, this "toggle" button is repositioned to the bottom of the page which works very well by setting the alignOffset value with setOptions.

My problem is now, that the button seems to loose every other css style I've applied directly to the div that becomes the button. Hence I loose the assigned color/background-color and z-index.

Is this a bug or do I miss anything?

Regards

Alex

FloatingActionButton

answered on 17 Feb 2022

0 answers

327 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.3K+ 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

85 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.2K+ 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.6K+ 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

129 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

229 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