I am using telerik dropdownlist in telerik grid. Now i want to fire some validation on dropdownlist on blur or focus out if value is "select". Here i am not changing items in dropdownlist. Initially it is "Select" only. Any help will be appreciated.
$('#Claim_Status').live('blur', function () {
if ($('#Claim_Status').val() == "") {
var str = "<span class='field-validation-error' data-valmsg-replace='true' data-valmsg-for='Claim_Status'>";
str = str + "<span class='' for='Claim_Status' generated='true'>Field is required.</span></span>";
$("span[data-valmsg-for='Claim_Status']").replaceWith(str);
}
});
Why don't you just use the change event of the DropDownList and execute your logic when it occurs?
Related
We are using primefaces 5.1 in the project, in a p:calender after I select a date in the pop up calendar window, the text field will lose focus. The issue caused by this is you can not use tab to focus on next field in the form, it will go to the first element in the form instead. Even the primefaces showcase has this issue:
http://www.primefaces.org/showcase/ui/input/calendar.xhtml
Any suggestion on how to solve it ?
After some search and local testing while waiting for the answer. I comes out a way to fix this.
It is actually a JQuery UI bug (or may be not as it been there since the first version and still got no official fix!). We need to override the jQueryUI datepicker used by primefaces. Make sure to put the import for that custom script in the last facet so it will be pick up as a resource in the last order.
<f:facet name="last">
<h:outputScript name="default/js/customDatePicker.js" />
</f:facet>
Inside the JavaScript code I do the following to merge the _selectDate into datepicker(the change is in the last else) which will over ride the orginal _selectDate without changing the others. It will do the trick for me on Chrome and IE11.
$(document).ready(function () {
$.extend(jQuery.datepicker, {
_selectDate: function (id, dateStr) {
var onSelect,
target = $(id),
inst = this._getInst(target[0]);
dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
if (inst.input) {
inst.input.val(dateStr);
}
this._updateAlternate(inst);
onSelect = this._get(inst, "onSelect");
if (onSelect) {
onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); // trigger custom callback
} else if (inst.input) {
inst.input.trigger("change"); // fire the change event
}
if (inst.inline) {
this._updateDatepicker(inst);
} else {
this._hideDatepicker();
inst.input.focus();
}
}
});
});
Summary: I want to enter a text to the textbox, push the button, and the GridView should display the reduced content -- filtered by the value.
Details: Being a DevExpress APS.NET MVC 5 beginner, I have a simple demo application that uses the GridView. The first example uses the Gridview with filter row -- everything generated by the DevExpress (14.2) GridView wizard.
When entering some value to the column filter, the displayed content is reduced after a while:
I need to implement the alternative where I enter the value to the textbox, and the GridView content is updated only after pushing the Apply button:
The view is defined as follows:
#{
ViewBag.Title = "GridView filtering";
}
<h2>#ViewBag.Title</h2>
#Html.DevExpress().Label(settings =>
{
settings.Name = "Label";
settings.Text = "Filter for the Name column";
}).GetHtml()
#Html.DevExpress().TextBox(settings =>
{
settings.Name = "TextBox";
}).GetHtml()
#Html.DevExpress().Button(settings =>
{
settings.Name = "BtnApply";
settings.Text = "Apply";
settings.UseSubmitBehavior = true;
}).GetHtml()
#Html.Action("GridViewPartial")
I am lost on how to bind the button click to the functionality, how to get the textbox content, and how to pass it to the GridView and make it updated.
The Apply button should not perform submit in this scenario. Set its UseSubmitBehavior property to False. Handle the button's client-side Click event. To access it in mark-up, use ButtonSettings.ClientSideEvents:
#Html.DevExpress().Button(settings =>
{
settings.Name = "BtnApply";
settings.Text = "Apply";
settings.UseSubmitBehavior = false;
settings.ClientSideEvents.Click = "btnApplyClick";
}).GetHtml()
In the btnApplyClick JS function, use the TextBox'es clien-side GetText method to get the text typed in your TextBox. Then, use the Grid's client-side AutoFilterByColumn to apply your filter to the grid by the Name column:
<script type="text/javascript">
function btnApplyClick(s, e) {
var filter = TextBox.GetText();
GridView.AutoFilterByColumn("Name", filter);
}
</script>
Where "GridView" is the name of your GridView extension.
I created an alternate for the main menu called MenuItemLink-main-menu-MainNavigation-MenuItem.cshtml because I want to render the menu differently in a Zone called main navigation. vs other places I am using the same menu on the page like the footer. I copied the MenuItem shape and renamed it (MenuItemLink-main-menu-MainNavigation-MenuItem.cshtml) everytime I run it I get an overflow because of the following line.
var renderedMenuItemLink = Display(Model);
can someone please explain to me why this is happening and the best way to create a zone based shapes for the navigation.
You copied markup from one shape (MenuItem) and paste it to another shape (MenuItemLink).
MenuItem calls Display for MenuItemLink
Then you calls Display for MenuItemLink inside MenuItemLink - this is an infinite loop.
For add alternate inside theme for MenuItemLink:
First. Create alternate for menu widget (Parts.MenuWidget.cshtml)
#using Orchard.ContentManagement;
#using Orchard.Widgets.Models;
#{
var widgetPart = ((IContent)Model.ContentItem).As<WidgetPart>();
Model.Menu.Zone = widgetPart.Zone;
}
Second. Create alternate for menu item (MenuItem.cshtml) and add one line (after line Model.Metadata.Type = "MenuItemLink";)
Model.Metadata.Type = "MenuItemLink";
(Model as Orchard.DisplayManagement.Shapes.Shape).Metadata.OnDisplaying(action =>
action.ShapeMetadata.Alternates.Add("MenuItemLink__Zone__" + (string)Model.Menu.Zone)
);
For add alternate inside theme for MenuItem:
First. Create alternate for menu widget (Parts.MenuWidget.cshtml)
#using Orchard.ContentManagement;
#using Orchard.Widgets.Models;
#using Orchard.DisplayManagement.Shapes;
#{
var widgetPart = ((IContent)Model.ContentItem).As<WidgetPart>();
var items = Model.Menu.Items as List<dynamic>;
AddMenuItemAlternate(items, widgetPart.Zone);
}
#functions{
public void AddMenuItemAlternate(List<dynamic> items, string zoneName)
{
foreach (var item in items)
{
item.Metadata.Alternates.Add("MenuItem__Zone__" + zoneName);
var subitems = (List<dynamic>)Enumerable.Cast<dynamic>(item.Items);
AddMenuItemAlternate(subitems, zoneName);
}
}
}
Update 2015.08:
I create module that adds widget name and zone name alternates for menu, menuItem and menu item link shapes. You can download one from orchard gallery https://gallery.orchardproject.net/List/Modules/Orchard.Module.MainBit.Navigation
I'm using two panes (grid and details) as master-details pattern.
Now I'm trying to create "Details on the right" or "Details on the bottom" toggle button. I do this by changing the region attribut of the ContentPane, like so:
function toggleDetails() {
if(dijit.byId("Details").region == "right") {
dijit.byId("Details").set("region", "bottom");
dojo.byId("Details").style.height = "200px";
}
else {
dijit.byId("Details").set("region", "right");
dojo.byId("Details").style.width = "400px";
}
dijit.byId("DetailsParent").resize();
}
The panes themselves are changing fine. The problem is that I have a splitter for the details pane. When toggling, the splitter is ok for the original orientation, but doesn't render correctly for the alternate orientation. Any solution to refresh the splitter orientation based on the contentPane region?
I have tried programmatically changing some of splitter widget attributes, like "horizontal" and "region", but nothing really fixed the alternate orientation.
A possible solution could be by using removeChild and addChild like in this example
if (isVertical) {
// vertical layout
this.ap_MainContainer.removeChild(this.ap_TopContainer);
this.ap_TopContainer.region = 'top';
this.ap_MainContainer.addChild(this.ap_TopContainer);
} else {
// horizontal layout
this.ap_MainContainer.removeChild(this.ap_TopContainer);
this.ap_TopContainer.region = 'left';
this.ap_MainContainer.addChild(this.ap_TopContainer);
}
I am using menu using dijit.menu and Its work with right click and left click.
How I open the menu on mouse over and close on onmouseout?
dijitActionMenu = new dijit.Menu({
targetNodeIds:[actionMenuId],
leftClickToOpen:"true"
});
Have you tried something like
// Create a new Tooltip
var tip = new dijit.Tooltip({
// Label - the HTML or text to be placed within the Tooltip
label: '<div class="myTipType">This is the content of my Tooltip!</div>',
// Delay before showing the Tooltip (in milliseconds)
showDelay: 250,
// The nodes to attach the Tooltip to
// Can be an array of strings or domNodes
connectId: ["myElement1","myElement2"]
});
More details are here dialogs_tooltips.Even dijit.Menu have onMouseOver even.
onMouseOver Event
I am able to get the dijit/Menu onmouseover.
Create an element which will invoke onmouseover event.
Element
show() will call custom widget which will create menu for you.
E.g.,
show = function() {
var roll = new rollover()
}
And rollover.js will be the custom widget.
From the constructor of it, you can invoke the function and create the menu.
pMenu = new Menu({ class: "rollovermenu", id: "rolloverid" });