I have an AJAX Application that I have been working on. At this point in the development - I have a modalpopupextender with a warning message and an OK and Cancel button. I have just been tasked with changing this to be three checkboxes and having the OK button disabled until all three boxes have been checked. I'm having a difficult time trying to accomplish this. I'm not sure if I should use a checkboxlist control or just three checkboxes. I am also not sure if the enabling/disabling of the button should be handled through javascript or codebehind. I have tried a little of both - with no success so any guidance is very much appreciated.
Three checkboxs would seem to work quite well if you ask me.. you can have each check box run the same validation function to check on the other 2. Also, i have found that using 'this.disable=true' would work quite well for what you are trying to accomplish. This way everything is handled under JS and there is no need to use the codebehind.
function validate() {
if ('checkbox is not checked')
return;
if ('checkbox2 is not checked')
return;
if ('checkbox3 is not checked')
return;
submit.disabled = false;
}
Related
I am using the sortable component from the Kendo UI Angular 2 library to create a list of custom components which the user can drag and drop to rearrange as they need. By default, the sortable's items can be dragged by clicking anywhere within the item. My question is: can we specify a handle like we would in the classic Kendo UI? I want the user to drag the item only when using the header of the item, not the body.
I could not find anything in the documentation and I was hoping that if anyone had done it they can point me in the right direction.
Thanks.
Without access to the TypeScript source code (only have access to the transpiled JavaScript), it's hard to tell, but based on my quick examination the answer is no. It doesn't support options like the Kendo UI JavaScript version does where you can specify a handle selector.
If you have a handle element, according to the docs, you're supposed to add the draggable="true" attribute to your element in the Sortable's template.
See http://www.telerik.com/kendo-angular-ui/components/sortable/#toc-known-limitations
<kendo-sortable [data]="items">
<ng-template let-item="item">
<button draggable="true">
{{item}}
</button>
</ng-template>
</kendo-sortable>
My experience with this Kendo Angular component is it's not that great. I have my own open issue with it. It doesn't seem to work well outside a narrow scope.
For now, at least in my project, we'll be using Dragula. There is an Angular2+ wrapper for it available. It does support handles and such in its options.
https://github.com/valor-software/ng2-dragula
I know it has been years since this original question was asked, but as of this writing, Kendo still does not support a "handle" mechanism natively. There is, however, a way to implement the "handle" feature, which I will write here in hopes that someone in the future may find this helpful. Note I don't believe this is the right solution, because I believe Kendo's API should have this feature.
Using a Mouse
Prevent Drag Start
When we start to drag on the widget, we only want dragging to occur if our mouse is over a valid handle.
Define a flag in your component's code.
/** whether we should allow dragging **/
allowDrag: boolean = false;
Listen for dragStart on the kendo-sortable element
<kendo-sortable (dragStart)="onDragStart($event)">
Stop the default dragStart event when the flag is true
/** handles the starting of dragging */
onDragStart(e: DragStartEvent): void {
if (!this.allowDrag) {
e.preventDefault();
return;
}
}
Toggle on mouseover and mouseleave
When your mouse is over the handle element, enable the flag. When your mouse leaves the element, disable the flag.
<div (mouseover)="allowDrag = true" (mouseleave)="allowDrag = false" class="drag-handle"></div>
Incorporating Touchscreen Users
The philosophy of the above approach relies on only listening for the mouseover and mouseleave events on the handle, and ignoring everything else. For mobile - it's a bit trickier, because there isn't a mouse-position that specifically defines whether a user in position to make a drag. So, we have to add a listener to handle elements, as well as to all other non-handle elements we don't want dragging on. This approach could have been employed for mouse clicks as well, though I believe only attaching to the handle elements is the better approach.
Note: I haven't fully tested this approach yet, and it may not be suitable in all conditions, and may not work as expected for all users.
Add the touchstart Event
In your view, listen for touching the handle
<div (touchstart)="allowDrag = true" (mouseover)="allowDrag = true"
(mouseleave)="allowDrag = false" class="drag-handle"></div>
Also including touching all things that aren't handles
<div (touchstart)="allowDrag = false">
My non-draggable thing
</div>
When I add a new row kendo ui grid it does not move to next page even I set page number dynamically.
But when there is a javaScrip alert it's working fine.
Has any one faced this issue before. Please suggest me a solution.
Thank you.
The problem is that when you add a new row there are a series of actions that happen in parallel and they are not immediate. If you try to move to the end but the row still is being created, if fails.
When you add an alert, you delay the fact of moving and creation now have time.
If you really need to do it, you can add a timeout (delay) it is not nice/clean but should work.
Do something like:
setTimeout(function() {
grid.page(3);
}, 500);
for introducing half second (500 ms) delay, should be enough.
We had sort of similar issue in IE - onchange fired twice with alert in the event handler. According to what you saying, it sounds like when the alert is NOT in you are getting correct behaviour. Review your code without having the alert in or post a fiddle. Below is an answer from Kendo support in regards to alerts while debugging. Do not use alerts with kendo to stay safe.
Basically this behavior is caused by using "alert" method for debugging purposes - please note that this is not recommended because it can lead to unexpected behavior when interacting with focusing elements. After replacing the "alert" method and with "debbuger" command or "console.log()" function the change event is working as expected - please check this screencast(http://screencast.com/t/7qIAdK6hZ5kD).
Hope it helps.
I'm having difficulty trapping a programmatically triggered click event on a hidden button control from a ASP.NET MVC 4 web app inside a VB6 thick client (which is using a web browser control). I'm able to trap the click event itself using the following:
Private WithEvents WebDoc As HTMLDocument
Private Function WebDoc_onclick() As Boolean
Select Case WebDoc.activeElement.iD
Case "A"
Do something
Case "C"
Do something else
End Select
WebDoc_onclick = True
End Function
And this works just fine if the control is visible. But if the control is invisible:
<div class="HideBtnDiv">
<input id="C" name="NoItems" type="button" class="BtnDiv" style="display:none"/>
</div>
and I try to trigger a programmatic click via one of the following:
$("#C").('click');
$("#C").trigger('click');
$("#C").triggerhandler("click");
$("#C").focus();
$("#C").trigger('click');
I'm getting an empty string for the "id" attribute and as a result I can't distinguish which button was clicked. This button serves no purpose other than to indicate to the VB6 app that a certain criteria has been met and that's the reason why I need it to be hidden. Does anyone have any idea why the id is getting stripped? Or is there any other way to communicate back to the client?
I've also tried filtering by element style using
Select Case WebDoc.activeElement.Style
Case "display:none"
Do something else
End Select
but it came back as "[Object]" so no luck there either. Please let me know if there is a way around this.
Thanks,
Lijin
You seem to have tried several ways of dynamically triggering the click event, but did you try the most obvious way:
$("#C").click();
???
But here is what I would do:
1- Make all of your buttons visible, by removing "display:none" from their style
2- Wrap the buttons you want to hide in a new DIV
3- Set "display:none" style in the newly created DIV
4- You can then trigger the .click() event of any button even if not visible by calling $(id).click();
Thanks, Ahmad. Actually I meant .click() not .('click'). Sorry about that.
Anyway, I tried your suggestion and made the button visible and set the style of the wrapping div to display:none but the id attribute was still coming through as an empty string.
However, I did figure out another way to get this to work. If I keep the wrapping div and button as visible and then focus and click when the condition is met and then do a hide(), my problem is resolved!
$("#C").focus();
$("#C").trigger('click');
$("#C").hide();
The button doesn't get displayed and VB6 still passes the id on the click event. The weird thing is it requires the focus() call to still be made. Without it, I'm back to square one. Not sure if this is a bug.
Please see jsfiddle for example, blank out First Name field to have validation tooltip show. In a normal form the validation tooltip positions correctly to the right of each element. But in the popup editor for the grid it still trying to position the tooltip below the element as if it where editing inline. I have tried <span class="k-invalid-msg" data-for="FirstName"></span>but it doesn't change anything. Is there a setting I am missing to get this working in popupeditor? I guess I could manually modify the .k-tooltip but I am hoping for something more built in that handles the positioning correctly, because I am not very good at css.
As you've discovered, the error template for the grid is different to that provided by the kendo validator when applied to standard inputs.
Unfortunately, the validator that is created internally by the grid does not pass along any errorTemplate that you might define in the options object and by the time the "edit" event fires, the validator has already been created and the error template compiled, hence why setting the errorTemplate in the manner you describe does not work. Really, I think the Kendo grid should respect any user defined errorTemplate option but until it does we have to hack a little bit.
The key is to define a custom template and to apply it in the edit event, but instead of using the options object, set the private instance directly. Not ideal, but it works:
edit: function (e) {
e.sender.editable.validatable._errorTemplate =
kendo.template($('#tooltip-template').html());
}
See this updated fiddle for an example of what I think you might be looking to achieve.
http://jsfiddle.net/nukefusion/eQ2j7/10/
(I would post this as a comment but not enough reputation yet...)
I'm successfully using nukefusion's solution. I, too, fought with the syntax error from jQuery for a long time and discovered through debugging that how you define the template is important. In particular, it appears that the template has to be written on a single line without any formatting, as in:
<script id="tooltip-template" type="text/x-kendo-template"><span class="k-widget k-tooltip k-tooltip-validation"><span class="k-icon k-warning"></span>#=message#</span></script>
If you try to make it "pretty" and format the html in the template, you get the syntax error. I don't know where the real bug is, as this sort of thing shouldn't cause an error. But it does and I stopped worrying about it once I got it to work correctly.
So I have created a context box upon right click that has Add/Edit/Delete Rows. I also have a bunch of code launched before the Dialog is shown. My problem is that when I use the context menu it doesn't go through some of the code. I have tried to call on the functions directly but it doesn't format correctly.
I am mainly concerned with the edit button, here is the code I am using to bring up the edit Dialog
function editRow() {
var grid = jQuery("#<%= Jqgrid1.ClientID %>");
var rowKey = grid.getGridParam("selrow");
if (rowKey) {
// I have tried calling functions here and it still doesn't work
grid.editGridRow(rowKey, grid.editDialogOptions);
}
else {
alert("No rows are selected");
}
}
So if I use this to display the editform it isn't formatted correctly nor does it go through the functions all correctly.
I am using the ASP Webforms version of Jqgrid so I call the function by doing this
<cc1:JQGrid1 ID="Jqgrid1
//other attributes
ClientSideEvents-BeforeEditDialogShown="ChangeMonitor"
//Rest of code />
So this works just fine, and I'm trying to get the Edit button on the context menu to display correctly.
My thought was to use Jquery to trigger a click on the actual Edit button once someone used the context menu. I couldn't find an ID that would work however.
Is there an easy way to connect my context menu Edit button, with the actual Edit button in the toolbar?
Well I found a solution to my problem.
The id field of the button was edit_ct100_cpMainContent_Jqgrid1_top so I just triggered a click with this code.
$("td[id^=edit][id$=top]").trigger("click")
For some reason when I used the _ct100_cpMainContent_Jqgrid1 it wasn't working, but now it does. Hope this helps someone.