2 custom controls in DataGrid column
Hi,
We are using the ASP.NET Core with the DataGrid and we do have some custom filters like filtering the time part of the date, like this:
To have it to work, we are using the .FilterBarTemplate(new { write = "endTimeFilterWrite" }) and in the JavaScript function we create and append the TimePicker control.
We have observed that if we do not have the create function, the DataGrid appends an input element before the write function is called (in our case endTimeFilterWrite)
However, we do have another column where we do want to add 2 controls: NumericTextBox. We had various attempts to do this, in create and write but without success (this is why we opening the ticket).
The way how we do, is we define the .FilterBarTemplate(new { create = "durationColumnCreate" }) and the JavaScript version:
function durationColumnCreate(args) {
var container = $("<div class='d-flex duration' />");
var minContainer = $("<div class='flex-fill min' />");
var maxContainer = $("<div class='flex-fill max' />");
container.append(minContainer, maxContainer);
var minPicker = new ej.inputs.NumericTextBox({
min: 0,
placeholder: 'Minimum minutes',
format: 'min # minutes',
change: function (args) {
gridState.durationFilterByValue = args.value;
onFiltersChanged(args);
}
});
var maxPicker = new ej.inputs.NumericTextBox({
min: 0,
placeholder: 'Maximum minutes',
format: 'max # minutes',
change: function (args) {
gridState.durationFilterByValue = args.value;
onFiltersChanged(args);
}
});
minPicker.appendTo(minContainer[0]);
maxPicker.appendTo(maxContainer[0]);
return container[0];
}
This creates the following elements in the DOM, which does not render any NumericTextBox.
We have tried using the create and write and there is the same issue.
The problem is only when we add more than 1 control
Can you advice?
Hi Daniel Tila,
Greetings from Syncfusion support.
We have validated your query and understand that you are trying to use two controls on the filterbar template, but you are facing issues with the controls not appending properly. We noticed that you are using a div element for appending the numeric text box control, but the numeric text box control should be appended as an input element with type text. This is the root cause of the issue. Based on your requirement, we have prepared a sample. In this sample, we create a div element in the filterbartemplate create and append two numeric text box controls on two different input elements and also append those two elements on the created div element in the filterbartemplate write. You can refer to the below code example, screenshot, and sample for more details.
[code example]
|
function create1() { freightElem = document.createElement('div'); return freightElem; }; function destroy1() { minPicker.destroy(); maxPicker.destroy(); }; function write1(args) { var container = $("<div class='d-flex duration' />"); var minContainer = $("<input id='min' type='text' class='flex-fill min' />"); var maxContainer = $("<input id='max' type='text' class='flex-fill max' />"); container.append(minContainer, maxContainer); // creating Min NumericTextBox filter for Freight column. minPicker = new ej.inputs.NumericTextBox({ min: 0, placeholder: 'Minimum minutes', format: 'min # minutes', change: function (args) { // gridState.durationFilterByValue = args.value; // onFiltersChanged(args); } }); // creating Max NumericTextBox filter for Freight column. maxPicker = new ej.inputs.NumericTextBox({ min: 0, placeholder: 'Maximum minutes', format: 'max # minutes', change: function (args) { // gridState.durationFilterByValue = args.value; // onFiltersChanged(args); } }); minPicker.appendTo(minContainer[0]); maxPicker.appendTo(maxContainer[0]); args.element.append(container[0]); }; |
Screenshot:
Sample: please find the attachment.
Regards,
Vasanthakumar K
Attachment: 186948filterbartemplatecrwd2control_14d827b5.zip
Thank you, this indeed works, however when you click on the Max filter, the focus is moved to the Min filter.
I have tried multiple options, including modifying the write functions as:
function durationColumnWrite(args) {
var container = $("<div class='d-flex duration'><div class='flex-fill min'></div> <div class='flex-fill max'></div></div>");
var minContainer = $("<input id='min' type='text' />");
var maxContainer = $("<input id='max' type='text' />");
container.find('.min').append(minContainer);
container.find('.max').append(maxContainer);
Here I am creating more separated divs, however, the focus is still moved to the Min controller. I attach an image after I released the left button on the Max controller - you can see the focus is back in the Min controller
I am not reattaching a sample, since does reproduce on the sample provided as well.
Can you advice?
