Telerik Forums
Kendo UI for jQuery Forum
3 answers
271 views

When using a custom optionLabelTemplate and valueTemplate with Font Awesome dual tone icons it seems we need to set the display css class to inline-flex to keep the icon from separating (Kendo UI v2020.3.1021 in Chrome v88.0.4324.104).

$("#dropDownList").kendoDropDownList({
  optionLabel: "Select One"
  , template: "<i class=\"#=icon# mr-1\" style=\"font-size: 25px\"></i>#=name#"
  , optionLabelTemplate: "<i class=\"fad fa-hard-hat mr-1\" style=\"display: inline-flex\"></i>Select One"
  , valueTemplate: "<i class=\"#=icon# mr-1\" style=\"display: inline-flex\"></i>#=name#"
  ...
});
Misho
Telerik team
 answered on 31 Mar 2021
2 answers
2.1K+ views

 

 

I am trying to export data from my grid to Excel. 

For my button I am using the following code, as I don't have the buttons in a toolbar.

 

<span>
<button id="btnExport">Export to Excel</button>
<script> $("#btnExport").kendoButton({
click: function() { 
$("#grid").data("kendoGrid").saveAsExcel() 

})</script>
</span>

and on the grid I have the following (truncated)

// Grid
grid = $("#grid").kendoGrid( {
      excel:{
          fileName: "PC Inventory All.xlsx",
          filterable:true,
          allPages:false
        },

The error message that I receive is "uncaught Error: JSZip not found."

I have included this file, or at least I thought that I have. I am running Xpages (JSP in essence) and my theme includes the following resources:

 

 <resource>
 <content-type>application/x-javascript</content-type>
<href>/.ibmxspres/domino/KendoUI/js/jquery.min.js</href>
</resource>

 <resource>
 <content-type>application/x-javascript</content-type>
<href>/.ibmxspres/domino/KendoUI/js/jszip.min.js</href>
</resource>

<resource>
 <content-type>application/x-javascript</content-type>
 <href>/.ibmxspres/domino/KendoUI/js/kendo.all.min.js</href>
</resource>

 <resource>
 <content-type>text/css</content-type>
<href>/.ibmxspres/domino/KendoUI/styles/kendo.common.min.css</href>
</resource>

 <resource>
 <content-type>text/css</content-type>
 <href>/.ibmxspres/domino/KendoUI/styles/kendo.blueopal.min.css</href>
</resource>

I see all of these resources in the Sources tab of Chrome Dev tools, but I also see several multiple defines - one of which seems to be doing something with a dojo library. 

I am at a loss, any help would be much appreciated.

 

Tarek
Top achievements
Rank 1
 answered on 31 Mar 2021
2 answers
101 views

Hi

 

I use an master detail Grid..I need to change detail data table text color conditionnaly to master row ?

Could you help me

Thanks

Anton Mironov
Telerik team
 answered on 30 Mar 2021
1 answer
118 views

Hi

 

I have found this sample in NET version https://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation#source-code

 Do you have same for AngularJS or Jquery ?

Regards

 

 

Mihaela
Telerik team
 answered on 30 Mar 2021
1 answer
236 views

I have a grid which looks like this:

@(Html.Kendo().Grid()
    .Columns(columns =>
    {
        foreach (var fieldId in listOfFieldIds)
        {
            columns.Bound(o => o.DictionaryOfFieldIdsToValues[id].Value);
        }
    }
    .DataSource(dataSource =>
    {
        dataSource.SignalR()
            .Filter(filter =>
            {
                filter.Add(o => o.DictionaryOfFieldIdsToValues["MyId123"].Value).Contains("hello world");
            });
        })
    });

 

Programmatically setting the filter is not working as expected:

1) the column which corresponds to MyId123 does not get the filter in its header menu

2) on inspecting the filter in parameterMap, the filter has been applied as a filter collection, like so

{logic: "and", filters: Array(1)}
    filters: Array(1)
    0:
        filters: Array(1)
        0: {field: "DictionaryOfFieldIdsToValues["MyId123"].Value", operator: "contains", value: "hello world"}
        length: 1
    logic: "and"
    length: 1

When a user filters the column themselves it works as expected (parameterMap shows this)

{logic: "and", filters: Array(1)}
    0: {field: "DictionaryOfFieldIdsToValues["MyId123"].Value", operator: "contains", value: "hello world"}
    length: 1
    logic: "and"

 

Tsvetomir
Telerik team
 answered on 30 Mar 2021
1 answer
401 views

I have KendoDatePickers where it works fine if user clicks on the calendar control and selects the date.

 

But I also want that user can copy-paste the date format and it gets validated. Currently it is returning null for the value being copied like the attached image.

Is there any way I can validate the date?

Below is the JavaScript code I am using to get the values. 

Thanks.

var oEndDateAfter = $("#EndDateAfter").data("kendoDatePicker").value();<br>
var oEndDateBefore = $("#EndDateBefore").data("kendoDatePicker").value();
Tsvetomir
Telerik team
 answered on 30 Mar 2021
3 answers
228 views

Hi,

Two questions in one:

1. What is the proper way to determine the selection mode in a grid?

Right now, I use this code in TypeScript:

isMultipleSelection(grid: kendo.ui.Grid): boolean {
    // @ts-ignore
    if (grid && grid.selectable) {
        // @ts-ignore
        return grid.selectable.options.multiple;
    }
    return false;
}

Note how I must use ts-ignore, or else I get "Property 'selectable' does not exist on type 'Grid'."

In other words, Grid.selectable does not seem to be a "public" property, also I dislike having to use ts-ignore.

2. In general, is there a way to get access to the grid's current configuration?

 

Mihaela
Telerik team
 answered on 29 Mar 2021
1 answer
164 views

I've a kendo scheduler which displays meetings. I'm passing some additional parameter to the read action method like start date, end date and some Boolean parameters, to fetch data. There is an antiforgery token in the view. How do I pass the antiforgery token with additional parameters to scheduler read method.

@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.Activity>()
.Name("scheduler")
.Height(600)
.EventTemplateId("event-template")
.Views(views =>
{
    views.DayView();
    views.WeekView(week =>
    {
        week.Selected(true);
    });
    views.WorkWeekView();
    views.MonthView();
    views.AgendaView();
})
.Resources(resource =>
{
    resource.Add(m => m.Attendee)
    .Title("Attendee")
    .DataTextField("Text")
    .DataValueField("Value")
    .DataColorField("Color")
    .BindTo(new[] {
        new { Text = "Jason", Value = 1, Color = "#eaf8ff" },
        new { Text = "Maddie", Value = 2, Color = "#fdfdf4" }
    });
})
.DataSource(d => d
    .Model(m =>
    {
        m.Id(f => f.ID);
        m.Field(f => f.Title).DefaultValue("No title");
        m.Field(f => f.Attendee).DefaultValue(1);
    })
    .Read("Overview_Read", "Scheduler").Data("additionalData")
     
)
)
Stoyan
Telerik team
 answered on 29 Mar 2021
1 answer
2.0K+ views
I have a two column grid in which the second column contains html and can be quite tall.  As a result, the value in my first column is often hidden until I scroll down.  Is there a way that I can top-align the values in the first column?  I can find it it for spreadsheet columns but not grid.  Any assistance in this greatly appreciated.
Anton Mironov
Telerik team
 answered on 29 Mar 2021
2 answers
76 views

Hello,

I would like to call a component which contains only the custom edit template (to create a new task or edit) for my scheduler into the property "editable" of my scheduler.

I followed this solution but when I double click on the scheduler the edit window just displays "[Object object]"
The code of scheduler :

<kendo-scheduler id="scheduler"
  :data-source="localDataSource"
  :event-template="eventTemplate"
  :editable="{template:editTemplate}" //here
>

The import : 

import CustomEditTemplate from './customEditTemplate.vue';

The code of the method editTemplate() :

methods: {
 editTemplate: function(){
  return {
     template: Vue.component(CustomEditTemplate.name, CustomEditTemplate),
  }
 }
}

The code of the component that contains the custom template :

<template>
<div class="k-edit-form-container">
    <p> Titre <input type="text" /> </p>
    <p>
        <span >Start <input data-role="datetimepicker" name="start" /> </span>
        <span >End <input data-role="datetimepicker" name="end" /> </span>
    </p>
</div>
<script>
export default {
    name:"CustomEditTemplate",
}
</script>

 

I think the problem comes from the method editTemplate but I don't undestand why.

Anyone can help me ?

Thanks.

 

Ivan Danchev
Telerik team
 answered on 29 Mar 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?