I am using Wijmo grid and want get the Currency value of respected Country dropdown used inside wijgrid.
Simply I am able to get the same functionality without Wijgrid but not in case of Wijgrid.
So please do the needful and the code is below inline-
CSHTML code:
<td style="border: 1px solid black;">
#Html.DropDownListFor(m => Model[i].IdCountry, new SelectList(Model[i].HCCountry, "Id", "Value"), "-Select-", new { #id = "country", style = "width: 75px;" })
</td>
<td style="border: 1px solid black;">
#Html.TextBoxFor(m => Model[i].txt_Currency, new { #id = "currency", style = "width:50px; border: none;" })
</td>
JQuery Code:
$(function() {
$('#country').change(function () {
// fetch the newly selected value
var selectedValue = $('#country').val();
// send it as an AJAX request to some controller action
$.post('#Url.Action("~/Application/GetCurrencies")', { value: selectedValue }, function (result)
{ $('#currency').html(result); });
});
});
Thanks & Regards
Deepak
You can handle the afterCellEdit event of the WijGrid and can get the desired value. You may refer to the following demo implementing custom editors:
http://wijmo.com/demo/explore/?widget=Grid&sample=Custom%20Editors
Related
Assuming the following:
I have an HTML page that loads a template.
The template name is scheduleTable.
The template desrcribes an HTMLTable, with (of course) various trs and tds, with a particular td that uses a CSS class named "tddetails1"
If I want to respond with JavaScript to a right-click on that "tddetails1" element, I would think I would need code something like this in the js file:
Template.scheduleTable.events({
"right-click .tddetails1": function (event) {
// do something
});
But what event can I use? There is no "right-click" event, and I don't want to capture "regular" (left) clicks. Am I doomed to use an html button in each td, and respond to their click events?
UPDATE
Yes, Christian's answer was "spot on"; this works:
HTML
<template name="tblExpenseDescription">
<table width="75%" border="1">
<tr>
<td width="200px"><strong>Description of Expense</strong></td>
<td class="rc1" >Date 1: <input type="date" id="date1" name="date1"/>
</td>
. . .
JavaScript
if (Meteor.isClient) {
Template.tblExpenseDescription.events({
"mousedown .rc1": function (event) {
if (event.button == 2) {
console.log('date1 was right-clicked');
}
}
});
}
Just use the mousedown event handler and check that event.button == 2:
Template.scheduleTable.events({
"mousedown .tddetails1": function (event) {
if (event.button == 2) {
// this code will run on right-click
// do something
}
}
});
EDIT:
To also prevent the context menu from popping up add:
"contextmenu .tddetails1": function (event) {
return false;
}
into your event handler object.
I have a code where I used checkbox in order for the user to choose his preferences.
Here is the code in my controller.
[HttpPost]
public ActionResult Selected_Softwares(string[] type){
var results = db.Softwares_Reports_vw.Where(s => type.Contains(s.software_name)).OrderBy(s=>s.software_name);
//here i tried to pass the parameter to viewbag
ViewBag.type = type;
return PartialView(results);
}
In my view:
<span style="float:right"> <input type="button" style="border: 2px groove #FBF5EF; background-color:ActiveCaption;"
class="my-button" value="Export Data To Excel" name="back"
onclick="#("location.href='" + Url.Action("toExcel_Results2", "Softwares", new { softwares = ViewBag.type }) + "'")" /> </span>
And in my controller for the excel reports:
public ActionResult toExcel_Results2(string[] softwares)
{
Response.AddHeader("Content-Type", "application/vnd.ms-excel");
return View(db.Softwares_Reports_vw.Where(s => softwares.Contains(s.software_name)).OrderBy(s=>s.software_name);
}
But the parameter here had no value. Why? Any help is greatly appreciated.
If you look at the HTML (in the browser F12 tools) for the button labeled "Export Data To Excel" in your Softwares\Selected_Softwares view, you'll see something like this (look at the onclick event):
<input type="button" style="border: 2px groove #FBF5EF;
background-color:ActiveCaption;" class="my-button"
value="Export Data To Excel" name="back"
onclick="location.href='/Softwares/toExcel_Results2?softwares=System.String[]'">
Notice that the object that you put into your ViewBag (a string[]) simply is getting serialized in the HTML as literally "System.String[]". This is because all ASP.NET MVC does is call ToString() on that object. When you call ToString() on a string[], you get the string "System.String[]".
Here's what I would recommend... you seem to be wanting to send some data to your "toExcel_Results2" action. This usually indicates that you want a POST rather than a GET. Here's a fairly simple solution. Just change your Selected_Softwares view to include this:
#using (Html.BeginForm("toExcel_Results2", "Softwares", FormMethod.Post, new { id = "MyForm" }))
{
<span>
<input type="button" style="border: 2px groove #FBF5EF; background-color:ActiveCaption;"
class="my-button" value="Export Data To Excel" name="back"
onclick="document.getElementById('MyForm').submit();" />
#for (int i = 0; i < ViewBag.type.Length; i++)
{
#Html.Hidden("softwares[" + i.ToString() + "]", (string)ViewBag.type[i]);
}
</span>
}
With this, you'll find that your "toExcel_Results2" action is able to receive the full array of strings.
I have two logical groups of input fields I need to validate separately using JQuery Validation however since I am using ASP.Net WebForms I'm restricted to having just one form tag on the page.
I've implemented validation groups even though I have one form using the following technique from Dave Ward's blog post. This works perfectly.
To bind the validation event to the ASP.Net form looks as follows:
$("#aspnetForm").validate({
onsubmit: false,
ignore: ":hidden",
errorClass: 'dynamic-class'
});
I need to take this further by having a different errorClass value based on whether I am trying to submit (and validate) Form A or Form B. E.g. "Form A" would have "error-class-a" and "Form B" would have "error-class-B". I actually want to do this with other validation settings such as errorPlacement and errorElement but I've tried to keep this explanation simple.
Is there a way I can inject this behaviour without having to hack away at the JQuery Validation plugin source code?
I started by adding validation groups (as per Dave Ward's blog post) so I had two logical groups. After a VERY long look into the JQuery Validate documentation and source code I narrowed the investigation down to a single function: showErrors(). This gets called each time before any error is potentially displayed whether it is on the form submission event or a blur event of one of the elements. By changing the settings accordingly this ensures the correct display settings are always used for the right element.
In the code below one validation group is set to display errors in a UL list summary and the other inline and with a different css class. I've extended the showErrors() function to dynamically switch the error settings based on which validation group the element that has an error is contained in. You could probably take this further and bind the settings to the validation container to avoid the clunky IF statement, but I've used the simple version below as it better illustrates the solution. Finally I call the defaultShowErrors() which as one would expect calls the default function in the validate framework.
$("#aspForm").validate({
onsubmit: false,
// This prevents validation from running on every
// form submission by default.
// Extend the show errors function
showErrors: function (errorMap, errorList) {
// here we get the element linked to the error.
// we then find out which validation group the element in question
// belongs to and set the correct properties
if (errorList[0]) {
var element = errorList[0].element;
// at the time of calling we configure the settings for the validate form
if ($(element).parents('.validationGroup').attr("id") == "signup") {
this.settings.errorClass = "errorSignUp";
this.settings.errorContainer = $("*[id$='uivalidation']");
this.settings.errorLabelContainer = $("*[id$='uivalidation'] ul");
this.settings.errorElement = "li";
} else {
// these are the defaults
this.settings.errorClass = "error";
this.settings.errorContainer = $([]);
this.settings.errorLabelContainer = $([]);
this.settings.errorElement = "label";
}
}
// call the default show errors function after we have hooked up the correct settings
this.defaultShowErrors();
}
});
This does exactly what I was looking for since it means I do not have to make any changes to the validate framework. This is demonstrated in the full working example below where I am using a CDN for JQuery and JQuery.Validate!
Full Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Multiple Form Validation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<style type="text/css">
*
{
font-family: Verdana;
font-size: 96%;
}
label
{
width: 10em;
float: left;
}
label.errorLogin
{
float: none;
color: blue;
padding-left: .5em;
vertical-align: top;
}
label.error
{
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
}
p
{
clear: both;
}
.submit
{
margin-left: 12em;
}
em
{
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
</style>
<script type="text/javascript">
$(function () {
$("#aspForm").validate({
onsubmit: false,
// This prevents validation from running on every
// form submission by default.
// Extend the show errors function
showErrors: function (errorMap, errorList) {
// here we get the element linked to the error.
// we then find out which validation group the element in question
// belongs to and set the correct properties
if (errorList[0]) {
var element = errorList[0].element;
// at the time of calling we configure the settings for the validate form
if ($(element).parents('.validationGroup').attr("id") == "signup") {
this.settings.errorClass = "errorSignUp";
this.settings.errorContainer = $("*[id$='uivalidation']");
this.settings.errorLabelContainer = $("*[id$='uivalidation'] ul");
this.settings.errorElement = "li";
} else {
// these are the defaults
this.settings.errorClass = "error";
this.settings.errorContainer = $([]);
this.settings.errorLabelContainer = $([]);
this.settings.errorElement = "label";
}
}
// call the default show errors function after we have hooked up the correct settings
this.defaultShowErrors();
}
});
// Search for controls marked with the causesValidation flag
// that are contained anywhere within elements marked as
// validationGroups, and wire their click event up.
$('.validationGroup .login').click(ValidateAndSubmit);
$('.validationGroup .signup').click(ValidateAndSubmit);
// Select any input[type=text] elements within a validation group
// and attach keydown handlers to all of them.
$('.validationGroup :text').keydown(function (evt) {
// Only execute validation if the key pressed was enter.
if (evt.keyCode == 13) {
ValidateAndSubmit(evt);
}
});
});
function ValidateAndSubmit(evt) {
// Ascend from the button that triggered this click event
// until we find a container element flagged with
// .validationGroup and store a reference to that element.
var $group = $(evt.currentTarget).parents('.validationGroup');
var isValid = true;
// Descending from that .validationGroup element, find any input
// elements within it, iterate over them, and run validation on
// each of them.
$group.find(':input').each(function (i, item) {
if (!$(item).valid())
isValid = false;
});
// If any fields failed validation, prevent the button's click
// event from triggering form submission.
if (!isValid)
evt.preventDefault();
}
</script>
</head>
<body>
<form id="aspForm" runat="server">
<fieldset class="validationGroup" id="login">
<div id="uivalidation">
<ul></ul>
</div>
<legend>Register</legend>
<p>
<asp:Label ID="uiFirstName" runat="server" AssociatedControlID="uxFirstName" Text="First name:"></asp:Label>
<asp:TextBox ID="uxFirstName" runat="server" CssClass="required"></asp:TextBox>
</p>
<p>
<asp:Button ID="uxRegister" runat="server" Text="Register" CssClass="login" />
</p>
</fieldset>
<fieldset class="validationGroup" id="signup">
<legend>Login</legend>
<p>
<asp:Label ID="uiUserName" runat="server" AssociatedControlID="uxUserName" Text="User name:"></asp:Label>
<asp:TextBox ID="uxUserName" runat="server" CssClass="required"></asp:TextBox>
</p>
<p>
<asp:Button ID="uxLogin" runat="server" Text="Login" CssClass="signup" />
</p>
</fieldset>
</form>
</body>
</html>
If this could be further improved please jump in and edit the code.
I am replacing this 'hand-rolled' tabstrip with the Telerik Extensions Tabstrip below it, but I can't fathom how to get the Tabstrip to include the target attribute in the URL for each item. How can I achieve this?
Before:
<ol>
#foreach (var sheet in Model.Sheets)
{
<li>
#sheet.Name</li>
}
</ol>
After:
#Html.Telerik().TabStrip().Name("Card").BindTo(Model.Sheets, (item, tabInfo) =>
{
item.Text = tabInfo.Name;
item.Url = Url.Content(Server.MapUrl(tabInfo.FilePath));
})
You could use the LinkHtmlAttributes property to set additional html attributes:
item.LinkHtmlAttributes = new Dictionary<string, object>
{
{ "target", "selected-worksheet" }
};
Actually I've never used Telerik, so I am not quite sure if you have to instantiate a new dictionary or simply add a key (in case the property is automatically instantiated):
item.LinkHtmlAttributes["target"] = "selected-worksheet";
I think I had a similar problem with the Telerik TreeView and solved it via a detour with jQuery.
My problem was, that it didn't work to pass any (Link)HtmlAttributes, to the TreeViewItems in the View. I tried to add several HtmlAttributes to the TreeViewItem in the Controller: (e.g. one attribute I wanted to add to the < a > element):
newNodes[i].HtmlAttributes.Add("data-ajax-update","#main");
, but after return as JsonResult of the Ajax-Request, all except .Text, .Value, .Enabled, .LoadOnDemand, .Url were then empty in the View.
I found a sensible answer that these elements are not getting serialized in the Telerik forum:
http://www.telerik.com/community/forums/aspnet-mvc/treeview/target-blank-on-treeviewitem-url.aspx#1548458
I solved it then, with adding a special
<span class="treeViewItemAddAjaxLocation"></span>
element to the .Text of the TreeViewItem. Locating these elements then via jQuery in the View and adding the desired html-attributes to the < a > element.
Telerik TreeView Binding method of the 2nd and 3rd stage elements via Ajax:
.DataBinding(databinding => databinding.Ajax().Select("_AjaxLoading", "Menu"))
Controller snippet in Action "_AjaxLoading":
IList<TreeViewItem> newNodes = new List<TreeViewItem>();
foreach (RevisionEntity revision in revisions)
{
newNodes.Add(new TreeViewItem()
{
Text = "Node Name" + "<span class='treeViewItemAddAjaxLocation'></span>", // name + locator element
Value = revision.ID.ToString() + ";RevisionEntity",
Encoded = false,
Enabled = true,
LoadOnDemand = false,
Url("/Menu/NavigateToRevisionDetails"), // creates an < a > element
});
}
return new JsonResult { Data = newNodes };
View:
<div class="t-bot">
<a class="t-link t-in" href="/Menu/NavigateToRevisionDetails" data-ajax-update="#main" data-ajax-mode="replace" data-ajax-method="GET" data-ajax="true">Node Name
<span class="treeViewItemAddAjaxLocation"></span>
</a>
<input class="t-input" type="hidden" value="774336a5-c6eb-42cc-905a-4d215c957fa2;RevisionEntity" name="itemValue">
</div>
function TreeView_onLoad(e) {
var treeView = $(this).data("tTreeView");
$(".treeViewItemAddAjaxLocation", treeView.element)
.each(function () {
var $this = $(this); // put it in jQuery constr
item = $this.closest(".t-link"); // take the a
item.attr('data-ajax-update', '#main');
item.attr('data-ajax-mode', 'replace');
item.attr('data-ajax-method', 'GET');
item.attr('data-ajax', 'true');
$this.remove(); // removes the span element
});
}
Result TreeView element:
<div class="t-bot">
<a class="t-link t-in" href="/Menu/NavigateToRevisionDetails" data-ajax-update="#main" data-ajax-mode="replace" data-ajax-method="GET" data-ajax="true">Node Name</a>
<input class="t-input" type="hidden" value="774336a5-c6eb-42cc-905a-4d215c957fa2;RevisionEntity" name="itemValue">
</div>
Loads the PartialView invoked through "NavigateToRevisionDetails" Action via Ajax in the #main html-element and the rest of the page doesn't get refreshed!
If I have an HTML helper like so:
Name:<br />
<%=Html.TextBox("txtName",20) %><br />
How do I apply a CSS class to it? Do I have to wrap it in a span? Or do I need to somehow utilize the HtmlAttributes property of the helper?
You can pass it into the TextBox call as a parameter.
Name:<br/>
<%= Html.TextBox("txtName", "20", new { #class = "hello" }) %>
This line will create a text box with the value 20 and assign the class attribute with the value hello. I put the # character in front of the class, because class is a reserved keyword. If you want to add other attributes, just separate the key/value pairs with commas.
This is how to add a class and a style on the same element...
"x" being the model passed to the view with a property of TextBoxID
#Html.TextBoxFor(x => x.TextBoxID, new { #class = "SearchBarSelect", style = "width: 20px; background-color: green;" })
I did some research and came across this article that seems to have a solution to your question.
Ajax Control Toolkit with ASP.NET MVC#
source: jimzimmerman
ARTICLE LINK
http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=330
QUOTE
So basically if you put the class name
TextboxWatermark on any textbox input
with the title you like to show as the
watermark like this:
<input type="text" class"TextboxWatermark" name="username" id="username" title="Must be at least 6 chars" />
or
<%= Html.TextBox("username", new { #class = "TextboxWatermark", #title = "Must be at least 6 chars" }) %>
What is nice about the second option
is that you get the added benefit of
getting the View Engine to fill out
the value of the textbox if there is
an item in ViewData of the
ViewData.Model that has a var named
'username'.
Use the htmlAttributes parameter with an anonymous type, like tihs:
<%=Html.TextBox("txtName","20", new { #class = "test"}) %>
the helper implementation
public static class LabelExtensioncs
{
public static MvcHtmlString Alarm(this HtmlHelper helper, string target, string text)
{
return MvcHtmlString.Create(string.Format("<p class='alert' style='background-color: #b8f89d;border-radius: 5px;width: 100%;'><b>{0}</b><br /><i>{1}</i></p>", target, text));
}
}
the usage in view section
#Html.Alarm("Title", "please unsure your card no is invisible in your authorized information")
the result
Theres no need to use span, because its not dynamic.
Css:
.testClass {
color: #1600d3;
}
View (Index):
#Html.TextBox("expression", "Text to show.", new { #class = "testClass" })
if you need dynamic options you can use for example:
CSS:
.test class{
background: #ffffff;
}
Controller (Index for test):
[HttpGet]
public ActionResult Index()
{
ViewBag.vbColor = "#000000";
return View();
}
View (Index):
<div>
<span>
#Html.TextBox("expression", "Text to show.", new
{ #class = "testClass", #style="color: " +
#ViewBag.vbColor })
</span>
</div>
Hope it helps.
Is it that much more work?