Questions on Kendo UI for jQuery Forum

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>

DropDownList

Filter

Grid

Templates

answered on 30 Jun 2022

1 answer

63 views

How to add link to header text or bodyTemplate tile

I am trying to use tileLayout to display the names and logos of commonly used applications.

To achieve this, I would like to have the image in the body of the card to be clickable and redirect to its respective URL. Currently I am getting an Invalid Template error.

    <script id="header_@action.Id" type="text/x-kendo-template">

      <a href="@action.Url">@action.Label</a>

    </script>

Templates

TileLayout

answered on 20 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

0 answers

51 views

Template source not passing correct model to a partial

Hi!

I'm trying to render a a template that has a form in it, the form is attached to aa ActionViewModel and the source of this template is a list of this ActionViewModel from my MainViewModel. I want to add a list of nested forms as I click in "Include action" button

Here is my MainViewModel:

public class MainViewModel {
    (...)
    public List<ActionViewModel> ActionSet {get; set;} = new List<ActionViewModel>();
    (...)
}

Here is my main cshtml:

@model MainViewModel
(...)
<div class="row">
	<div class="col-md-4 form-group">
		<button class="k-button" title="Include action" data-bind="click: includeAction">
			<i class="icon-add-2"></i> Include action
		</button>
	</div>
</div>
<div data-template="template-action" data-bind="source: @(model).ActionSet"></div>
(...)

<script id="template-action" type="text/x-kendo-template">
	<div data-role="sgewexpandable" data-bind="value: this" style="margin-bottom: 10px;">
		<div data-role="sgewexpandableheader" class="text-center">
			<label data-bind="text: ActionType.Description"></label>
		</div>
		<div id="action#=uid#"
			 class="form-group">
			@Html.Partial("_IncludeAction.cshtml").ToDecoded()
		</div>
	</div>
</script>

The problem is:

My _IncludeAction.cshtml is using ActionViewModel as model, but when I try to load this page, I get an error saying it was passed MainViewModel to the partial, instead of ActionViewModel, can anybody help me?

Templates

asked on 07 Jun 2022

1 answer

92 views

Issue in kendo template anchor tag

{ field: 'id', 'template': '<a href="\#\crm\portfolio\detail/#= id #"><span class="glyphicon glyphicon-edit" title="View"></span></a>', editable: false, width: 25, title: "View" },

how to handle when # is there while navigation to other screen

Templates

answered on 11 Mar 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

1 answer

60 views

Tilelayout with script templates created in JS does not work in Firefox

Hello,

In the TileLayout DEMO (https://demos.telerik.com/kendo-ui/tilelayout/index, script tags are used in the html code.
We want to create the script tag with the javascript code.

For example in the demo page is written:
<script id="views-chart-template" type="text/x-kendo-template"> <div id="views-chart" style="height:100%; width:100%"></div> </script>

When replacing this html code by the JS code :
<script>
     var s = document.createElement('script');
      s.id = "visitors-chart-template";
      s.setAttribute('type', "text/x-kendo-template");

      var d = document.createElement('div');
      d.id = "visitors-chart";
      d.style = "height:100%; width:100%";
      s.appendChild(d);

      document.getElementById("example").appendChild(s);
</script>

Then this works in Chrome and Microsoft Edge, but not in Firefox.

The HTML page is added in the appendix. When opening this in Firefox, you will see that the "Visitors" dashboard card content is not filled in. When opening this HTML page with Chrome, then the "Visitors" dashboard is okay.

Thanks in advance.

Templates

TileLayout

answered on 23 Feb 2022

1 answer

146 views

Kendo DatePicker on Kendo Template

Hi,

How can i render a kendo datepicker inside a kendo script template? With the help of javascript?

here is a simple sample:

<script id="user-template" type="text/x-kendo-template">
<div id="column">
      <input id="datePicker1" />
</div>
</script>

Date/Time Pickers

Templates

answered on 22 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

210 views

Correct way to data-bind="click: someFun" in nested kendo template.

Hello Team,

I have a following scenario.

# for (var i = 0; i < data.length; i++) { #

<a href="\\#'" data-bind="click: onOuterLinkClick" data-index="#: i #">#: data[i].displayText #</a>

#}#

#= renderMyTemp(data[i].innerLinks) #

</script>

# for (var j = 0; j < data.length; j++) { #

<a href="\\#" data-bind="click: onInnerLinkClick"
data-index="#: j #">#: data[j].displayText #</a>
# } #

</script>

And my data which is getting passed to OuterTemplate, looks like following:

var data = [
{
"displayText" : "outer link abc",
"onOuterLinkClick" : () => {},
"innerLinks" : [
{
"displayText" : "inner link abc1",
"onInnerLinkClick" : () => {}
},
{
"displayText" : "inner link abc2",
"onInnerLinkClick" : () => {}
}
]
},
{
"displayText" : "outer link def",
"onOuterLinkClick" : () => {},
"innerLinks" : [
{
"displayText" : "inner link def1",
"onInnerLinkClick" : () => {}
},
{
"displayText" : "inner link def2",
"onInnerLinkClick" : () => {}
}
]
}

]

I pass the data as follows:

var template = kendo.template($('#OuterTemplate').html());

template(data);

Question : In above code, inside outerTemplate, onOuterLinkClick binding is working properly. But inside InnerTemplate, onInnerLinkClick binding is not working. can you please tell me, what's the correct way to do it?

Thanks & Rergards

Karan

Templates