I am trying to implement rowDetails functionality of jqxTreeGrid, my rowDetailsRenderer function returns something like :
return '<input type="radio" name="group1" checked="checked">';
Its not showing as checked. Event after the grid is loaded, I am not able to 'check' it through firebug as well. But its getting checked once I click it. Same behavior across firefox/IE/Chrome.
You have to put your checkbox inside a table
View this example: JqxTreeGrid rowdetail with checkbox
Related
I have added Radio Button group by using Vaadin designer to my view :
<vaadin-radio-group value="Line" id="vaadinRadioGroup" style="margin-left: var(--lumo-space-s);">
<vaadin-radio-button name="Line" style="flex-grow: 0; align-self: stretch;" checked>
Line
</vaadin-radio-button>
<vaadin-radio-button name="Heatmap" checked>
Heatmap
</vaadin-radio-button>
<vaadin-radio-button name="Both" checked>
Both
</vaadin-radio-button>
</vaadin-radio-group>
And in my java code :
vaadinRadioGroup.addValueChangeListener(radioButtonEvent -> {
System.out.println("The event is triggered.......")
});
The change in the radio button value does not trigger the changeValueEvent. Anything I am missing here??
A bit closer look revealed the problem: with a radio button group you can't declare the data in the design itself if you want to be able to use it from the Java side as well. You should do that from the Java side using e.g. setItems() or adding a DataProvider. If you do that, the individual radio buttons won't be visible when you look at the design, but they'll be there when you run the application.
I am using data table component in Quasar. I am able to view table and it’s awesome. here's
Now I need to click on a row cell and make it editable input text field, and after pressing ‘Enter’ button I need to save data there itself.
How to proceed further? please help me.
First thing is I didn't find any inbuilt functionalities of the data table to edit row. So I thought of moving with my custom functionalities. The good thing about Data table in Quasar is that it provides the use of templates for manipulation of any row.
So I used a template like this:
<template slot="col-Name" scope="cell">
<span #click = "nameAction()">{{cell.data}}</span>
<input type="text"
v-model="cell.data" v-show="edit1" v-on:keyup.enter="edit1 = false;"> <br>
</template>
So here I'm cosidering one of the row in the column(Name), and on click of the row calling a function called nameAction.
And here is the function inside a method:
nameAction: function (row) {
this.edit1 = true
}
Here I am making an input field visible on clicking the row.
For reference, you can use this fiddle.
I've created a jira custom field plugin to appear at issue view screen only (as there will be predeined calcualtion on field description-javascript).
But this does not appear at issue view screen what i need even though, assgined hard coded values in vm file.
when create "edit.vm" then it appears on edit issue screen and after assigning the value to field , it could appear in issue view screen but, without edit template , its not working and unable to see in issue view screen.
Below is atlassina-plugin xml stuff:
<customfield-type name="Summary field" i18n-name-key="cascading-summary-field.name" key="cascading-summary-field" class="com.company.plugins.jira.customfields.CascadingSummaryCustomField">
<description key="cascading-summary-field.description">The cascading summary field to allow multiple summary fields using five text box and description javascript to write related text to appear in summary field.</description>
View template as below: (with hard coded value specified though unable to appear this on issue view screen).
<span>$<input type="text" name="${customField.id}:input1" id="${customField.id}:input1" value="#if($input1)$input1#end" style="border: 0px;width:59px;margin-left:1px;"/></span>
<span>$</text><input type="text" name="${customField.id}:input2" id="${customField.id}:input2" value="3" style="border: 0px;width:59px;margin-left:1px;"/></span>
<span>$</text><input type="text" name="3" id="${customField.id}:input3" value="0" style="border: 0px;width:59px;margin-left:1px;"/></span>
//also, tried by just keeping <span>some value</span>
how it could resolve ?
As found, field to appear at view screen, there must have require "Edit" template.
so, it resolved by creating an edit template.
Other wise, have to follow achieve by preparing dynamic object through jquery under CUSTOM FIELD'S description field. (first found, related position to append through firebug and append that created object inside "Custom field >> description".
Thanks
Is there a reason why the click handler is removed from my button after calling the button() method on it. I am changing the content of my buttons, and as a result I need to refresh them. I noticed refresh does not work, so I tried the button method.
This will restyle my "button", but I lose my click event.
How can I accomplish both?
http://jsfiddle.net/RQZG8/2/
And here is the code:
$("[data-role=button]").html("hello world").button();
$("[data-role=button]").click(function(){
alert("i have been clicked");
});
My big issue is that I have a div which is acting as a button. I want to change the content of the div, but I want to be able to have it continue to look like a button while keeping it's behavior.
Try this: $("[data-role=button] .ui-btn-text").html("hello world"); otherwise the padding is lost.
First of all IMHO, given your example that goes with the question (when you change only caption of a button), there is no much point to use a div as a button when jQM gives you a lot of standard choices.
All of these:
<button>Button element</button>
<input type="button" value="Button" />
<input type="submit" value="Submit Button" />
will be automatically enhanced by jQM to buttons without even specifying data-role="button".
And you can of course use a link as a button
Link button
Now if you still want to use your div as a button you don't need to specify data-role="button" just call button() plugin. That will create all necessary markup for you and your original div will be preserved as hidden.
<div id="button1">By button<div>
$("div#button1").button();
To refresh a button after you changed its caption you need to call refresh method:
$("div#button1").html("Hello World").button("refresh");
Now to normally handle the click event of a particular button (if it's not the only one on the page) you probably need more specific selector than just the data-role=button attribute. id would be perfect for that. So instead of
$("[data-role=button]").click(function(){...});
do
$("div#button1").click(function(){...});
And lastly you most certainly know that, but I didn't see it in your jsfiddle, so I just mention that you better put your code in one of the jQM page handlers. pageinit is recommended way to go.
$(document).on("pageinit", "#page1", function(){
...
});
Here is jsFiddle.
I have a form that (amongst other things) contains 2 multi-select listboxes. Basically you can add items to the one on the right from the full list of items on the left using some add/remove buttons.
The problem is that I cannot see a way of picking up the contents of the listbox when posting back to the controller.
I have followed this example:
http://ittecture.wordpress.com/2009/04/30/tip-of-the-day-198-asp-net-mvc-listbox-controls/
This works fine if you have actually selected the items in the listbox before posting. That's not really the way I think this UI should behave though.
Hope that makes sense,
Nick
Thanks for the help guys. I forgot to mention that I am populating the selected items listbox with jQuery. Not sure if that was important or not though.
In the end, I fixed it by selecting all items onclick with jQuery before posting. Seemed like the easiest solution.
I don't think a listbox is the control you want for the control on the right. The way a listbox works (by posting the selected item) is not what you're trying to achieve.
You could consider having a grid or even just a div with a number of strings. There is more Javascript/JQuery to be written, but it will provide a nice user experience because no postbacks will be needed until all the work is complete.
You'll need to use JavaScript/JQuery to add and remove items from the div based on the buttons to add and remove.
In addition, for each item that is added on the right, you'll need to add a hidden input field:
<input type="hidden" id="SelectedItems" value="..." />
Set the value to the key or id of the newly added item. If you remove a field from the right control, make sure you remove the associated hidden field.
To handle items on the right that the user has removed, you'll need hidden fields to indicate which have been removed:
<input type="hidden" id="RemovedItems" value="..." />
Then in your controller you can add two parameters to the Action (or add two field to the viewmodel) which will be arrays of strings. This will be set to all of the values in the hidden fields that were added, and all the ones that were removed.
In addition to listbox, have several hidden input fields to hold "currently added" items. The listbox selection will indicate "items to remove" when selected.
OK, clarification. You have left and right listboxes. Left one holds available items, and selected ones are POSTed and then added. Right one holds currently added items, and selected ones are POSTed and then removed from added items.
Now, you also need to hold currently added items. You can do this via bunch of
<input type="hidden" name="currently_added" value="itemid" />
hidden fields.
Yes you can go jQuery but this is an easy way; not every site should be designed to require JavaScript turned on. The above solution works without JavaScript enabled.
Your post from page will give you 3 arrays:
Left side box selected items to add
Right side box selected items to remove
Hidden fields - already added items
You take (3), remove (2) from it, add (1) to it, and display the same page or do whatever you want.