Questions on Kendo UI for jQuery Forum

10 answers

5.1K+ views

Export to excel - remove HTML tags before excel generation

Is it possible to get hold of the text that gets generated when we do grid.saveAsExcel(), so that we can remove certain html tags from the output before the excel (xlsx file) gets generated.

We need to remove the html tags from the excel that gets generated.

I am attaching a sample excel file so that you can see what (html tags) i intend to remove

Grid

answered on 06 Jan 2022

0 answers

132 views

Is there a way to to use svg to diplay a log in the appbar?

This does not work: https://dojo.telerik.com/UNIJebUR

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="appbar"></div>
<script>
$("#appbar").kendoAppBar({
    items: [
        {
            type: "contentItem",
            template: "<span><input /><span>"
        },
        {
            type: "spacer"
        },
        {
            type: "contentItem",
            template: "<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>"
        },
    ]
});
</script>
</body>
</html>

AppBar

NavBar

asked on 06 Jan 2022

1 answer

195 views

Is it possible to get this format to work with a password field or text file ??

Is it possible to get this format to work with a password field? For example, if I wanted to be able to add hyphens to a private number but still keep it masked with asterisks so that as the user typed, it would appear as shown in the image?

MaskedTextBox

answered on 06 Jan 2022

0 answers

138 views

Server side paged groups with ajax jquery remote data end point

I've tried to get this working using this aspnetmvc-ajax sample code from telerik found here.

https://demos.telerik.com/kendo-ui/grid/grouppaging

I'm using jquery ajax restful api for the remote data endpoint and I am returning the response in the exact format as shown in the above example but it doesn't work.

After the grid loads, an "undefined" is displayed as the first row in the grid despite the data from the ajax data call returning the data in the exact same format as shown in the above example.

I also added the code for the sample into my project and I tried a local data source in order to rule out jquery ajax as remote api being the problem with the same response data format as the sample code to see if the server side group paging is anyway dependent on the datasource.type being aspnetmvc. In this case I also get the same error as seen in my jquery ajax grid with remote group paging.

Has anyone been able to get group paging for a grid using a custom function for the transport read (jquery ajax) configuration?

Can anyone confirm whether it should work for this use case? And does anyone have an example?

Thanks in advance and appreciate your help.

Best,

Don

Grid

updated question on 04 Jan 2022

1 answer

624 views

Customize hint Element when using rowReorder functionality on Grid

Is it possible for me to customize the hint Element during a row reorder operation using the kendo Grid rowReorder functionality?

Grid

answered on 04 Jan 2022

1 answer

950 views

Why e.model.isNew() is not a function ?

Hi everybody,

I post today because i have this code and my edit function return me "e.model.isNew() is not a function"... i don't know why ? :

$("#table-luminaire").kendoGrid({
          dataSource: {
            data: ares
          },
          editable: {
            confirmation: "blabla ?",
            mode: "incell"
          },
          toolbar:["excel", "create", "save"],
          sortable: true,
          columnMenu : true,
          resizable : true,
          pageable: {
              refresh: true,
              pageSizes: true,
              buttonCount: 5,
              pageSize: 20,
          },
          columns: [{
              field: "ID",
              title: "ID",
              hidden:true,
          }, {
              field: "CATEGORIE",
              title: "Catégorie",
              width: 135,
              editable: function() {return array_decode.includes("CATEGORIE");}
          }, {
              field: "CODE_INSEE",
              title: "Code INSEE",
              width: 140,
              editable: function() {return array_decode.includes("CODE_INSEE");}
          },
          { command: ["edit", "destroy"], title: "&nbsp;", width: "250px"}
          ],
          edit: function (e) {
              console.log(e)
            if (e.model.isNew()) {
                console.log('model')
            }
          },
          save: function(e) {
            console.log(e.values);
          },
          saveChanges: function(e) {
            console.log('ok save')
          },
          schema: {
            model: {
              id: "id"
            }
          },
        });

If someone have an idea ... Thank you in advance for your answers,

Erka

Grid

answered on 03 Jan 2022

4 answers

7.5K+ views

Minimum Width for Grid Columns

This seems to be a pretty good example, but unfortunately it doesn't work:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/apply-minimum-width-during-column-resize

Is this deprecated? The binding to the resizable-events doesn't seem to work.

Grid

answered on 31 Dec 2021

1 answer

148 views

Drawing Library/PDF with column-count > 1

Hello,

I have a problem using the drawing library for creating PDFs with blocks being styled with a column-count style sheet being set to something other than 1 - it seems as if the drawing library is erroneously taking into account the sum of of all columns height instead of the real height when placing the output in a PDF, and thus leaving lots of blank space on the pages.

A working example can be found at Kendo UI Snippet | Kendo UI Dojo (telerik.com) (based on the page templates example)

Is this a known problem, am I missing something or is there any way/workaround to fix this?

Thanks & kind regards,

Hermann

Drawing API

answered on 31 Dec 2021

1 answer

756 views

[Solved] Tooltip doesn't hide when other tooltip shown

I've got a scenario where a tooltip is not hiding when another tooltip is shown, and here is a dojo for reference.

If you move your mouse up and down the colors, the tooltips show and hide as they should. If you stop on a color, move the mouse right into the tooltip, then straight back out of the tooltip and back into the color for that tooltip, then move the mouse up or down over another color, the first tooltip doesn't hide. You can repeat this sequence for the other tooltips as well, resulting in multiple tooltips showing.

Here is a jam so you can see what I mean as well. You can't see the mouse move, but you can see the multiple tooltips.

ToolTip

answered on 31 Dec 2021

2 answers

221 views

Binding Gantt data source to local java-script array does not allow provide custom schema for data model.

Hello,
I used the following approach for binding Kendo Gantt data source to local java-script array.

var _dataSource = new kendo.data.GanttDataSource({

schema: {
model: {
id: "id",
fields: fieldsObject
}
},
transport: {
read: function (e) {
e.success(dataSourceArray );
},
create: function (e) {
if (e.data.models && e.data.models.length > 0) {
//...

}
}
else {
//...
}
},
update: function (e) {
if (e.data.models && e.data.models.length > 0) {
//...

}
}
else {
//...
}
},
destroy: function (e) {
if (e.data.models && e.data.models.length > 0) {
//...
}

}
else {
//...
}
},
change: function (e) {
if (e.action == "add" || e.action == "remove") {
//...
}
if ((e.action == "itemchange" || e.action == "remove") && (e.field == "percentComplete" || e.field == "start" || e.field == "end")) {

}
}
}
});

//Then Kendo Gantt is created

_kendoGantt = $("#gantt").kendoGantt({
toolbar: [
{ template: kendo.template($("#headerTemplate").html()) }
],
pdf: { fileName: $scope.selectedGantt },
dataSource: _dataSource,
dependencies: _dependencies, //also defined above in the code
columns: _leftCols, //also defined above in the code
views: [{ type: "day", selected: _ganttSettings.Timescale == "day" ? true : false }, { type: "week", selected: _ganttSettings.Timescale == "week" ? true : false },
{ type: "month", selected: _ganttSettings.Timescale == "month" ? true : false }, { type: "year", selected: _ganttSettings.Timescale == "year" ? true : false }],
listWidth: _listWidth,
showWorkDays: !_showWeekends,
dataBound: _onTaskDataBound,
moveStart: _onTaskMoveStart,
resizeStart: _onTaskMoveStart,
save: _onTaskSave,
remove: _onTaskRemove,
navigate: _onTaskNavigate,
add: _onTaskDependencyAdd,
change: _onTaskChange,
edit: _onTaskEdit,
height: _gHeight
});

function _onTaskEdit(e) {
if(e.task.id){
//....
}
};

This code worked perfectly in version of Kendo UI v2016.3.1118, but it does not work in version v2021.2.616.

Using this code in version v2021.2.616 does not display any tasks in Kendo Gantt.

If I bind data source to local java-script array directly in Kendo Gantt constructor (dataSource: dataSourceArray), it displays tasks, but task does not have valid "id" (it is null) in event _onTaskEdit (when I double click task for editing). In this case id field must have string value according to: id: { from: "id", type: "string", defaultValue: function () { return kendo.guid(); } }

Your examples in documentation do not show how to provide custom data source schema while binding to local java-script array.

How do I provide custom data source schema while binding to local java-script array and make code above working for version v2021.2.616?

Data Source

Gantt

answered on 30 Dec 2021