This is my first time using kendo window and I have run into a problem.
I want to use a namespaced function for the OnClose event as below.

@(Html.Kendo().Window()
    .Name("CreateProduct")
    .Title("Create Product")
    .Width(600)
    .Modal(true)
    .Events(ev => ev.Close("OnClose"))
    .Visible(false)
    .Content(@Html.Partial("CreationForm").ToString())
)

Right now you can see that I am just using the OnClose function, but I wanted to be able to write something like:

<script>
var CurrentPageNamespace = {};
CurrentPageNamespace.OnClose = function(){
    //Do Some Work Here
}
</script>

And then add it to the Window's on close:
@(Html.Kendo().Window()
    .Name("CreateProduct")
    .Title("Create Product")
    .Width(600)
    .Modal(true)
    .Events(ev => ev.Close("CurrentPageNamespace.OnClose"))
    .Visible(false)
    .Content(@Html.Partial("CreationForm").ToString())
)

I tested this with a simple alert, and if I removed the namespace from OnClose it would work, and with the namespace included nothing would happen.  Is it possible to use a namespace with Kendo UI Window events?

Thanks in advance.

I am using the grid to show search results in a form. On submit I generate the search results and show in the grid. Currently the pagination doesn't work .

In the documentation it is mentioned that I have to create a read method like


 It would be hard for me to generate the search list in Ajax read method. How can I use the previously generated list for ajax Read method ? 

In my grid, when you tab to a _numeric_ column, change it's value, then tab out of the column, the value will revert if using IE10 or IE9.

Is this a known bug? It exists in the last two releases of IE. Are there plans to fix it? Is there a workaround in the meantime?

~S

If I define my data source independantly of my grid, the paging on the grid doesn't work. I have wasted a couple hours figuring out what the problem is. I can put the data source as part of a grid in this case, though it does make code slightly messier.

If I switch the code back to using the inline definition of the data source then the paging works.

The docs make no mention of this. Is it a bug?

I have implemented a Kendo grid in a legacy asp.net web forms project. The datasource for the grid uses the transport mechanism to pull json from the server.

I have implemented the grid in a .ascx control, and it is embedded in a form/page  which has 3 asp.net controls that do postbacks, a drop downlist, and two TextBox's. The two text boxes are in the same div and update panel, the only difference is their ID.

One of the Textbox's causes the grid to lose all it's data, when it does it's TextChanged Postback. The other does not. Very weird behavior.

Any thoughts on what would cause this to happen?

Thanks,
~S

Hi, 

As subject. is it possible to unselect selected node (clearing yellow select-mark) ?

Regards,
Gema Pratama

Is there anything there an option available on the control?

My other option would be tap into the keypress event and check for the ESC keycode. I've began to really like the keyboard navigation features of the grid and was wondering if there is a KendoUI API exposing events for all the keys in the kendo.keys object.

Thanks in advance.

Hi, 

I am trying to use a modal window within another window as a confirm/message popup, but there are some issues I am not sure if I can't get around.

Here's a jsfiddle of my situation:  JsFiddle

The problems I am trying to fix are:
1. Using a modal window while also using appendTo seems to have issues with the back drop, I see its there until you click elsewhere, then it disappears.

2. It would be great if I could center the modal within my window rather than the Window

3. Even though dragging is disabled on the modal, if you grab the modal title bar, it will move the outside window.

4. If I click the 'X' to close the inner modal, it closes my external window.

Can anyone suggest solutions to any of these issues?

Calling a refresh(); does not work.


My code:

<!-- ============================================================================================ newsFeed -->
<div data-role="view" data-show="getNewsFeedData" data-title="myFitness" id="view-newsFeed">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="left" data-role="backbutton" class="nav-button" >Back</a>
<a data-align="right" data-role="button" class="nav-button" href="#view-addEvent">Add Event</a>
</div>

<div id="no-feed-content" style="display:none;">
<div class="km-navbar pullRefresh">No More Events | Pull to Refresh</div>
</div>

</header>
<div class="loginButtonWrapper">

<div id="showAllEventsButtonWrapper">
You are viewng Your Friends Events<br>
<a id="showAllEventsButton" class="k-button" data-click="showEventsSwitch" data-role="button" data-show="1">Show All Users</a>
</div>
<div id="showFriendEventsButtonWrapper" >
You are viewing All Users Events<br>
<a id="showFriendEventsButton" class="k-button" data-click="showEventsSwitch" data-role="button" data-show="0">Show Only Friends</a>
</div>
</div>

<ul id="newsFeed"></ul>

</div>

<!-- =================================================================================== newsFeed Template -->
<script id="newsFeed-template" type="text/x-kendo-template">

<div class="feed">

# if (type == '1') {# 
<img class="feed-user-image" src="http://gohhllc.com/fitfan/app/images/#= profile_image_url #
" alt="#= from_user #" />${feed_id}

<div class="feed-content">${from_user} # if (attendees != null && attendees.length >= 1) {
for (var i = 0; i < attendees.length; i++) { #
and ${attendees[i].name} # }
# are attending a # }
else {
if (from_user == 'You') {
# are attending a # }
else { #
is attending a #}
}
#  #= title #
class at #= loc #
on #= event_stamp # </div>
<div>
<img class="mini-icon news-feed-mini-icon" src="styles/icons/ClassICON.png"  />
</div>
#}#

# if (type == '2') {#
<img class="feed-user-image" src="http://gohhllc.com/fitfan/app/images/#= profile_image_url #
" alt="#= from_user #" />${feed_id}

<div class="feed-content">${from_user} # if (attendees != null && attendees.length >= 1) {
for (var i = 0; i < attendees.length; i++) { #
and ${attendees[i].name} # }
# are doing a # }
else {
if (from_user == 'You') {
# are doing a # }
else {
# is doing a #}
}
#  #= title #
routine at #= loc #
on #= event_stamp # </div>
<div>
<img class="mini-icon news-feed-mini-icon" src="styles/icons/RoutineICON.png"  />
</div>
#}#    

#if (user_id == localStorage.getItem("userID")) { #
<div id="newsID_${feed_id}" class="feed-join-wrapper">
<a data-role="button" class="feed_cancel_join_button"  data-rel="actionsheet" data-actionsheet-context="${event_id}|${feed_id}" href="\\#cancelActionSheet">CANCEL</a>
</div> #}#

#if (share == '1' && user_id != localStorage.getItem("userID")) { #
<div id="newsID_${feed_id}" class="feed-join-wrapper">
<a data-role="button" class="feed_cancel_join_button"  data-rel="actionsheet" data-actionsheet-context="${event_id}|${feed_id}" href="\\#joinActionSheet">JOIN</a>
</div> #}#


<ul data-role="actionsheet" id="joinActionSheet">
<li>
<a data-action="joinConfirm">Confirm Join</a>
</li>
</ul>

<ul data-role="actionsheet" id="cancelActionSheet">
<li>
<a data-action="cancelConfirm">Confirm Cancel</a>
</li>
</ul>

</div>
</script>

<!-- ===================================================================================== newsFeed script -->
<script>

function joinConfirm(e) {
//console.log(e.target);
//send join request
//post join
$.ajax({
url: endpoint + "app/api/join_event.php",
data: { userID: userID, event_id: e.context},
dataType: "jsonp",
type: "GET",
success: function (data) {
newsID = '#newsID_' + e.target;
console.log("<= joinEvent - " + newsID);

$(newsID).html("<div class=\"eventStatusUpdate\">You are Attending this event</div>");
//app.navigate("#view-myEvents");
}
});
}

function cancelConfirm(e) {
//console.log(e.context);
//send cancel request
//split the context var
values = e.context.split('|');
eventID = values[0];
newsID = values[1];

//post cancel
$.ajax({
url: endpoint + "app/api/cancel_event.php",
data: { userID: userID, event_id: eventID},
dataType: "jsonp",
type: "GET",
success: function (data) {
newsID = '#newsID_' + newsID;

$(newsID).html("<div class=\"eventStatusUpdate\">This Event is Now Cancelled</div>");
//app.navigate("#view-myEvents");
}
});
}

//define newsfeed data
var newsFeedDataSource = null;
                            

function getNewsFeedData() {
console.log("<= getNewsFeed =>");     
//check if we show news for all users (even non-friends)

if (localStorage.getItem("showAllEvents") == "1") {
showAllEvents = 1;
console.log("<= showing all events =>");
//show/hide buttons
$("#showFriendEventsButtonWrapper").show();
$("#showAllEventsButtonWrapper").hide();
}
else {
showAllEvents = 0;
console.log("<= showing only friend events =>");
//show/hide buttons
$("#showFriendEventsButtonWrapper").hide();
$("#showAllEventsButtonWrapper").show();
}

newsFeedDataSource = new kendo.data.DataSource({
serverPaging: true,
pageSize: 2,
cache: false,

change: function (e) {
//if no more results turn off endlessscroll
if (e.items.length < e.sender._pageSize) {
//show pull to refresh header
$("#no-feed-content").show();

var list = $("#newsFeed").data("kendoMobileListView");
if (list && list._scrollerInstance) {
list._scrollerInstance.unbind('scroll');
}
}
else {
//hide pull to reresh header
$("#no-feed-content").hide();
}
},
transport: {
read: {
url: endpoint + "app/api/show_feed.php", // the remote service url
data: { userID: userID, showAllEvents: showAllEvents},
dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
},
parameterMap: function(options) {
return {
userID: options.userID,
page: options.page,
rpp: options.pageSize,
showAllEvents: options.showAllEvents,
since_id: options.since_id, //additional parameters sent to the remote service
max_id: options.max_id //additional parameters sent to the remove service
};
}
},
schema: { // describe the result format
data: "results", // the data which the data source will be bound to is in the "results" field,
}

});
                            
$("#newsFeed").kendoMobileListView({
dataSource: newsFeedDataSource,
template: $("#newsFeed-template").text(),
pullToRefresh: true,
//addition parameters which will be passed to the DataSource's read method
pullParameters: function(item) { //pass first data item of the ListView
return {
max_id: item.max_id,
page: 1
};
},
endlessScroll: true,
//scrollThreshold: 60,
//addition parameters which will be passed to the DataSource's next method
endlessScrollParameters: function(firstNewsID, lastNewsID) {
if (lastNewsID) {
return {
since_id: lastNewsID.since_id
};
}
}
});
}

function showEventsSwitch(e) {
//get button vars
var data = e.button.data();

if (data.show == '1') {
console.log("<= all users button clicked");
localStorage.setItem("showAllEvents", 1);

//show/hide buttons
$("#showFriendEventsButtonWrapper").show();
$("#showAllEventsButtonWrapper").hide();
}

if (data.show == '0') {
console.log("<= only friend button clicked");
localStorage.setItem("showAllEvents", 0);

//show/hide buttons
$("#showFriendEventsButtonWrapper").hide();
$("#showAllEventsButtonWrapper").show();
}

//now refresh news feed
console.log("<= refreshing news feed =>");
newsFeedDataSource.read();
                            
console.log(newsFeedDataSource);
$("#newsFeed").data("kendoMobileListView").refresh();
//app.navigate("#view-Home"); 
} 

Hi guys,

Im trying to disable or enable a button command into the grid based on some condition from data, how can I do that?

Thanks In Advance.

KMI