I'm using Telerik's MVC grid, and I would like to submit batch edit mode changes with some out of grid values. According to this telerik forum I can call the grid's submitChanges function and supply non-grid values inside the OnSubmitChanges event. This function only gets called if the grid has changes. There can be a case when values are changed outside of the grid but grid values are not saved. Is it possible to force the submission so that non-grid values can be submitted?
Good thing Telerik MVC Extensions are open source. I figured out the answer the following way:
function SaveCriteriaChanges() {
var grid = $("#MyGridId").data("tGrid");
//don't submit if grid fails validation
if (!grid.validate())
return false;
if (grid.hasChanges()) {
grid.submitChanges();
} else { //no grid changes to process so force submission
var additionalValues = {};
if(!$.telerik.trigger(grid.element, 'submitChanges', { values: additionalValues })) {
grid.sendValues($.extend({}, additionalValues), 'updateUrl', 'submitChanges');
}
}
return true;
}
Related
hoping someone can point out where I am going wrong. I am working on an MVC 5 ASP.NET application. In my View I have a form which, amongst other controls, has 2 dropdown boxes.The first dropdown is populated with values in the Viewbag, but I want to populate the second dropdown based on the value selected in the first dropdown. I've read lots of other posts but still can't work it out.
Here is the code for the dropdowns.
#Html.DropDownList("EquipmentPortList", new SelectList(ViewBag.EquipmentPortList, "hvid", "hvnamn"), "--Select Equipment--")
#Html.DropDownList("PortConnectedList", Enumerable.Empty<SelectListItem>(), "--Select Port--")
Here is the change event code for the first dropdown :-
$(document).on('change', '#EquipmentPortList', function () {
var url = '#Url.Action("GetPortInt", "bearers")';
var ports = $('#PortConnectedList');
var id = $(this).val();
$.getJSON(url, { portid: id }, function (response) {
ports.empty();
$.each(response, function (index, item) {
ports.append($('</option>').text(item.portnamn).val(item.portid));
});
});
});
Here is the method in the controller :-
public ActionResult GetPortInt(int portid)
{
var PortConnectedList = from h in nadb.hvportar
where h.porthvid == portid && (h.portnamn.Contains("NT") || (h.portnamn.Contains("Port")) || (h.portnamn.Contains("/")))
orderby h.portid
select new { h.portid, h.portnamn };
return Json(PortConnectedList, JsonRequestBehavior.AllowGet);
}
OK, so the first dropdown populates correctly, and when I select a value I can see (using alerts) that the change event fires and the value is correctly selected.
I can see with the use of a breakpoint that the method is triggered and returns the correct data from the database, but after that I don't know what is wrong as the dropdown does not populate.
I picked up the code change event code from another post and amended it to fit my own project but I can't see what I'm missing. Thanks.
Stephen, your DotnetFiddle link actually showed me the answer. This line :-
ports.append($('</option>').text(item.portnamn).val(item.portid));
Should read
ports.append($('<option></option>').text(item.portnamn).val(item.portid));
Once I changed that it worked. Many thanks.
I have a xpage that loads a Bootstrap modal window (see picture). I need to validate the data only the user pushes the 'Add New' button. I do not want the validators to run when 'Save and Continue' or 'Previous' buttons are pressed.
The modal dialog is a custom control used many times throughout the application. I cannot change the buttons to disable validators because most of the time I want to validate. The center content is stored in its own custom control.
My question is can I add code to the button to get a handle to each control, and set the disableValidators to true. I haven't been able to figure out how to do this. I have already tried computing the disableValidators but was totally unsuccessful. The fields are all bound to scoped variables.
I know that I can use clientside validation here, but the rest of the application uses server-side and I want to be consistent + this is a responsive app, and clientside on mobile is annoying.
Rather than adding code to button to and setting disableValidators for each control I would suggest the other way round. For each control set the required property only if user pushes 'Add New' button.
This blog post by Tommy Valand describes it in detail. The below function lets you test if a specific component triggered an update.
// Used to check which if a component triggered an update
function submittedBy( componentId ){
try {
var eventHandlerClientId = param.get( '$$xspsubmitid' );
var eventHandlerId = #RightBack( eventHandlerClientId, ':' );
var eventHandler = getComponent( eventHandlerId );
if( !eventHandler ){ return false; }
var parentComponent = eventHandler.getParent();
if( !parentComponent ){ return false; }
return ( parentComponent.getId() === componentId );
} catch( e ){ /*Debug.logException( e );*/ }
}
So if you want the validation to run only when the user clicks a specific 'Add New' button then write this in all the required-attributes:
return submittedBy('id-of-add-new-button')
I have using telerik grid in telerik window. However, on saving record in telerik window want to rebind another grid. However, grid is not rebinding. It happens only when you refresh the page. I want some method to be called once ajaxbinding for insert is done so as to rebing another grid.
This is a little tricky with the Telerik grids. Basically, you need to set a Javascript variable (flag) on submit of grid 1. Then on databinding of grid 1, if the flag is true, then rebind grid 2. Something like this:
var grid1SubmitChanges = false;
function Grid1_OnSubmitChanges(e) {
grid1SubmitChanges = true;
}
function Grid1_OnDataBinding(e) {
if (grid1SubmitChanges) {
// toggle the flag so you don't always rebind Grid2 when Grid1 binds
grid1SubmitChanges = false;
// rebind Grid2
var grid2 = $('#Grid2').data('tGrid');
grid2.rebind();
}
}
I have checked and tried the method posted here to set where CKEditor dialogs pop up:
Programatically set the position of CKEditor's dialogs
This seems to either be deprecated or incomplete. When attempting this for the 'link' dialog, the dialog box does not format correctly, as if this onShow definition replaces the default action rather than adding to it. Any suggestions to alter this code or a new method to position the link dialog closer to the menu bar?
CKEDITOR.on('dialogDefinition', function(e) {
var dialogDefinition = e.data.definition;
dialogDefinition.onShow = function() {
this.move(200, 100);
}
})
You're right. Your code is overwriting the basic onShow definition.
What you have to do is simply to save a default (generic) onShow, then overwrite it so it calls the saved one and eventually executes your code:
CKEDITOR.on( 'dialogDefinition', function( event ) {
var dialogDefinition = event.data.definition,
genericOnShow = dialogDefinition.onShow;
dialogDefinition.onShow = function() {
genericOnShow.apply( this );
this.move( 10, 10 );
// ...or anything you want ;)
}
});
Voilà!
PS. Remember to always pass the context with apply or call.
I want to be able to add an onBlur/onkeypress/onChange events to all TypeAhead fields on the form rather than have a developer select every one in the Designer client. The only thing I cannot get a handle on is the onChange event.
When the user selects something in the TypeAhead the onChange event is triggered when adding the code directly to the event in the Domino Designer - so I should be able to replicate that capability with code.
If my typeAhead field is called inputText2 I thought I would be able to do the following
var widget = dojo.byId("#{id:inputText2}")
dojo.connect(widget, 'onChange', function (){
alert('1')
});
However this doesn't appear to work...
I tried lowercase onchange
var widget = dojo.byId("#{id:inputText2}")
dojo.connect(widget, 'onchange', function (){
alert('1')
});
no luck there either
I tried
var widget = dijit.byId("#{id:inputText2}");
but that failed to event select the element entirely
So what do I need to do to trigger the onchange event when selecting an option in the typeAhead?
I found a solution.....not ideal but it worked for the moment - not generic though, but a start
Copying the way XPages does it....add this to the page
function view__id1__id2__id31__id50_clientSide_onchange(thisEvent) {
alert('me')
}
and then
dojo.addOnLoad(function(){
XSP.addOnLoad(function() {
XSP.attachEvent("X1","view:_id1:_id2:_id31:inputText2", "onchange", view__id1__id2__id31__id50_clientSide_onchange, false, 2);
});
});
});
X1 must be unique but everything else can be calculated
Thanks to Serdar Basegmez