I have a page that requests a partial view via AJAX and inserts it into the page. The view contains several kendo DatePickers. When I leave some of the required DatePickers empty and try to submit the form, I'm noticing my validation summary (created by @Html.ValidationSummary(false)) is not displaying anything, though submission is prevented.
Yesterday I was receiving errors in the validation summary. I had one about a required DatePicker, that is in a hidden kendo Window being empty, and when I re-opened the window to address it, the validation error for the DatePicker was visible, but the DatePicker itself was gone.
So these specific problems aside for the moment, my question is: I know for the standard jQuery validation and unobtrusive scripts, I have to remove the validator data from the form and then re-parse the form after inserting content dynamically. Is something similar required for kendo validation? Do I need to call kendoValidator() again?
What I do for the standard asp.net MVC validation:
//Remove validators and re-add them to include the new fields
var
$form = $(form)
.removeData(
"validator"
)
.removeData(
"unobtrusiveValidation"
);
$.validator.unobtrusive.parse($form);
I'm trying to add a bullet point to my dropdown entries and while it works when it displays in the dropdown, when I try to edit it it reverts back to the character code.
Here is the code I'm using for my dropdown and it's in a grid with inline editing.
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Details",
dataValueField: "Id",
dataSource: dataSource,
optionsLabel: {
Details: "Choose an item...",
Id: -1
},
template: "#= data.Details #"
});
Any help would be appreciated.
Hi,
I'm trying to change the background of the "k-event-drag-hint" div when the user is moving an event on top of another.
function onEventMoved(e) {
if (roomIsOccupied(e.start, e.end, e.event, e.resources)) {
$(".k-event-drag-hint").find('div').css('background', 'blue');
e.preventDefault();
return;
}
$(".k-event-drag-hint").find('div').css('background', 'red');
}
When I randomly move an event I can see the green background BUT when roomIsOccupied returns true, my code seems to have no effect (background is not red).
>> If i remove the e.preventDefault() then the background turns to blue.
Any idea on how i can fix this issue?
Thx
Seb
<
td
name
=
"status"
role
=
"gridcell"
id
=
"SubmissionsGrid_active_cell"
class
=
""
>Active</
td
>
$(
'#myButton'
).click(
function
() {
var
grid = $(
"#SubmissionsGrid"
).data(
"kendoGrid"
);
$.each(grid.select(),
function
(index, row) {
var
cell = $(row).find(
'[name="status"]'
);
cell.addClass(
"k-dirty-cell"
).prepend(
"<span class='k-dirty' />"
);
var
data = grid.dataItem(row);
data.set(
'Status.Id'
,
'3'
);
data.set(
'Status.Description'
,
'Rejected'
);
});
});
Clicking grid remove row fire grid datasource change event, but firing paramatermap and no remote transport is running. I can fire parameterMap by call .sync method in change event but this not passing removed data there, but only remaining rows data.
allUsersDataSource.fetch(function() {
allUsers = allUsersDataSource.data();
})
var assignedUsersDataSource = new kendo.data.DataSource({
// autoSync: true,
transport: {
read:{
url: API_URL+"frank/getassignedusers/"+documentId,
dataType: "json"
},
create: {
type: "POST",
url: API_URL+"frank/addusertodocument",
dataType: "json"
},
update: {
type: "POST",
url: API_URL+"frank/editusertodocument",
dataType: "json"
},
destroy:{
type: "POST",
url: API_URL+"frank/removeuserdocument",
dataType: "json"
},
batch: true,
parameterMap: function(data, operation) {
console.log ("assignedUsersDataSource.parameterMap.!! data:", data);
console.log ("assignedUsersDataSource.parameterMap.!! operation:", operation);
if (operation === "destroy" ) {
//..
}
if (operation === "create" && data.UserID) {
//..
}
}
},
change: function(e) {
console.log("assignedUsersDataSource.change: e.items :: ", e.items );
if(e.action === "remove"){
// assignedUsersDataSource.sync();
}
//edycja i wstawianie
if(e.action === "itemchange"){
// assignedUsersDataSource.sync();
}
// itemchange to zawiera
if(e.action === "add"){
// assignedUsersDataSource.sync();
}
},
pageSize: 4,
schema: {
model: {
fields: {
UserName: { editable: false, nullable: true },
Surname: { editable: false, nullable: true },
UserID: { field: "UserID", defaultValue: 1 },
GroupName: { editable: false, nullable: true },
}
}
}
});
var _grid = $("\#grid-single-user-groups").kendoGrid({
dataSource: assignedUsersDataSource,
filterable: true,
scrollable: false,
// toolbar: ["create", "save"],
toolbar: ["create"],
pageable: true,
columns: [
{
field: "UserID", width: "100%",
editor: userDropDownEditor,
title: "Agent",
template: function(userID) {
for (var idx = 0, length = allUsers.length; idx <
length
; idx++) {
if (allUsers[idx].UserNameID == userID.UserID) {
return allUsers[idx].Login;
}
}
}
},
{ command: [ "destroy"], title: " ", width: "250px" }
],
editable: {mode: "incell"},
});
function userDropDownEditor(container, options) {
$('<input
data-bind
=
"value:' + options.field + '"
/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Login",
dataValueField: "UserNameID",
filter: "contains",
dataSource: allUsersDataSource,
valuePrimitive:true,
})
}
I am trying to achieve the following :
1. Hide the header & footer on home page or home view but display on other views
2. Customize the header for each view
3. Navigating to views using href tags was not showing the layout
---------------------------------------First Issue : Hide the header & footer on any specific view -------------------------------------------------------------------
I am using the following code for lay-out initialization in home view i.e. index.html:
<
body
>
<
div
data-role
=
"view"
data-title
=
"Home View"
id
=
"index-en"
>
<
div
data-role
=
"layout"
data-id
=
"main-layout"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
div
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
href
=
"#index-en"
data-icon
=
"home"
>Home</
a
>
<
a
href
=
"views/view1.html"
data-icon
=
"organize"
>Agenda</
a
>
<
a
href
=
"views/view2.html"
data-icon
=
"favorites"
>Registration</
a
>
<
a
href
=
"views/view3.html"
data-icon
=
"globe"
>Gallery</
a
>
<
a
href
=
"views/view4.html"
data-icon
=
"contacts"
>Speakers</
a
>
</
div
>
</
div
>
</
div
>
<
script
>
var app = new kendo.mobile.Application(document.body,
{
platform:'ios7',
layout: "main-layout"
});
</
scirpt
>
</
div
>
</
body
>
How can I hide the header and footer on the home page.
Currently I used the following custom css to hide the header
#index-en div.km-header {
display : none;
}
I probably need to do the same to hide the footer also.
Is there any other standard approach to do this ?
------------------------------------------Second Issue : Customize the header for any specific view--------------------------------------------
Since I have the main-layout defined , the same layout will be copied to all views.
Let's say I want to change the header for a specific view to be
<div data-role="header">
<div data-role="navbar">
<img src="xyz/abc.jpg"></img>
</div>
</div>
I was able to achieve this by adding data-layout tag to this view and defining a new layout in this view's html file.
<
div
data-role
=
"view"
data-title
=
"Second View"
data-layout
=
"custom-layout"
id
=
"view2"
>
</
div
>
<
div
data-role
=
"layout"
data-id
=
"custom-layout"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
img
src
=
"xyz/abc.jpg"
></
img
>
</
div
>
</
div
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
href
=
"#index-en"
data-icon
=
"home"
>Home</
a
>
<
a
href
=
"views/view1.html"
data-icon
=
"organize"
>Agenda</
a
>
<
a
href
=
"views/view2.html"
data-icon
=
"favorites"
>Registration</
a
>
<
a
href
=
"views/view3.html"
data-icon
=
"globe"
>Gallery</
a
>
<
a
href
=
"views/view4.html"
data-icon
=
"contacts"
>Speakers</
a
>
</
div
>
</
div
>
</
div
>
But this was breaking the tabstrip navigation.
Could you please advise how can this be achieved ?
--------------------------Third Issue : Navigating to views directly using href tags was not showing the layout----------------------------
In my home page, I have a gird of four images created using CSS flex-box.
I have added href on each image to link to a different view.
But when clicked on the image only the view's content is displayed , the layout is not shown.
The custom css styling applied to view's elements is also broken.
<
div
id
=
"flex-grid-container1"
class
=
"flex-container-center-content"
>
<
div
class
=
"flex-item1"
>
<
a
href
=
"views/view2.html"
><
img
src
=
"images/homeGrid/agenda.jpg"
/></
a
>
</
div
>
<
div
class
=
"flex-item2"
>
<
a
href
=
"views/view2.html"
><
img
src
=
"images/homeGrid/speakers.jpg"
/></
a
>
</
div
>
</
div
>
I have also tried using #idOfView in the href tags but same problem exists.
Could you please let me know how this can be resolved ?
Sorry for the very lengthy post , but these are the issues I am struck with now.
Thanks in advance.
Hello,
I have a Kendo Scheduler bound to datatable dynamically. The user will have this view open whole day and would like to refresh the data in current view updated every 5/10 minutes as set in some Settings. The user do not Need to interact or refresh the page. Is there some property which i can use or any idea how to achieve a Server read automatically every n minutes and refresh current view.
Thanks
Anamika
Cut/Copy/Paste buttons stop working after fromJSON is called on a kendoSpreadsheet.
Instead, a JavaScript error occurs: "Error: Unable to get property 'clipboard' of undefined or null reference"
This is due to spreadsheet._workbook._view being undefined. It appears that this happens when fromJSON is called, as it is defined prior to that call.
This can be replicated in the example for the fromJSON function. Note that the Cut/Copy/Paste buttons are non-functional:
https://dojo.telerik.com/uQAQUxEB
Is there a solution to this issue?
Thanks
Hi,
I am opening a window on clicking a button but at the same time i want the background to be inactive/blur/hidden, such that user should not be able to click anywhere but the window.
for ex: -(attached a picture in attachment)
<script>
function putOnHoldPopup(requestId) {
debugger;
$("#window").html(' <textarea id="txtArea" style="margin: 0px; height: 95px; width: 517px;resize:none;" watermark-text="Enter your comments here......"></textarea ><button>Save</button>');
var myWindow = $("#window");
myWindow.kendoWindow({
width: "600px",
height: "300px",
title: "Provide a valid reason to put the request on hold",
visible: false,
actions: [
"Minimize",
"Close"
],
}).data("kendoWindow").center().open();
$("#example").css("overflow", "hidden");
}
</script>
here i am trying to hide the background but it is not happening.Any other way to hide the background.Please help.
Thanks
Manish Tiwari
I dont see any forum like Angularjs so I am posting here.
My Problem is we are using Angular v1.5 and migrating jquery from 1.x to Jquery 3.1.1 and Kendo UI from 2015 to 2018 R2. After migrating dropdowns are not at all loading, autocomplete is not working properly and some style issues.
Can any one help me to get rid of the situation.And let me know if this is the correct thread for posting the question, if not please suggest.
Thanks in Advance.