Questions on Kendo UI for jQuery Forum

2 answers

137 views

I have a table of medical data, and a filter for each of the columns. I am trying to filter the autosuggestions of the second filter (the one for the description), so that it only suggests items which match the already input Area. If you check out this CodePen it probably makes more sense: https://codepen.io/thomasfarleigh/pen/dyYVbRd

If you enter 'Lip' into the Area input, you will see that the autosuggestions available for the Description are Neoplasm, and Tumor cells which is perfect, as they are two descriptions that match Lip. However if you enter 'Base of tongue' into the area input, the only autosuggestion you get is 'Something different' and not Neoplasm which is also a match for Base of tongue.

I'm really can't figure out why this is happening. Is the filter function already associating Neoplasm with Lip even though it matches both items? Would appreciate any guidance.

I am using this function which gets called by the dataBound event:
function filterAutoCompleteDataSource(e) {
var gridFilter = e.sender.dataSource.filter();
$("#grid").data("kendoGrid").thead.find('span[data-field="HistologyBehaviorDescription"] input[data-role="autocomplete"]').data().kendoAutoComplete.dataSource.filter(gridFilter);
}

Filter

answered on 05 May 2020

3 answers

958 views

How to show context menu targeting a child grid in a row detail?

I have a grid that has a detail template that contains a tabstrip which contains a further grid, along the lines of what is described in the previous forum post Grid with Tabstrip with Grid - Server Binding. This shows hierarchical data, with the child data being of the same type as the parent data.

I have a Kendo ContextMenu defined which I use to show a context menu with dynamically created and manipulated items on the rows in the parent grid. This works great. (The manipulation is enabling/disabling menu items based on flags hidden in the selected data rows). However I want to show the same context menu on the rows in the child grids, obviously the selected menu option should apply to the selected rows in the child grid.

How can I achieve this? Currently when I right click on a selected row in the child grid I still get the context menu for the parent grid. Is there a way to define a context menu but have the target set according to which grid selected rows the user right clicked on? I've got a simplified sample below that shows the approach I've used, I'm open to options or suggestions using either a Razor/server approach or using some javascript/jQuery magic.

001.@using (Html.BeginForm("Index", "Home"))

002.{

003. Html.Kendo()

004. .Grid(Model.Files)

005. .Name("ParentDataGrid")

006. .Columns(columns => {

007.

008. columns.Bound(df => df.ExternalId)

009. .HtmlAttributes(new { id = "externalId" })

010. .Hidden(true)

011. ;

012.

013. columns.Bound(df => df.OptionFlags)

014. .HtmlAttributes(new { id = "flags" })

015. .Hidden(true)

016. ;

017.

018. columns.Bound(df => df.Reference)

019. .Title("Reference")

020. ;

021.

022. columns.Bound(df => df.SourcedDate)

023. .Title("Submitted Date")

024. .Format("{0:dd/MM/yy}")

025. ;

026.

027. columns.Bound(df => df.FileName);

028. })

029.

030. .DetailTemplate(dt =>

031. Html.Kendo()

032. .TabStrip()

033. .Name("Tabstrip." + dt.Id)

034. .Items(items => {

035. items.Add()

036. .Text("Child files")

037. .Content(

038. @<text>

039. @(Html.Kendo()

040. .Grid<DataFile>()

041. .Name(string.Format("childFileGrid_{0}", dt.ExternalId))

042.

043. .Columns(columns => {

044.

columns.Bound(col => col.FileName)

045.

.Title("File name")

046.

;

047.

columns.Bound(col => col.SourcedDate)

048.

.Title("Created")

049.

.Format("{0:dd/MM/yy HH:mm:ss}")

050.

;

051.

})

052. .DataSource(ds => ds.Ajax()

053.

.Read(read => read.Action("GetChildFiles", "Home")

054.

.Data(string.Format(@"{{parentFileId:""{0}""}}", dt.Id))

055.

)

056.

)

057. )

058. @(

059. //this (attempted) context menu is not appearing at all

060. Html.Kendo()

061. .ContextMenu()

062. .Name(string.Format("childFileGridContextMenu_{0}", dt.ExternalId))

063. .Target(string.Format("#childFileGrid_{0}", dt.ExternalId))

064. .Orientation(ContextMenuOrientation.Vertical)

065. .Items(i => {

066.

i.Add().Text("Test entry");

067.

})

068. .Events(ev => {

069.

ev.Open("childFileContextMenuOpened");

070.

})

071. )

072. </text>

073. );

074.

075. })

076. .Render()

077. )

078. .DataSource(ds => ds

079. .Server()

080. .Model(model => model.Id(df => df.ExternalId))

081. )

082. .Render();

083.

084.

085.

086.

087.}

088.

089.

090. @(

091. //this is the parent grid context menu, this is the only context menu that is appearing

092. Html.Kendo()

093. .ContextMenu()

094. .Name("parentDataContextMenu")

095. .Target("#ParentDataGrid")

096. .Orientation(ContextMenuOrientation.Vertical)

097. .Items(items => items.Add())

098. .Events(ev => {

099. ev.Open("parentFileContextMenuOpened");

100. })

101. )

102.

103.<script>

104.

105. function parentFileContextMenuOpened(e) {

106. debugger;

107. var parentGrid = $("#ParentDataGrid").data("kendoGrid");

108. dataContextMenuOpened(e, parentGrid);

109. }

110.

111. function childFileContextMenuOpened(e) {

112. //currently this doesn't get called...

113. debugger;

114. var childGrid = $("#????????").data("kendoGrid");

115. dataContextMenuOpened(e, childGrid);

116. }

117.

118. function dataContextMenuOpened(e, targetGrid) {

119. if ($(e.item).is("li"))

120. return;

121.

122. //debugger;

123.

124. var selectedRows = targetGrid.select();

125.

126. var rejectRows = getCanRejectRows(selectedRows);

127. var approveRows = getCanApproveRows(selectedRows);

128. var unrejectRows = getCanUnrejectRows(selectedRows);

129. var canRejectRowsFlag = rejectRows.length > 0;

130. var canApproveRowsFlag = approveRows.length > 0;

131. var canUnrejectRowsFlag = unrejectRows.length > 0;

132.

133.

134. debugger;

135. var menuItems = [

136. {

137. text: "Status"

138. ,items: [

139. { text: "Reject", enabled: canRejectRowsFlag }

140. , { text: "Approve", enabled: canApproveRowsFlag }

141. , { text: "Unreject", enabled: canUnrejectRowsFlag }

142. ]

143. }

144. //, { cssClass: "k-separator", enabled: false }

145. ];

146.

147. //this.setOptions({ dataSource: menuItems });

148. e.sender.setOptions({ dataSource: menuItems });

149. }

150.

151.

152. function getRowsBySpecifiedFlag(selectedRows, flagValue) {

153. return selectedRows .find("#flags")

154. .filter( function (index) {

155. //debugger;

156. return (Number($(this).text()) & flagValue) == flagValue;

157. } );

158. }

159.

160. function getCanRejectRows(selectedRows) {

161. return getRowsBySpecifiedFlag(selectedRows, 1 << 2);

162. }

163.

164. function getCanApproveRows(selectedRows) {

165. return getRowsBySpecifiedFlag(selectedRows, 1);

166. }

167.

168. function getCanUnrejectRows(selectedRows) {

169. return getRowsBySpecifiedFlag(selectedRows, 1 << 3);

170. }

171.

172.</script>

Grid

answered on 04 May 2020

3 answers

617 views

Treelist createChild click event does not work

Hi,

I am trying to fire an event on "createChild" click. Below is my code sample.

I have an "Actions" column and there are 2 commands (Add Child and Delete) specified under this column. I want to call a javascript function when user clicks on "add child" image to set "id" to the newly created row. But the "createChild" function never gets executed. Is there something I am doing wrong here?

columns : [
{
title : "Actions",
headerAttributes : {
style : "text-align:center;"
},
command : [
{
name : "createChild",
text : " ",
className : "btn-details",
imageClass : "fas fa-folder-plus fa-lg",
click : createChild
},
{
name : "destroy",
text : " ",
className : "btn-details",
imageClass : "icon icon-delete"
}],
width : 120
},

TreeList

answered on 04 May 2020

1 answer

139 views

How to Allow zero's to Numerictext box Ex: -0098 and having spinners on textbox

my Requirement is NumericText Box should allow numbers as follow:- 009876543221 and having spinners to increase and decrease numbers and should allow negative numbers in my textbox

NumericTextBox

answered on 04 May 2020

9 answers

476 views

ColumnHide not working with row templates

When using row templates, if you programatically hide a column and then apply sorting the hidden state is maintained on the headers but gets lost on the data row.

Check out this fiddle showing the problem http://jsfiddle.net/Tups/3GWzZ/7/

Am I doing something wrong or is this a bug?

Thanks in advance.

Grid

answered on 01 May 2020

1 answer

510 views

Remove Rows working very slowly for more than 50 records

I am trying to delete more than 100 rows at a time from the grid.
I have a checkbox to select individual rows or a common checkbox to select all the rows on the page. The grid page size is 100.
The response from the server takes 3 secs but to delete it from the front end takes 15 secs i.e. the success function of ajax call.

I have also tried in the sucess function :-

$("#grid").find("input:checked").each(function () {
    var grid = $("#grid").data("kendoGrid");
    if (!$(this).parents('th').length) {
      grid.removeRow($(this).closest('tr'));
    }
  })
}

This also has lead to 1 sec improvement in performance.

var selectedIds = grid.selectedKeyNames(); // gets the selectedrows

var param = $.param({ selectedIds : selectedIds }, true);

$.ajax({

method: "POST",

contentType: "application/json; charset=utf-8",

dataType: "json",

url: "testurl/?" + param ,

success: function(response) {

console.log(response);

if (response.Success == true) {

selectedIds.forEach(function(selectedId) {

var item = grid.dataSource.get(selectedId);

delete grid._selectedIds[selectedId]

grid.dataSource.remove(item);

});

if (grid.dataSource.view().length == 0) {

var currentPage = grid.dataSource.page();

if (currentPage > 1) {

grid.dataSource.page(currentPage - 1);

}

} else {

alert("ERROR " + response.Error.Message);

}

},

failure: function(err) {

alert(err);

}

});

}

Grid

answered on 30 Apr 2020

20 answers

1.3K+ views

How to create a custom widget using TypeScript

Hello,

I'm trying to implement a custom widget using TypeScript. I will not inherit from another Widget.

Is there any sample or documentation?

This is my code:

module mycompany.MyWidgets {

"use strict";

export class SampleWidget extends kendo.ui.Widget {

constructor(element: Element, options?: MyInterfaces.ISampleOptions) {

super(element, options);

}

SampleWidget.fn = Sample.prototype;

$.extend(true, {}, SampleWidget.options);

(<ISampleOptions>SampleWidget.options).name = "SampleWidget";

kendo.ui.plugin(SampleWidget);

}

interface JQuery {

kendoSampleWidget(options?: ISampleOptions): JQuery

}

But the widget will not be used. Not using data-role nor jQuery selector $("#mydiv").kendoMyWidget();

Samples:

<div id='widgetcontainer' data-role='samplewidget'></div>

The widget constructor not will be called.

And:

<div id='widgetcontainer'></div>

window.onload = () => {

$('#eidgetcontainer').kendoSampleWidget();

};

A script error will be shown (kendoSampleWidget is not a function)

What's the correct way?

Regards

Ralf

General Discussions

answered on 30 Apr 2020

3 answers

1.2K+ views

Prevent Edit Popup from Closing after Saved Successfully

After user saved the data in Popup, I want to prevent it from closing so user can adjust the data a little bit and then saved again many times.

How can I do that? Thanks.

Grid

answered on 30 Apr 2020

1 answer

6.9K+ views

Kendo Grid Filter Date Column with format

Kendo Grid Filter Date Column with format:

Hello,

I have a kendo grid with a date column

I'd like to create a filter for this column

The fitler would be a calendar (datepicker)

The Back-end returns this date format: "2018-11-07T00: 00: 00.000"

Then the date will be converted into the column template

-------------------------------------------------------------------------------

Column of grid:

field: 'dateA', title:'"Date"',width:175, template: kendo.template($('[id=myTemplate]').html()),format: '{0:"dd-MM-yyyy "}',filterable: {ui: 'datepicker'}},"

-----------------------------------------------------

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

#if(!Utils.isNullOrUndefined(dateA)){#

#:kendo.toString(kendo.parseDate(dateA, "yyyy-MM-ddTHH:mm:ss"), "dd-MM-yyyy")#

#}else{#

-

#}#

</script>

The filter does not work.

I'd like to filter date with this format " dd-MM-yyyy" using calendar widget

How can I solve this problem?

Grid

answered on 30 Apr 2020

12 answers

720 views

SharePoint Framework Webpart with Kendo UI and AngularJS defined as external

Hi,

I'm developing an SharePoint Framework webpart with Kendo UI and AngularJS. Kendo UI requires jQuery before AngularJS. As I want to develop multiple webparts with AngularJS and Kendo UI I decided to reference AngularJS and Kendo UI from external cdns.

This is the externals section in my config.json:

"externals": {

"jquery": {

"path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js",

"globalName": "jquery"

},

"angular": {

"path": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js",

"globalName": "angular",

"globalDependencies": [

"jquery"

]

},

"kendo": {

"path": "https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js",

"globalName": "kendo",

"globalDependencies": [

"jquery",

"angular"

]

}

},

I load AngularJS and Kendo UI in my Webpart.ts file:

import * as angular from "angular";

import "kendo";

My Angular app is working and the kendo.all.min.js file is loaded. I try to load the Kendo module like this:

angular.module("TestExternalWebpart", [ "kendo.directives" ]);

I get the following error from AngularJS:

Module 'kendo.directives'

is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I've already tried to load Kendo with the following code in my webpart but I get same error:

import * as angular from "angular";

require("kendo");

How can I load Kendo UI from external cdn in a SPFx webpart? I've also created a sample on GitHub which produces the same error: https://github.com/jbgeesink/SPFx/tree/master/ExternalWebpart

Thanks!

General Discussions

answered on 30 Apr 2020