Questions on Kendo UI for jQuery Forum

2 answers

4.0K+ views

Hello

I'm using a dialog widget. By default the dialog closes on clicking on any defined action buttons. I would like to prevent that and close the dialog programmatically. How can I set the defined action buttons to not close after clicking on them?

Regards

Dialog

answered on 22 May 2018

2 answers

155 views

Custom Downloader

Is the custom download builder still being updated for the R2 2018 update? I'd like to add DropDownTree to my custom bundle but the list of components is empty for 2018.2.516. CDN seems to be updated as I can navigate manually to kendo.dropdowntree.min.js

General Discussions

answered on 22 May 2018

1 answer

894 views

Kendo UI Grid: update a group when row is drag and dropped in different group

For the life of me, I cannot find out how to update a row's group when I'm using drag and drop to drop a row from one group to another.
Here is my grid's schema:

//Defines grid of main Kendo grid for Questions

$scope.questionsDataSource = new kendo.data.DataSource({

autoSync: true,

schema: {

model: {

fields: {

GroupId: { type: "int", editable: false },

GroupName: { type: "string", editable: false, title: "Group" },

GroupSortOrder: { type: "int", editable: false },

Id: { type: "int", editable: false },

Text: { type: "string", editable: true },

AnswerTypeLU: { type: "int", editable: false },

RowNumber: { type: "int", editable: false },

IsRequired: { type: "bool", editable: false },

IsHidden: { type: "bool", editable: false },

AllowNotes: { type: "bool", editable: false },

AllowAttachFiles: { type: "bool", editable: false },

Special: { type: "string", editable: false },

Response: { type: "string", editable: false },

AnswerId: { type: "int", editable: false },

AnswerValue: { type: "string", editable: false },

CorrectAnswer: { type: "bool", editable: false },

AnswerBitValue: { type: "int", editable: false },

AnswerArray: { type: "string", editable: false },

}

},

//This allows the Kendo grid to group questions based on the group they are in

group: {

field: "GroupName"

},

//Sets default sort order for table. Current settings sorts by row and number

sort: [ { field: "RowNumber", dir: "asc" }]

});

Here is my grid:

$scope.questionsGrid = {

dataSource: $scope.questionsDataSource,

scrollable: false,

sortable: true,

selectable: 'multiple',

resizable: true,

persistSelection: true,

filterable: true,

reorderable: true,

editable: false,

columnMenu: true,

excel: {

fileName: "questionnaire.xlsx",

allPages: true,

proxyURL: "/Common/FileHandlers/KendoSaveFile.aspx"

},

toolbar: kendo.template('<div class="toolbar">' +

'<a type="button" id="questionsGridExport" class="btn btn-default k-button-icontext k-grid-Export pull-right"><span class="k-icon k-i-excel"></span>Export to Excel</a>'

+

'</div>'),

dataBound: function (e) {

$scope.dataBound(e);

},

columns: [ //Add, remove, or customize kendo columns here

////{ field: "GroupName", template: "#=GroupName#", groupHeaderTemplate: "Group: #=value#" },

//{ title: '<input onclick=\'selectAll(this)\' type=\'checkbox\' />', template: "<input class='checkbox' type='checkbox' />", width: "30px" },

{ field: "RowNumber", title: "#", width: "10px" },

{

field: "Text", title: "Question",

groupHeaderTemplate: "Name: #:count#",

template:

//Quick Kendo Tip: 'dataItem' is key for plugging in data

//These 3 rows add icons for if the question is required, notes are allowed, and if attach files are allowed

"<i ng-show='questionAddon(dataItem.IsRequired)' style='color:red; float:right;' class='fa fa-asterisk addon pull-right;'></i>"

+

"<i ng-show='questionAddon(dataItem.AllowNotes)' style='color:orange; float:right;' class='icon icon-note addon'></i>" +

"<i ng-show='questionAddon(dataItem.AllowAttachFiles)' style='color:dodgerblue; float:right;' class='icon  icon-cloud-upload addon'></i>"

+

"<i ng-show='questionAddon(dataItem.MultiFileUpload)' style='color:purple; float:right;' class='fa fa-copy addon'></i>" +

"#: Text #"

//Kendo template function overides anything that would normally show in the 'field'. So you need to have '#: fieldName #' included in the template to show the field data

},

{ field: "IsRequired", title: "Required", template: "{{Is_Required[dataItem.IsRequired]}}" },

{ field: "AnswerValue", title: "Answer" },

{ field: "AnswerTypeLU", title: "Type", template: "{{AnswerTypeLUCodes[dataItem.AnswerTypeLU]}}" },

{

title: "Edit",

template:

"<button class='btn btn-default' data-target='.edit-question-modal' ng-click='editQuestion(dataItem)' data-toggle='modal' style='margin:0px; padding:2px 5px 2px 5px;'><i class='fa fa-pencil' title='Edit' style='margin-right:5px;'></i>Edit</button>"

,

width: "30px",

},

{ field: "questionId", hidden: true, title: "Id", template: "{{dataItem.Id}}" },

]

}

And this is the "change" event function. I would have thought there would be something in the "e" (event parameter) of the change event that tells me the new group I'm dropping this row into. That's all I need to know and I can do the rest:

$scope.sortableOptions = { //This needs it's own Kendo sortable wrapper to make the table sortable in the HTML doc

filter: ".k-grid tr[data-uid]",

//cursor: "move",

placeholder: function (element) {

return element

.clone()

.removeAttr("uid")

.addClass("k-state-hover")

.css("opacity", 0.65);

},

container: ".k-grid tbody",

change: function (e) {

var grid = $scope.questionsGrid;

var oldIndex = e.oldIndex;

var newIndex = e.newIndex;

var dataItem = grid.dataSource.getByUid(e.item.data("uid"));

// reorder the datasource

if (newIndex != oldIndex) {

grid.dataSource.remove(dataItem);

grid.dataSource.insert(newIndex, dataItem);

}

var droppedQuestions = $.grep($scope.questionnaire.FlatQuestions, function (data, index) {

return dataItem.Id === data.Id;

});

var questiontoUpdate = droppedQuestions[0];

questiontoUpdate.SortOrder = newIndex;

questiontoUpdate.RowNumber = newIndex + 1;

var questionsGrid = $("#questionsGrid").data("kendoGrid");

var data = questionsGrid.dataSource.data();

var totalNumber = data.length;

var csv_sorted_questioIds = "";

var currentGroupId = null;

var currentGroupName = "";

var currentGroupSortOrder = 0;

var needToSaveQuestion = false;

// get the list of questionIds in the order we want

for (var i = 0; i < totalNumber; i++) {

var currentDataItem = data[i];

// get the group info of the current data item

currentGroupId = currentDataItem.GroupId;

currentGroupName = currentDataItem.GroupName;

currentGroupSortOrder = currentDataItem.GroupSortOrder;

if (csv_sorted_questioIds === "") {

csv_sorted_questioIds = currentDataItem.Id.toString();

}

else {

csv_sorted_questioIds += "," + currentDataItem.Id.toString();

}

if (newIndex === i && questiontoUpdate.GroupId !== currentGroupId) {

// update the row with the new group info

questiontoUpdate.GroupId = currentGroupId;

questiontoUpdate.GroupName = currentGroupName;

questiontoUpdate.GroupSortOrder = currentGroupSortOrder;

needToSaveQuestion = true;

}

$scope.saveQuestionSortOrder($scope.clientData.EventId, $scope.clientData.QuestionnaireId, $scope.questionnaire.HostCompanyId, $scope.questionnaire.Name, $scope.questionnaire.Label, csv_sorted_questioIds);

}

};

Drag and Drop

answered on 22 May 2018

1 answer

169 views

Unable to download KendoUI

Hello guys,

I cannot download KendoUI package from Download section after sign-in to my account. For example link does not work:

https://downloads.cdn.telerik.com/86ac2829dca059e45bfc261705c874ed_kendoui.for.jquery.2018.2.516.commercial.7z_2018.2.516?Expires=1526712767&Signature=NpNf7~yk4Qvp1PtkdBAYb9xzGqPaEgVjYOT-BcQpjD9w-iM7lL1WvTtjT4btZmOPO28x33drVh1Iq5j0TOAMsmzqUvU3e4nIu6JMqhRCzN7HFy0YsLlBZJ~0pila8Te7K40A3w6H4wPHAFS-0wDJ21szpttUNjU~b0uXD7ASL5YqxL14oaLv8OqOvw9c6cTeQa3YLB2DY8UF8IVQkG2wv2-rYFAUFdVw111FRhXRU-C5tm407Uee4DEwuAu9fxmo-tLdD0K5P2P9tW5N5BhZT2AFesqI5iDlNqzufeDjVpxj35SkbFS4cmGr9UwLmDRcIc30Stakhv2rGXV1ln5bkA__&Key-Pair-Id=APKAJARUJ5BRNXKUUAFQ

Problem with CND downloads.cdn.telerik.com?

General Discussions

answered on 21 May 2018

8 answers

1.1K+ views

Inline edit for json object

I have this code but it acts weird:

<div id="relatedCirculars"></div>

<script src="kendo/jquery.min.js"></script>
<script src="kendo/kendo.all.min.js"></script>

<script>
var relatedCirculars = [{ Title: "Test1", URL: "http://adres/test1.docx" },
{ Title: "Test2", URL: "http://adres/test2.docx" }];

$("#relatedCirculars").kendoGrid({
dataSource: {
data: relatedCirculars,
autoSync: true,
schema: {
model: {
fields: {
Title: { validation: { required: true } },
URL: { validation: { required: true }}
}
}
}
},
toolbar: ["create"],
columns: [
{
field: "Title"
},
{
field: "URL"
},
{
command: ["edit", "destroy"],
title: " ",
width: "250px"
}
],
editable: "inline"
});

</script>

At any point, the content of "relatedCirculars" is not changed.

While editing and clicking on the second field, the edition is finished.

Validation seems not to work.

Cancel is not working.

Any idea what's missing?

Grid

answered on 21 May 2018

4 answers

2.0K+ views

Excel Export Progress bar

Hi, I need know if exist some way to show a progress bar while the excel export is executing like pdf export.

Regards

Grid

answered on 21 May 2018

9 answers

2.0K+ views

How to exclude MVC Kendo Grid's column filter “contains” option?

I'm working on the bug where one screen has a grid that contains a column showing numbers, but when I try to filter it, it has "contains" option.
When I type 0, I'm getting an error.
I need to filter that column as a number not as a string.

This is the fragment of the code:

<p>columns.Bound(x => x.DebitAmount).Title("Debit").Width(300).ClientTemplate("#=kendo.toString(DebitAmount,'c') #").ClientFooterTemplate("#=kendo.toString(sum,'c') #");

columns.Bound(x => x.CreditAmount).Title("Credit").Width(300).ClientTemplate("#=kendo.toString(CreditAmount,'c') #").ClientFooterTemplate("#=kendo.toString(sum,'c') #");

...............................other columns..........................

.Filterable(ftb => ftb.Mode(GridFilterMode.Menu)

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.Contains("Contains")

.IsEqualTo("EqualTo")

.IsNotEqualTo("NotEqualTo")

.IsEmpty("Empty")))

.Operators(operators => operators

.ForNumber(str => str.Clear()

.IsEqualTo("EqualTo")

.IsGreaterThan("GreaterThan")

.IsLessThan("LessThan")

)).Messages(m => m.IsFalse(" False "))

.Messages(m => m.IsTrue("True ")))

The model declares those fields as decimal

The generated columns show "Contains" filter, even though the value are decimal

I have another screen that shows decimal number as well, where filter is defined the same way, however, it does not include "contains" filter option.

This is the code:

columns.Bound(c => c.Amount).Title("Amount").ClientTemplate("#= kendo.toString(Amount,'c')#").Width("120px");

.................other columns.................

.Filterable(ftb => ftb.Mode(GridFilterMode.Menu)

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.Contains("Contains")

.IsEqualTo("EqualTo")

.IsNotEqualTo("NotEqualTo")

.IsEmpty("Empty")))

.Operators(operators => operators

.ForNumber(str => str.Clear()

.IsEqualTo("EqualTo")

.IsGreaterThan("GreaterThan")

.IsLessThan("LessThan")

)))

Everything seems the same (except of messages part) when defining the filter operations, but somehow, on the first screen, the "contains" operation is included and on the second is not.
What am I missing?

Grid

answered on 21 May 2018

1 answer

4.1K+ views

How to trigger change for dropdownlist to populate other field data

Hi

I have a dropdownlist that is setup like this:

<div class="requisitionForm-content">

@(Html.Kendo().DropDownListFor(m => m.RequisitionModel.FormDto.VendorIdentifier)

.Events(e => e.Change("onVendorChange"))

.OptionLabel("Select a vendor...")

.DataValueField("Identifier")

.DataTextField("Name")

.Filter(FilterType.Contains)

.DataSource(s => s.Read(r => r.Action("GetVendors", "RequisitionForm", new { formVendor = Model.RequisitionModel.FormDto.VendorIdentifier }).Type(HttpVerbs.Post).Data("getVendorExtraData")))

.HtmlAttributes(new { style = "width:360px" }))

</div>

When a selection is made, it populates some text fields on the page. onVendorChange is pretty simple:

function onVendorChange(e) {

var phone = "";

var address = "";

var fax = "";

var email = "";

var vendorDropList = $('#RequisitionModel_FormDto_VendorIdentifier').data("kendoDropDownList");

var dataItem = vendorDropList.dataItem();

if (dataItem) {

phone = dataItem.Phone ? dataItem.Phone : "";

address = dataItem.Address ? dataItem.Address : "";

fax = dataItem.Fax ? dataItem.Fax : "";

email = dataItem.Email ? dataItem.Email : "";

var requisitionList = $('#RequisitionModel_FormDto_RequisitionType').data("kendoDropDownList");

var reqType = requisitionList.dataItem();

if (dataItem.BlanketOrderPo &&

reqType &&

reqType.Identifier == "@RequisitionType.BlanketOrder.Identifier.ToString()") {

$('#RequisitionModel_FormDto_PoNumber').val(dataItem.BlanketOrderPo);

}

$('#RequisitionModel_FormDto_VendorContactPhone').val(phone);

$('#RequisitionModel_FormDto_VendorAddress').val(address);

$('#RequisitionModel_FormDto_VendorFax').val(fax);

$('#RequisitionModel_FormDto_VendorEmail').val(email);

}

I am trying to save the state of form in localstorage. I am retaining the "Identifier" value.

I am restoring the state of the form by:

(elem is the specific dropdownlist element)

.. snip ..

$(elem).data('kendoDropDownList').value(formObject[key]);

$(elem).data('kendoDropDownList').trigger("change");

.. snip ..

The dropdownlist shows the correct name, but it acts as though the onChange event does not trigger: none of the related text fields are populated.

However, if I run the following at the browser's console:

$("#RequisitionModel_FormDto_VendorIdentifier").data("kendoDropDownList").trigger("change");

the change event is triggered.

It feels like it's a bit of a race condition - the dropdownlist hasn't populated it's data yet, or .. something?

How can I wait for the dropdownlist to be ready to be triggered? Is there a better way to handle this?

Thanks in advance.

DropDownList

answered on 18 May 2018

2 answers

398 views

error raised for 200 status code when body contains a property named errors

Why is the datasource firing the error event when the response body contains a property named errors?

The error is not raised if I change the property name.

Data Source

answered on 18 May 2018

1 answer

1.0K+ views

Datasource Group, Grouping and Aggregates - Show the same aggregate values on all the group header.

Hi,

I'm looking for a way to show the sum of a column on the group line like in this example : https://docs.telerik.com/kendo-ui/knowledge-base/grid-align-group-header-with-cells, but for every group possible. In others words, I would like to show, let's say the total of Completed tasks no matter the grouping so if I group by age, the total of Completed tasks will be shown on the group header. If I group by age, the total of Completed tasks would be shown on the group header as well.

By enabling the grouping in the Grid, it seems that this only works for the group specified in the data source.

Please see my example : https://dojo.telerik.com/OcuquWOd

As you can see, the Count is only shown when the grid is grouped by Units in stocks. When the group is on another column, the Count is no more shown.

Do you have any idea on how to achieve this ?

Thanks,

Grid