Develop Reference

ASP.NET MVC razor DropDownList doesn't show the KendoGrid

I have an ASP.NET MVC DropDownList:
#{var selectionList = new List<SelectListItem>
{
new SelectListItem { Text = "All Patients", Value="All Patients" },
new SelectListItem { Text = "Chosen Patients", Value="Chosen Patients" }
};
}
#Html.DropDownList("Selection",new SelectList(selectionList,"Value","Text"))
I have also a KendoGrid that should be hided before click on the list item: "Chosen Patients":
<script type="text/javascript">
$('#CheckedPatientsRep').hide();
</script>
This is KendoGrid:
#(Html.Kendo().Grid<RunSummary>()
.Name("CheckedPatientsRep")
//.Events( events => events.DataBinding("onDataBinding"))
.DataSource(datasource => datasource
.Ajax().PageSize(25)
.ServerOperation(false)
.Sort(sort => sort.Add("UniqueId").Ascending())
.Read(read => read.Action("GetRunSummaries", "PatientReport")))
.Columns(columns =>
{
etc.
I would like to show the KendoGrid after click on "Chosen Patients" in the DropDownList. This is my code for click:
<script>
$("#Selection").click(function () {
var selectedValue = $(this).find('option:selected').val();
if (selectedValue.toLower() == "chosen patients") {
$('#CheckedPatientsRep').show();
}
});
</script>
I have two problems: the KendoGrid is not hided at first, and the second is that the click doesn't work. How to solve this? Thank you in advance for any help.

Everything is ok now :). I only put the code
<script type="text/javascript">
$('#CheckedPatientsRep').hide();
</script>
before KendoGrid. The code for click also works, except it should use the function toLowerCase() instead of toLower().

Disable Esc key on Kendo Window Popup

I am using KendoUI controls with JavaScript with MVC. I have a popup window create by "kendoWindow".
its working fine, but when i press ESC key it will automatically close.
I want to disable the ESC key so that window popup can be only closed by Cancel button or close button.
Here is my Kendo Window code.
var wndEditClient= $("#divEditClient")
.kendoWindow({
title: "Edit Client",
modal: true,
visible: false,
resizable: false,
width: 450,
actions: ["Close"]
}).data("kendoWindow");
wndEditClient.open();
Please Suggest.
I tried JavaScript keypress event and all that but does not work.
$(document).bind("keypress", function (e) {
if (e.keyCode == 27) {
e.preventDefault();
}
});
Tried this but not working.

Put this before including your first Kendo Window directive:
$(function () {
kendo.ui.Window.fn._keydown = function (originalFn) {
var KEY_ESC = 27;
return function (e) {
if (e.which !== KEY_ESC) {
originalFn.call(this, e);
}
};
}(kendo.ui.Window.fn._keydown);
});
(demo)

Display the alert box when change the #html.DropDownList value

#Html.DropDownListFor(model => model.Status, new List<SelectListItem>
{ new SelectListItem{Text="Active", Value="1",Selected =true},
new SelectListItem{Text="Deactive", Value="0"}})
If i change the value Active to De active display the one alert box. How to display the alert box.

You could use the change() handler in Jquery to listen for the event.
$( "#targetId").change(function() {
alert( "Something changed handle it here" );
});
http://api.jquery.com/change/

Razor:-
#Html.DropDownListFor(model => model.Status, new List<SelectListItem>
{ new SelectListItem{Text="Active", Value="1",Selected =true},
new SelectListItem{Text="Deactive", Value="0"}})
Jquery(Change event is called when you change the dropdownlist value whose id is attached in below query) :-
<script>
$(document).ready(function(){
$('select#status').change(function() {
alert("value changed. New value is " + $(this).val());
});
});
});
</script>

Add this code in your master layout or in view in which Dropdown is:
First Way:
Jquery CODE:
<script>
$(document).ready(function(){
$('select#status').change(function() {
alert($(this).val());
});
});
</script>
Second Way:
Or you can add your own id like this:
#Html.DropDownListFor(model => model.Status, new List<SelectListItem>
{ new SelectListItem{Text="Active", Value="1",Selected =true},
new SelectListItem{Text="Deactive", Value="0"}
},
null,
new {#id="DDLStatus"})
and script:
<script>
$(document).ready(function(){
$('select#DDLStatus').change(function() {
alert($(this).val());
});
});
</script>
Note: make sure that jquery script file is included in your master layout mostly it is in View --> Shared --> _Layout.cshtml

jQuery Confirm Replacement In A Simple Situation [duplicate]

Following up from this question, I'm trying to implement an unobtrusive confirm dialog.
$(document).ready(function () {
$("[data-confirmPrompt]").click(function (event) {
var confirmPrompt = event.currentTarget.attributes['data-confirmPrompt'].value;
event.preventDefault();
$.prompt(confirmPrompt, {
buttons: { Yes: true, No: false },
callback: function (v, m, f) {
if (v) {
// User clicked Yes. Unbind handler to avoid
// recursion, then click the target element again
$(event.currentTarget).unbind('click');
event.currentTarget.click();
}
}
});
});
});
When the user has clicked on "Yes", I want the default action associated with the event to execute. I've done it above by unbinding the jQuery handler, and clicking the element again. This works fine when submitting a form or navigating to a different page - but of course does not work in AJAX-enabled pages, where I want to keep the jQuery event handler.
Is there an alternative generic way to execute the default action? Logically something like event.executeDefault().

Using the suggestion Alexey Lebedev made in his second comment, my current implementation now looks like the sample below, except that I've also added my own implementation of localization for the button labels.
Notes:
I'm now using a jqueryUI dialog widget
Note the use of .delegate so that the handler is "ajax-aware", i.e. works on elements added to the DOM after the page is loaded, e.g. as a result of an AJAX call
Uses a flag to prevent recursion when the user clicks Yes on the confirm dialog.
Uses jquery 1.6.4 and jquery-ui-1.8.16
If anyone can suggest improvements, please chime in.
<!-- Examples of usage -->
<input type='submit' data-confirm="OK to delete customer 123?" ... />
<a href="..." data-confirm="OK to navigate?" ... />
<!-- Implementation -->
<script type="text/javascript">
var confirmClickHandler = function (event) {
if ($(event.currentTarget).data('isConfirming')) return;
var message = event.currentTarget.attributes['data-confirm'].value;
event.preventDefault();
$('<div></div>')
.html(message)
.dialog({
title: "Confirm",
buttons: {
"Yes": function () {
$(this).dialog("close");
$(event.currentTarget).data('isConfirming', true);
event.currentTarget.click();
$(event.currentTarget).data('isConfirming', null);
},
"No": function () {
$(this).dialog("close");
}
},
modal: true,
resizable: false,
closeOnEscape: true
});
};
$(document).ready(function () {
$("body").delegate("[data-confirm]", "click", confirmClickHandler);
});
</script>

I'm doing something similar and this works fine for me:
$('#link').click(function(e){
if(!confirm('Are you sure you want to asdf?')){
e.preventDefault();
}
});

I honestly don't know if this answers your question, but it might help a bit.
Consider the following HTML:
<button onclick="alert('Hello world!');" class="btn">Test 1</button>
<button onclick="alert(this.className);" class="btn">Test 2</button>
I've added the following to my $(document).ready:
$('button').each(function() {
var btn = $(this);
var onClick = btn.attr('onclick');
//replace this with _this
onClick = onClick.replace(/this/g, "_this");
btn.attr('onclick', '');
btn.click(function() {
if (confirm('Do it?')) {
//set _this first!
var _this = btn[0];
eval(onClick);
}
});
});
It seems to get the job done. Check this jsFiddle example: http://jsfiddle.net/KeesCBakker/4jThg/.
EDIT
I've created something that looks more like your question: http://jsfiddle.net/KeesCBakker/hqLH5/. Just couldn't figure out which $.prompt plugin your were using, so I grabbed the first one I've found from github (this one only works in Chrome :S).

I was able to achieve this by calling event.stopPropagation() from a more specific context, and ensuring that I don't call event.preventDefault(). While you can't call the default action explicitly, you can set up the conditions so that the default action happens — and do as little or as much else as you wish.
// Normal event handler
$("[data-toggle]").click(ev => {
switchToTab(ev.currentTarget)
ev.preventDefault()
})
// Allow default handler in a specific case.
$("[data-toggle] ul a").click(ev => {
// Don't bubble the event to the less specific handler, above
ev.stopPropagation()
// An incorrect return value will also cancel the default action.
return true
})

Display panel over another panel for web app

I was looking for an answer, but could not find anything helpfull yet.
I have a gridview with some data (from SQL database) and an option to delete a row. Before deleting the row I want the user to confirm the delete (pupup window). I know how to create a popup with javascript, but I don't like the apperance of that popup. I would like to make ky own "popup".
I was thinking of overlaying one panel (where I put text (Label) and some buttons (OK, Cancel)) over the panel where I have the gridview. Something like in the picture. How would I accomplish something like that?

How about using the Ajax control toolkit popup?
http://www.asp.net/ajaxlibrary/act_Popup.ashx
This seems to do exactly what you are looking for for you.

What about JQueryUI dialog with custom styling?

Use the jQuery UI dialog
Example:
<script type="text/javascript">
$(function () {
var $dialog = $("#dialog");
var $foo = $("input:submit[id$=foo]");
var confirmed = false;
$dialog.hide();
$dialog.dialog({
width: "300px",
modal: true,
autoOpen: false,
buttons: {
OK: function (e) {
$dialog.dialog("close");
confirmed = true;
$foo.click();
},
Cancel: function (e) {
$dialog.dialog("close");
confirmed = false;
}
}
});
$foo.click(function (e) {
if (!confirmed) {
$dialog.dialog("open");
}
return confirmed;
});
});
</script>
Full working example can be downloaded from here