Multi-select in grid won't allow un-selecting items
Hi there,
I'm trying to allow users to select multiple things from a multiselect in a grid. Currently I have everything working except I cannot un-select values that were already selected before opening the multi-select dropdown.
The data in the field is an array of longs. The datasource for the multi-select has both numeric IDs and strings for display.
Here is my definition for the column in the grid:
<e-grid-columns>
<e-grid-column headerText="Header name" columns="@(
new Syncfusion.EJ2.Grids.GridColumn{
Field="TradeIds",
HeaderText="TRADE2",
TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center,
Edit=new {create = "tradeCreate", read = "tradeRead", destroy = "tradeDestroy", write = "tradeWrite"},
Width="200",
}
</e-grid-column>
</e-grid-columns>
And the JS functions to populate the grid are these:
let tradeGridElem;
let tradeSelectObj;
function tradeCreate(args) {
tradeGridElem = document.createElement('input');
return tradeGridElem;
}
function tradeRead() {
return tradeSelectObj.value;
}
function tradeWrite(args) {
tradeSelectObj = new ej.dropdowns.MultiSelect({
dataSource: @Html.Raw(Json.Serialize(Model.Contractors)),
fields: { text: 'Text', value: 'Value' },
value: args.rowData[args.column.field],
mode: 'CheckBox',
width: 120,
popupWidth: 300,
hideSelectedItem: false,
enableSelectionOrder: false
});
tradeSelectObj.appendTo(tradeGridElem);
}
function tradeDestroy() {
tradeSelectObj.destroy();
}
So when I open the dropdown, the values listed as selected are checked in the dropdown list, which is good, but clicking on the checkbox does nothing. See this image, where "BMW" is listed as the selected value, but clicking on that checkbox does absolutely nothing. Clicking on the "X" to clear also does nothing.
Clicking on any of the other checkboxes selects and then unselects them, as expected. However, as soon as the dropdown is closed and the record is saved, any newly selected boxes also become unresponsive.
What do I need to change to be able to uncheck these boxes without breaking anything else?
Rajapandiyan,
Thanks for your response. My underlying data was already an array, but upon closer inspection, the dropdown datasource was actually a string instead of a number. Changing the types to match fixed the issue. It would be a nice improvement if Syncfusion components would throw some kind of error in that situation rather than failing silently.
As for the filter, I will probably need to completely customize how it behaves, since the grid doesn't support arrays. Right now, the filter looks like this:
There are two issues here: one, it's showing the numeric ID rather than the text value. Two, it's showing them grouped together rather than separately. Instead, I would like the filter dropdown to match my multi-select list, and for it to display all records which have any of the selected values associated with it. For example, let's say ID #7 is Belgium. I want Belgium to show up in the list as an individual item, and if it is checked, I want the records with the arrays "7,1,3" and "1,7,8" to be displayed, since they both include Belgium (id #7).
I don't need a complete example of how to do all that logic, though. I just need to know how to tell the column to use a custom function for displaying the filter choices and applying them. I did find this page: https://www.syncfusion.com/aspnet-core-ui-controls/grid/filtering It has a section which says: "Filter UI and logic for a column is applied based on the column type. It is also possible for the users to define their own custom filter UI and filtering logic for a column to suit their application needs." However, when I click the link below it to view the "Custom filter UI documentation", said documentation doesn't say anything at all about customizing the UI or logic.
So how do I customize the filter UI and logic?
Hi Katherine,
Thanks for your update.
Query #1: It would be a nice improvement if Syncfusion components would throw some kind of error in that situation rather than failing silently.
The actionFailure event will be triggered if any exception is thrown while rendering the Grid component. So, you can use this event to get the error details.
actionFailure: https://ej2.syncfusion.com/javascript/documentation/api/grid#actionfailure
Query #2: it's showing the numeric ID rather than the text value.
By using the filter ItemTemplate feature, you can show the customized data in the Excel/Checkbox filter dialog checklist. But this is used for display purposes and the filtering operations are performed based on its dataSource value.
screenshot:
Query #3: it's showing them grouped together rather than separately.
Since we already said that the Grid columns does not support array type column. But for your requirement, we suggested a workaround to store the values in string format and separated them by comma. By default, the Excel filter dialog shows the value as like in the dataSource. we cannot show them as separate values as per your requirement. It is not feasible in the EJ2 Grid.
Query #4: However, when I click the link below it to view the "Custom filter UI documentation", said documentation doesn't say anything at all about customizing the UI or logic.
By using filterBarTemplate feature, you can render custom component on Filter Bar to filter the records.
FilterBarTemplate: https://ej2.syncfusion.com/aspnetcore/documentation/grid/filtering/filter-bar#filter-bar-template-with-custom-component
Regards,
Rajapandiyan S
Hi Katherine,
Thanks for your update.
Query #1: Where is the documentation for the ItemTemplate for filters? I don't see any mention of it, and you didn't include a link for it.
As per your requirement, we have prepared a simple sample
with this. By using the filter ItemTemplate feature, you can show the customized
data in the Excel/Checkbox filter dialog checklist. But this is used for
display purposes and the filtering operations are performed based on its
dataSource value.
Find the below code example and sample for more information.
|
[index.cshtml] <e-grid-column headerText="Order Details" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn{ Field="ID", HeaderText="ID", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center, Edit= new {create = "tradeCreate", read = "tradeRead", destroy = "tradeDestroy", write = "tradeWrite"}, Filter= new { itemTemplate="#itemTemplate" }, Width="220", }})"> </e-grid-column>
<script id="itemTemplate" type="text/x-template"> <div> ${customHelper(data)} </div> </script>
<script>
var dummyData = [ {ItemKey: 1, ItemValue: "Denmark"}, {ItemKey: 2, ItemValue: "Brazil"}, {ItemKey: 3, ItemValue: "Germany"}, {ItemKey: 4, ItemValue: "Austria"}, {ItemKey: 5, ItemValue: "Switzerland"}, ] function customHelper(data){ var cellValue = data["ID"].split(","); // get the cell value var TextValue = ""; // do your operation here cellValue.map( x => { var y = new ej.data.DataManager(dummyData).executeLocal(new ej.data.Query().where("ItemKey","equal", parseInt(x))); if(y.length > 0){ TextValue += y[0].ItemValue + ", "; } }); return TextValue; // return the customized value } </script> |
screenshot:
Query #2: If that isn't possible with the ItemTemplate, then it sounds like my only option is to use the filter bar instead. Is there some way to have most of the columns use the Excel style and only customize the columns I need to,
By using column.filter.type property, we can show different filters on a particular column in the Grid. Also, you can use filterTemplate feature to render a custom component to filter the data.
|
[index.cshtml]
<e-grid-column headerText="Order Details" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn{ Field="ID", HeaderText="ID", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center, Edit= new {create = "tradeCreate", read = "tradeRead", destroy = "tradeDestroy", write = "tradeWrite"}, Filter= new { type="Menu", // use different filter ui = new {create = "IDFilterCreate", write = "IDFilterwrite", read = "IDFilterread" } // render custom component for filter }, Width="220", }})"> </e-grid-column>
<script>
var dropInstance;
function IDFilterCreate(args){ var gridObj = document.getElementById("Grid").ej2_instances[0]; var data = gridObj.dataSource; var flValInput = new ej.base.createElement('input', { className: 'flm-input' }); args.target.appendChild(flValInput); // create dropdown component dropInstance = new ej.dropdowns.DropDownList({ dataSource: new ej.data.DataManager(data), fields: { text: 'ID', value: 'ID' }, placeholder: 'Select a value', popupHeight: '200px' }); dropInstance.appendTo(flValInput); } function IDFilterwrite(args){ dropInstance.value = args.filteredValue; // bind the filter value } function IDFilterread(args) { args.fltrObj.filterByColumn(args.column.field, "equal", dropInstance.value); // filter the column } </script>
|
Please get back to us if you need further assistance with this.
Regards,
Rajapandiyan S
Rajapandiyan,
Thanks for your reply. It's not exactly what I asked for, but it did help me get a lot closer to my goal. I have a couple questions to help me over the finish line. First off, the sample had a line of code commented out that isn't commented in your post:
With that line commented, it's actually the equivalent of this, since most of the conditions can never be true:
Is this intentional? It seems to work, even if a filter is on a column which uses a foreign key, but I don't know every scenario I should test for to be certain. I didn't try it uncommented because it looks like it'll throw an error if col is ever truthy, since fPredicate.predicate is undefined.
My next question is regarding this section, specifically the highlighted lines:
My grid uses a DataManager with a URL, so its datasource is not actually the data, it's a DataManager with a URL which provides the data asynchronously. You may think the answer is to simply do this instead:
However I cannot do that, because when a value appears in the grid multiple times, it also appears multiple times in the dropdown list. I also need to do some parsing to split out the values and whatnot, so I need to get the data for the grid, do some work with it, then give it to this control. Luckily I was able to do all of that using a combination of the DataManager and Query objects you showed me, but I had to make all of my functions async. So now my function to create the filter looks something like this (don't worry about what's in getParsedData(), just know that it takes care of applying the filter query and parsing out the data as needed, and it is async):
This works completely perfectly EXCEPT the grid doesn't wait for it to finish! It runs IDFilterwrite() before the dropdown is instantiated, so the value is always blank. I would just set the value in IDFilterCreate(), but alas, the current filter value isn't contained in the args for that function. It is also a bit of a confusing experience for the user, because it pops up as blank for a moment when the filter is first opened:
The way I see it, there are two good routes to fix this. Hopefully at least one of these is easy:
- Tell the grid this function is asynchronous so the grid handles it properly
- Get ALL of the current local data of the grid (not currentViewData, that won't work) without hitting the server, so I don't need to make any async calls
