Questions on Kendo UI for jQuery Forum

3 answers

913 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

576 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

117 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

457 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

475 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.7K+ 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

664 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

3 answers

1.5K+ views

Kendo UI Pro, Cannot read property 'extend' of undefined

Hi,

My web application uses Webpack and has been working great with Kendo UI (FREE.) This afternoon I pulled a copy of Kendo UI PRO (version: 2015.3.1005) from the private repository using bower and attempted to require("kendo-ui").

The project builds successfully with Webpack but unfortunately on loading the web application it registers the following error in the console:

"Uncaught TypeError: Cannot read property 'extend' of undefined"

I've narrowed down the error to the kendo.editor.min.js, individually adding ALL other component references and excluding editor works as expected. Inclusion of kendo.editor.min.js breaks the project.

The function call involved seems to be:

function(){!function(e,t){var n,i,r=window.kendo,o=r.ui.editor,a=o.Dom,s=e.extend,l="xx-small,x-small,small,medium,large,x-large,xx-large".split(",")....

General Discussions

answered on 30 Apr 2020