Questions on Kendo UI for jQuery Forum

3 answers

342 views

datetime picker MVVM componentType

Hello,

How to use Component Type in datetime picker MVVM? i tried using data-component-type="modern" , but it didnt worked

DatePicker

answered on 16 Jul 2020

4 answers

498 views

Bind a column tooltip for cells to a model property

Hi!

I have been scouring through the forums and documentation but the way a grid gets tooltip is very confusing to me. we need to have a separate tooltip control and traverse the grid and apply tooltip in it.

Is there a way such as:

01.columns: [ {

02. field: "ParkingCardId",

03. title: "Card Id",

04. template: '<a href="@Url.Action("NewRequest", "Parking")?cardId=#=ParkingCardId#&cardTypeString=View">#=ParkingCardId#</a>'

05. }, {

06. field: "DateRequested",

07. title: "Requested",

08. template: '#= kendo.toString(kendo.parseDate(DateRequested), "dd-MMM-yy")#'

09. }, {

10. field: "Name",

11. title: "Full Name"

12. }, {

13. field: "AirportPassNumber",

14. title: "Pass No."

15. }, {

16. field: "DrivingLicenseNumber",

17. title: "D.L No"

18. }, {

19. field: "VehicleNumber",

20. title: "Car No."

21. }, {

22. field: "Status",

23. title: "Status"

24. tooltip: "<Name of a property on the model>"

25. }, {

26. field: "PassExpiryDate",

27. title: "Expiry Date",

28.

template: '# if (PassExpiryDate !== null) {# #=kendo.toString(kendo.parseDate(PassExpiryDate), "dd-MMM-yy")# #} else { # <

span></span> # } #'

29. }, {

30. field: "StatusId",

31. title: "Action",

32. template:

33. "#if (IsExpired && StatusId === 5) {# <a href='@Url.Action("NewRequest", "Parking")?cardId=#=ParkingCardId#&cardTypeString=Renew Card'>Renew</a> #} else {# #}#" +

34. "#if ((IsExpired && StatusId === 5) && StatusId === 0) {# | #} else {# #}# " +

35. "#if (StatusId === 0) {# <button type='button' class='k-button k-danger' onclick='openCancelDialog(#=ParkingCardId#)'>Cancel</button> #} else {# #}#"

36. },{

37. field: "Invoice",

38. title: "Invoice",

39. template: '#if (Status == "Print & Pay") {# <a onclick=PrepareInvoice("#=ParkingCardId#")>Print</a> #} else {# #}#'

40. }

41.]

Check line # 24.

Grid

answered on 16 Jul 2020

1 answer

73 views

I want the final, final answer, Do I need to learn Jquery?

I searched about this a lot and I'm confused.
I'm a beginner web developer and I'm about to finish Javascript's basics, I will go to libraries and stuff like that
So I want your answer, do I need to learn Jquery or just use Javascript DOM?
I heard that Jquery is outdated and is getting ditched in favor of React so I'm confused right now.

General Discussions

answered on 15 Jul 2020

9 answers

176 views

Selectable not working correctly when horizontal scroll

Telerik,

As per your article here - https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/scrolling/scroll-views-horizontally

If you do this, then enable selectable: true - it doesnt work correctly, essentially it only selects ever X group - hard to explain, please watch the video.

Is there a fix for this?

You can see the issue in the attached video (ZIPPED) and here is a modified dojo from yours with just selectable set.

https://dojo.telerik.com/@daniel_j/arUVUMAY

Thank You.

Scheduler

answered on 15 Jul 2020

1 answer

137 views

Only one bubble in PDF for bubble chart

I'm having a similar issue as reported here: https://www.telerik.com/forums/drawdom-with-cloned-chart-fails#ko3KfThygUiX9Q22tdM4ZQ

I'm trying to export a chart to a pdf document that also includes some text and a grid. In my case the chart is a bubble chart. When I export I am only getting one bubble to display on the chart in the pdf even though the rest of the bubbles are displayed on the screen. If I add a setTimeout(function() {// code to finish exporting},5000); to my code I can get it to work but I don't like the idea of relying on setTimeout. I tried using the "render" event but that also only gave me one bubble in the final printout. When I tried the dataBound event it never fired. How do I fix this?

Drawing API

answered on 15 Jul 2020

2 answers

2.4K+ views

Kendo Grid Not Updating after deleting a record

Unfortunately,when I go to delete an item from the grid the grid is not properly updating.

I've tried 3 things and I haven't had any luck:

1. $("#userListGrid").data("kendoGrid").dataSource.read;
$("#userListGrid").data("kendoGrid").refresh();

2. $('#userListGrid').data('kendoGrid').dataSource.read().then(function () {
$('#userListGrid').data('kendoGrid').refresh();
});

3. KendoGridRefresh();

Here is the code for the function:

function KendoGridRefresh() {
var grid = $('#userListGrid').data('kendoGrid');
grid.dataSource.read();
}

Here is the code for the grid:

<div class="content-container">
<div class="container">
<h3 class="d-inline">Current Users</h3>
<button class="btn btn-primary d-inline mb-2 ml-5" onclick="window.location.href = '/user-maintenance/create-new-user'">Create New User</button>

<div class="row p-0 table-container striped">
<div id="userListGrid"></div>
</div>
</div>
<div id="delete-confirm-modal" style="background-color: white"></div>
</div>

<script type="text/javascript">
// Sticky header
function onDataBound() {
$("#loader-spinner").hide();

var wrapper = this.wrapper,
toolbar = wrapper.find(".k-grid-toolbar"), // e.g. button to export spreadsheet
groupingHeader = wrapper.find(".k-grouping-header"), // interactive tools
header = wrapper.find(".k-grid-header"); // column headers

function resizeFixed() {
var paddingRight = parseInt(toolbar.css("padding-right"));
toolbar.css("width", wrapper.width() - paddingRight - 3);

paddingRight = parseInt(groupingHeader.css("padding-right"));
groupingHeader.css("width", wrapper.width() - paddingRight - 3);

paddingRight = parseInt(header.css("padding-right"));
header.css("width", wrapper.width() - paddingRight);
}

function scrollFixed() {
var navbarHeaderHeight = 0;

if ($(".nav-side-menu").height() <= 100) { // On mobile device or small screen
navbarHeaderHeight = 0;
} else { // Full screen
navbarHeaderHeight = 100;
}

var offset = $(this).scrollTop(),
tableOffsetTop = wrapper.offset().top - navbarHeaderHeight;

if (offset < tableOffsetTop) {
toolbar.removeClass("fixed-header");
toolbar.removeAttr("style");

groupingHeader.removeClass("fixed-header");
groupingHeader.removeAttr("style");

header.removeClass("fixed-header");
header.removeAttr("style");

} else if (offset >= tableOffsetTop) {

toolbar.addClass("fixed-header");
toolbar.css("top", navbarHeaderHeight);

groupingHeader.addClass("fixed-header");
groupingHeader.css("top", navbarHeaderHeight + toolbar.outerHeight());

header.addClass("fixed-header");
header.css("top", navbarHeaderHeight + toolbar.outerHeight() + groupingHeader.outerHeight());
}
}

resizeFixed();
$(window).resize(resizeFixed);
$(window).resize(scrollFixed);

$(window).scroll(resizeFixed);
$(window).scroll(scrollFixed);

$(".content-container").scroll(resizeFixed);
$(".content-container").scroll(scrollFixed);
}

var externalId = "";
var firstName = "";
var lastName = "";
var emailAddress = "";

var confirmDelete = function (eid, firstN, lastN, emailA) {
var dialog = $("#delete-confirm-modal");
externalId = eid;
firstName = firstN;
lastName = lastN;
emailAddress = emailA;

if (dialog.data("kendoDialog")) {
dialog.data("kendoDialog").open();
} else {
dialog.kendoDialog({
width: "450px",
title: "Confirm delete",
closable: true,
modal: true,
content: "<p>Confirm that you wish to delete user " + firstName + " " + lastName + "(" + emailAddress + "). Once this is done, it cannot be reversed.</p>",
actions: [
{
text: "Cancel",
primary: true
}, {
text: "Confirm",
action: function (e) {
var url = "/apic/usermaintenance/deleteuser/" + externalId;
$.get(url,
function (data) {
//$("#userListGrid").data("kendoGrid").dataSource.read;
//$("#userListGrid").data("kendoGrid").refresh();

/*$('#userListGrid').data('kendoGrid').dataSource.read().then(function () {
$('#userListGrid').data('kendoGrid').refresh();
});*/

KendoGridRefresh();

kendo.alert("User has been deleted");
}).fail(function () {
kendo.alert("Unable to delete user. An error has occured. Please try again.");
});
}
}
],
close: onClose
});
}
};

var deleteUser = function () {

};

var onClose = function (e) {
externalId = "";
firstName = "";
lastName = "";
emailAddress = "";
};

function KendoGridRefresh() {
var grid = $('#userListGrid').data('kendoGrid');
grid.dataSource.read();
}

$(document).ready(function () {
var roles = [{
id: 1, name: "JB-Admin", key: 1, value: "JB-Admin"
}, {
id: 2, name: "M-Admin", key: 2, value: "M-Admin"
}, {
id: 3, name: "NM-Admin", key: 3, value: "NM-Admin"
}, {
id: 4, name: "Pricing", key: 4, value: "Pricing"
}, {
id: 5, name: "Orders", key: 5, value: "Orders"
}, {
id: 6, name: "Orders-U", key: 6, value: "Orders-U"
}, {
id: 7, name: "Contracts", key: 7, value: "Contracts"
}, {
id: 8, name: "Exchange", key: 8, value: "Exchange"
}, {
id: 9, name: "Destination", key: 9, value: "Destination"
}, {
id: 10, name: "Destination-C", key: 10, value: "Destination-C"
}, {
id: 11, name: "Nominations", key: 11, value: "Nominations"
}, {
id: 12, name: "Nominations-C", key: 12, value: "Nominations-C"
}, {
id: 13, name: "Nominations-U", key: 13, value: "Nominations-U"
}, {
id: 14, name: "Store", key: 14, value: "Store"
}, {
id: 15, name: "Retail Locator", key: 15, value: "Retail Locator"
}, {
id: 16, name: "Lessonly", key: 16, value: "Lessonly"
}, {
id: 17, name: "Inspection Form", key: 17, value: "Inspection Form"
}, {
id: 18, name: "Products", key: 18, value: "Products"
}, {
id: 19, name: "QA/QC", key: 19, value: "QA/QC"
}, {
id: 20, name: "Presentations", key: 20, value: "Presentations"
}, {
id: 21, name: "About Us", key: 21, value: "About Us"
}, {
id: 22, name: "Marketing", key: 22, value: "Marketing"
}, {
id: 23, name: "Marketing-C", key: 23, value: "Marketing-C"
}, {
id: 24, name: "Marketing-U", key: 24, value: "Marketing-U"
}, {
id: 25, name: "Marketing-D", key: 25, value: "Marketing-D"
}
];

$("#userListGrid").kendoGrid({
dataSource: {
transport: {
read: "/apic/usermaintenance/getmyusers",
dataType: "json"
},
schema: {
data: function (response) {
return response;
},
model: {
fields: {
UserId: { type: "string" },
ExternalId: { type: "string" },
EmailAddress: { type: "string" },
FirstName: { type: "string" },
LastName: { type: "string" },
Display: { type: "string" },
Company: { type: "string" },
AxAccountNumber: { type: "string" },
MemberType: { type: "string" },
AccessPricing: { type: "string" },
AccessOrders: { type: "string" },
AccessContracts: { type: "string" },
AccessExchange: { type: "string" },
AccessDestination: { type: "string" },
AccessNominations: { type: "string" },
AccessMarketingCalendar: { type: "string" },
AccessStore: { type: "string" },
AccessRetailLocator: { type: "string" },
AccessLessonly: { type: "string" },
AccessInspectionForm: { type: "string" },
AccessProductsList: { type: "string" },
AccessQaQc: { type: "string" },
AccessPresentations: { type: "string" },
AccessAboutUs: { type: "string" },
FilterString: { type: "string" }
}
}
},
pageSize: 20,
sort: { field: "AxAccountNumber", dir: "asc" }
},
dataBound: onDataBound,
dataBinding: function (arg) {

},
groupable: true,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
toolbar: ["search", "excel"],
excel: {
fileName: "UserList.xlsx",
allPages: true
},
refresh: {
reload: true
},
resizable: true,
columns: [
{
template: '<a href="/user-maintenance/edit-user?userId=#= ExternalId #"><div class="edit-icon" title="edit"></div></a>',
width: '30px'
},
{
field: "EmailAddress",
title: "Email Address",
filterable: {
multi: true,
search: true
}
}, {
template: "#= LastName #, #= FirstName #",
title: "Name",
field: "Display",
filterable: {
multi: true,
search: true
}
}, {
title: "Company",
field: "Company",
filterable: {
multi: true,
search: true
}
}, {
title: "Account Number",
field: "AxAccountNumber",
filterable: {
multi: true,
search: true
},
width: '90px'
}, {
template: kendo.template($("#user-rights-template").html()),
title: "Permissions",
field: "FilterString",
filterable: {
search: true
}
},
{
template: '<button class="btn btn-danger btn-sm" onclick="confirmDelete(\'#=ExternalId#\', \'#=FirstName#\', \'#=LastName#\', \'#=EmailAddress#\')" style="padding: .25rem;">X</button>',
width: '40px'
},
]
});
});
</script>
<script type="text/x-kendo-template" id="user-rights-template">
#if(MemberType==='JoeBlowAdmins') {#
<span class='badge badge-pill badge-info'>JB-Admin</span>
#}#
#if(MemberType==='JoeBlowUsers') {#
<span class='badge badge-pill badge-info'>JB-User</span>
#}#
#if(MemberType==='MemberAdmin') {#
<span class='badge badge-pill badge-info'>M-Admin</span>
#}#
#if(MemberType==='MemberUser') {#
<span class='badge badge-pill badge-info'>M-User</span>
#}#
#if(MemberType==='NonMemberAdmin') {#
<span class='badge badge-pill badge-info'>NM-Admin</span>
#}#
#if(MemberType==='NonMemberUser') {#
<span class='badge badge-pill badge-info'>NM-User</span>
#}#
#if(AccessPricing==='Read'){#
<span class='badge badge-pill badge-info'>Pricing</span>
#}#
#if(AccessOrders==='Read'){#
<span class='badge badge-pill badge-info'>Orders</span>
#}#
#if(AccessOrders==='Update'){#
<span class='badge badge-pill badge-info'>Orders-U</span>
#}#
#if(AccessContracts==='Read'){#
<span class='badge badge-pill badge-info'>Contracts</span>
#}#
#if(AccessExchange==='Read'){#
<span class='badge badge-pill badge-info'>Exchange</span>
#}#
#if(AccessDestination==='Read'){#
<span class='badge badge-pill badge-info'>Destination</span>
#}#
#if(AccessDestination==='Create'){#
<span class='badge badge-pill badge-info'>Destination-C</span>
#}#
#if(AccessNominations==='Read'){#
<span class='badge badge-pill badge-info'>Nominations</span>
#}#
#if(AccessNominations==='Create'){#
<span class='badge badge-pill badge-info'>Nominations-C</span>
#}#
#if(AccessNominations==='Update'){#
<span class='badge badge-pill badge-info'>Nominations-U</span>
#}#
#if(AccessMarketingCalendar==='Read'){#
<span class='badge badge-pill badge-info'>Marketing</span>
#}#
#if(AccessMarketingCalendar==='Create'){#
<span class='badge badge-pill badge-info'>Marketing-C</span>
#}#
#if(AccessMarketingCalendar==='Update'){#
<span class='badge badge-pill badge-info'>Marketing-U</span>
#}#
#if(AccessMarketingCalendar==='Delete'){#
<span class='badge badge-pill badge-info'>Marketing-D</span>
#}#
#if(AccessStore==='Read'){#
<span class='badge badge-pill badge-info'>Store</span>
#}#
#if(AccessRetailLocator==='Read'){#
<span class='badge badge-pill badge-info'>Retail Locator</span>
#}#
#if(AccessLessonly==='Read'){#
<span class='badge badge-pill badge-info'>Lessonly</span>
#}#
#if(AccessInspectionForm==='Read'){#
<span class='badge badge-pill badge-info'>Inspection Form</span>
#}#
#if(AccessProductsList==='Read'){#
<span class='badge badge-pill badge-info'>Products</span>
#}#
#if(AccessQaQc==='Read'){#
<span class='badge badge-pill badge-info'>QA/QC</span>
#}#
#if(AccessPresentations==='Read'){#
<span class='badge badge-pill badge-info'>Presentations</span>
#}#
#if(AccessAboutUs==='Read'){#
<span class='badge badge-pill badge-info'>About Us</span>
#}#
</script>

Can someone tell me what I might be doing wrong?

Grid

answered on 15 Jul 2020

1 answer

82 views

Update the documentation to indicate in which versions new features were added.

Someone should really update the documentation to indicate in which version new features were added. Not everyone is running the very latest version.

My company is using UI for ASP.Net MVC version 2019.3. (2020.2 is currenlty being evaluated)

Is my assumption correct that "validationSummary: true" in validator was NOT added until version 2020 R2?

I spent hours trying to figure out why this was not working with 2019.3? :)

Validation

answered on 14 Jul 2020

3 answers

1.8K+ views

Removing Header and borders of Master Grid of Kendo Hierarchy Grid using CSS

I am using Kendo Hierarchy Grid and wants a way to remove the header and border lines of the master grid alone/only. When I apply the CSS below the grids' code, it also removes the headers child grids. I have attached a PDF to illustrate the rendering.

@(Html.Kendo().Grid<WorkplansViewModel>()
.Name("grid_outputindicators")
.Columns(columns =>
{
columns.Bound(c => c.Transaction_Id).Hidden();
columns.Bound(c => c.WPMainRecord_Ident).Hidden();
columns.Bound(c => c.ProjectId).Hidden();
columns.Bound(c => c.FYearIdent).Hidden();
columns.Bound(c => c.FPeriodIdent).Hidden();
columns.Bound(c => c.ViewNumbering).Title("No").Width(20).Hidden();
columns.Bound(c => c.Output).Title("Define Indicators for each Output");

columns.Command(command => command.Custom(" Add Indicator").IconClass("k-icon k-i-column-stacked").Click("addoutputindicator"));

})

.Resizable(r=>r.Columns(true))
.ClientDetailTemplateId("templateoutputindicators")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("WP_Outputs_Read", "Admin", new {projid=Model.Project_Id, fyear=Model.FYear, fperiod=Model.FPeriod}))
.Model(model =>
{
model.Id(p => p.Transaction_Id);
})

.Events(events => events.Error("error_handler"))

)
.Events(events => events.DataBound("dataBoundOutputIndicators"))
)

<script id="templateoutputindicators" type="text/kendo-tmpl">
@(Html.Kendo().Grid<WP_OutputIndicatorsSubGridVM>()
.Name("gridsub_#=Transaction_Id#")
.Columns(columns =>
{
columns.Bound(o => o.Transaction_IndicatorId).Hidden();
columns.Bound(o => o.IndicatorStatementOIVM).Title("Indicator");
columns.Bound(o => o.BaselineOIVM).Width(110).Title("Baseline");
columns.Bound(o => o.TargetOIVM).Title("Target");
columns.Command(command => { command.Destroy().Text(" Delete").IconClass("k-icon k-i-delete"); });
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("WP_OutputsSubIndicators_Read", "Admin", new { output_transid = "#=Transaction_Id#" }))
.Destroy(destroy => destroy.Action("WP_Outputs_Delete", "Admin"))
)
.ToClientTemplate()
)
</script>

#grid_outputindicators thead.k-grid-header
{
height: 0;
border-bottom-width: 0;
visibility: hidden;
overflow: hidden;
display: none;
}

Grid

answered on 14 Jul 2020

1 answer

111 views

Confirmation message is not updating

I'm using the Kendo Grid to list user data. An issue has been discovered. When a user clicks the delete button, a verification message comes up stating, "Are you user you want to delete, user Joe Blow". If I click cancel, and try a different user "Sally Smith", the error message will be, "Are you user you want to delete, user Joe Blow". I checked the function and the correct data is going into function.

I went through the code in Chrome debugger and I found out that the error message is coming back from code on: https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.js

I do have a function that resets the values to "". However, the data is not getting update when it goes to kendo.all.js. How can I reset the data when it goes there?

Grid