I click to button query in antd design table pro
but not working
Thanks
Have you added a specific function to it?
By default, clicking the query button will trigger the synToUrl method, it chains search values into params of the current URL as below:
<ProTable<any>
form={{
syncToUrl: (values, type) => {
if (type === "get") {
return {
...values,
};
}
return values;
},
}}
If you want to make further action, you should create base on that util.
Please provide image or code to make thing clearer. Vậy nha bro!
Related
I'm trying to implement integration tests on our React frontend which uses Ant design. Whenever we create a table, we add an action column in which we have a Menu and Menu Items to perform certain actions.
However, I seem unable to find the correct button in the menu item when using react-testing-library. The menu Ant design uses is rc-menu and I believe it renders outside of the rendered component.
Reading the testing-library documentation, I've tried using baseElement and queryByRole to get the correct DOM element, but it doesn't find anything.
Here's an example of what I'm trying to do. It's all async since the table has to wait on certain data before it gets filled in, just an FYI.
Tried it on codesandbox
const row = await screen.findByRole('row', {
name: /test/i
})
const menu = await within(row).findByRole('menu')
fireEvent.mouseDown(menu)
expect(queryByRole('button', { name: /delete/i })).toBeDisabled()
the menu being opened with the delete action as menu item
I had a same issue testing antd + rc-menu component. Looks like the issue is related to delayed popup rendering. Here is an example how I solved it:
jest.useFakeTimers();
const { queryByTestId, getByText } = renderMyComponent();
const nav = await waitFor(() => getByText("My Menu item text"));
act(() => {
fireEvent.mouseEnter(nav);
jest.runAllTimers(); // ! <- this was a trick !
});
jest.useRealTimers();
expect(queryByTestId("submenu-item-test-id")).toBeTruthy();
I am currently using Select2 in a project and would like to add a option to my select list that shows up regardless of what the user types or searches. The idea is to have a "Add new" option always present in the list.
I do not think my code is necessary here (but if needed I may provide) as the only thing i'm lacking knowledge in this specific topic is on how to keed the option always showing.
I thought of using the matcher attribute, but i'm not sure how.
I've managed to do it setting a new matcher, the problem was I was not sure on how to create a new matcher and still use the select2 default one.
Something else I was missing was the full version of select2.
function newMatcher(term, text){
//The "ADD NEW" String is the text in the option I want to always show up.
//The code after OR looks for the actual results for the user's search
if ((text.toUpperCase().indexOf("ADD NEW") > -1)
|| (text.toUpperCase().indexOf(term.toUpperCase()) > -1)) {
return true;
}
}
$(document).ready(function() {
$.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
$('select').select2({
matcher: oldMatcher(newMatcher)
})
})
});
I'm trying to build a simple accordion Polymer component. I have it working so when I click on an item in the list, an open class is added to the item which shows its contents.
I don't want to be able to have multiple items open at a time, so in my click function, I essentially want to say:
$(".list-item").on("click", function() {
$("list-item").removeClass("open");
$(this).addClass("open");
}
Of course this is in jQuery and not Dart...so that doesn't help me much.
What's the above equivalent in Dart?
Here's what I have working right now (just opens each clicked item, but doesn't close others in the process).
_openedChanged: function() {
if (this.opened) {
this.toggleClass('open', true);
}
else {
this.toggleClass('open', false);
}
this.setAttribute('aria-expanded', this.opened ? 'true' : 'false');
}
To remove a class from all list-item elements in Dart, you could do:
querySelectorAll('list-item').forEach((item) => item.classes.remove('open'));
I have a KendoUI Grid I'm using an MVC web application, all working fine however I want to add a custom command button that is shown conditionally in the UI and simply executes a command on my controller passing it the required parameter.
columns.Command(command => command.Custom("UnlockAccount").SendDataKeys(true).Click())
The command is specified as above but I only want the button to show when the DataItems IsLocked property is true.
I also cannot figure out how to just call and method on the controller rather. I cannot find a demo of this on the Kendo site and not sure how to move this forward.
Here is a specific example for using client templates for conditional command buttons.
const string ShowUpdateButton = "#if (IsNetReversal == false) {#<a class='k-button k-button-icontext k-grid-edit' href='\\#'><span class='k-icon k-edit'></span>Update</a>#}#";
const string ShowReverseButton = "#if (IsNetReversal == false) {#<a class='k-button k-button-icontext k-grid-reverse' href='/JournalDetail/Reverse/#: ID #' ><span class='k-icon k-reverse'></span>Reverse</a>#}#";
const string ShowDeleteButton = "#if (IsAdjustment == true) {#<a class='k-button k-button-icontext k-grid-delete' href='\\#'><span class='k-icon k-delete'></span>Delete</a>#}#";
You can do the template inline but I find it easier (particularly for multiple buttons) if you declare constants and then use string.format to concatenate them.
col.Template(o => o).ClientTemplate(string.Format("{0}{1}{2}", ShowUpdateButton, ShowDeleteButton, ShowReverseButton));
The upside is it will work with popup editor whereas jquery hacks will ignore the conditional status when a user cancels out of edit. A cancel from the popup editor will restore the grid row from the viewmodel or wherever Kendo stores it which results in button states from before any jquery/javascript hack. The method above will also auto-wire the standard commands since I copied their HTML output for the client template.
The downside is that if Kendo changes their pattern for command buttons the client template may fail. I tired several other methods besides this one and the downside to this method seems better than the other methods.
Note on Kendo Forums: As of the date of this post, they do not appear to allow people who do not pay for support to post to the forums so I would suggest posting questions here instead. They monitor Stack Overflow and in my experience they seem to answer questions more quickly here.
Use template column instead - via the ClientTemplate method.
Conditional templates are covered here and multiple times on the forums - the Command columns is not that flexible.
As of the December 2018 release of Kendo, you can now conditionally display custom buttons more easily, but it still relies on JavaScript to do its work, this function should be defined before your dataGrid or you'll run into issues.
function showCommand(dataItem) {
console.log("determining to hide or show" + dataItem);
// show the Edit button for the item with Status='New'
if (dataItem.Status == 'New') {
return true;
}
else {
return false;
}
}
Then the code for the Grid.
.Columns (columns => {
columns.Command (
command => command.Custom ("Approve")
.Visible ("showCommand")
.Click ("approveFunc")
)
.Width (100)
.HeaderTemplate ("Actions")
})
You can control custom command button visibility by Visible property.
columns.Command(command => command.Custom("UnlockAccount").SendDataKeys(true).Click().Visible("unlockAccountVisible"))
Visible property accepts JS function name and passes current dataItem as an argument.
JS function that evaluates button visibility:
<script>
function unlockAccountVisible(dataItem) {
// show the UnlockAccount button only when data item property IsLocked == true
return dataItem.IsLocked;
}
</script>
Read more in Show Command Buttons Conditionally kendo-ui documentation article.
Let me describe the layout of my page. There is a splitter on my page, the left page is the navigation panel and the right page is the content. So when the user, clicks a node on the panel, the content will be displayed on the right side. The problem is when the user supply a value on the displayed content, the remote validation is not firing. I tried this when the page is not a partial view and it was working.
Here is script when loading the partial view.
var onPanelItemSelect = function (e) {
var windowPath;
windowPath = $(e.item).attr('data-value');
if (windowPath != '#') {
$.ajax({
type: 'GET',
url: windowPath,
success: function (data) {
$('#right_pane').html(data);
}
});
}
return false;
}
Essentially, I have a feeling that problem could also be that that property names are not bound correctly if you use the same model to bind the main page as well as the partial.
For example if you have a model class (called ModelClass) that has a property each for the two panels (called ModelClass.LeftPanel and ModelClass.RightPanel)
LeftPanel could have a property (TextProperty) that you use to bind to the right partial page.
You would expect it to be named 'RightPanel.TextProperty' but it actually ends up with a name 'TextProperty'. This could also impact remote validations.
This Stackoverflow question describes what I think is the problem, as well as various solutions to it.
Hope this helps.
Fixed the problem, I'm open if anyone has a better answer. On the header for each view I attach the validate and unobstrusive script.
Try this:
change
success: function (data) {
$('#right_pane').html(data);
}
to
success: function (data) {
$('#right_pane').html(data);
jQuery.validator.unobtrusive.parse("#right_pane");
}
Please add reference to validate.min.js, and validate.unobtrusive.js in your partial page.
Its working for me.
P.S: Am I too late :)
My article has a descriptive code for remote validation , you can have a look at it .
Remote Validation Article