Forums Home / ComponentOne / ASP.NET MVC Edition
Posted by: 048alexsandr1992 on 15 April 2018, 4:50 am EST
048alexsandr1992
Posted 15 April 2018, 4:50 am EST
Hi,
I want to placed custom filter fields like this
http://joxi.ru/eAONEwvH4YeYK2
But I must use DisableServerRead = false, so I can’t use the example of this link
http://demos.componentone.com/aspnet/ASPNetMVCCollectionView101
Any ideas how this can be implemented?
manish.gupta
Posted 15 April 2018, 9:14 pm EST
Hi Alex,
In this case, you should use Ajax data binding with CRUD api to update database on FlexGrid changes.
Use collectionChanged event to perform CRUD operation.
~Manish
048alexsandr1992
Posted 15 April 2018, 11:03 pm EST
I’m not sure what I understood correctly.
I placed some input or select fields. Their purpose is to filter grid data.
How I can use common events for filtration data to send this in
public JsonResult Grid([C1JsonRequest] CollectionViewRequest<Product> requestData)
{
}
?
manish.gupta
Posted 16 April 2018, 4:10 pm EST
Hi Alex,
As per your original query:
But I must use DisableServerRead = false, so I can’t use the example of this link
Could you please let us know which examples you are referring?
The Filtering example would be useful in this case by using filter method.
If you are referring to Update/Delete operation, please let us know.
~Manish
048alexsandr1992
Posted 16 April 2018, 4:19 pm EST
Hi,
I mean this reference
I am not interested in operations Update/Delete.
Only in custom field for filtration data
manish.gupta
Posted 17 April 2018, 7:49 pm EST
Hi Alex,
Sorry for the misunderstanding.
For this, you need to bind the FlexGrid from Data Source as you would like. If you are binding using Model, you need to set DisableServerRead to true.
After, you need to write script for filtering FlexGrid data on client side as written in DemoSample.
In your case, you need to handle event for both Number and Date input separately. You need to define CollectionView filter function for the same and refresh collectionView on Input Change.
Please let us know if you are facing any issue while implementing this. Please elaborate the issue and provide a demo sample depicting your issue if possible.
~Manish
048alexsandr1992
Posted 18 April 2018, 2:04 am EST
There is no solution that would not require DisableServerRead = true ?
manish.gupta
Posted 19 April 2018, 7:23 pm EST
Hi Alex,
Unfortunatly yes, you need to set disableServerRead to true for applying client filter.
Another approach is you may use Ajax binding to FlexGrid as we suggested previously.
~Manish
048alexsandr1992
Posted 27 April 2018, 1:54 am EST
I finded solution how use custom filtration and disableServerRead = false.
If briefly, then the idea in the next:
ColumnOptions contains info about column and filterType
@foreach (var filter in Model.ColumnOptions)
{
switch (filter.Value.CustomFilterType)
{
case CustomFilterType.Bool:
<div class="form-group">
<label>
<input type="checkbox" class="form-control" data-filter-type="bool" data-column="@filter.Key" />
@filter.Value.Text
</label>
</div>
break;
case CustomFilterType.Numeric:
<div class="form-group">
<label class="control-label">@filter.Value.Text</label>
<input class="form-control number" data-filter-type="numeric" data-column="@filter.Key" />
</div>
break;
case CustomFilterType.String:
<div class="form-group">
<label class="control-label">@filter.Value.Text</label>
<input class="form-control" data-filter-type="string" data-column="@filter.Key" />
</div>
break;
default:
break;
}
}
<div class="col-md-6">
<input type="button" value="@ResourceHelper.GeneralResource("Common.Apply")" class="btn btn-default width100 btn-submit" />
</div>
Than in javascript I created method:
this.setFilter = function (filterContainer) {
var filterDefObject = JSON.parse(this.filter.filterDefinition);
var filters = new Array();
$(filterContainer).find('input[data-column][data-filter-type], select[data-column][data-filter-type]').each(function () {
var column = $(this).data('column');
var type = $(this).data('filter-type');
var value = type === 'bool' ? $(this).prop('checked') : $(this).val();
if (!value || !type || !column)
return;
var condition1 = { operator: null, value: null };
switch (type) {
case 'numeric':
case 'bool':
condition1 = { operator: 0, value: value };
break;
case 'string':
condition1 = { operator: 8, value: value };
break;
default:
break;
}
var filterItem = {
binding: column,
and: true,
condition1: condition1,
condition2: { operator: null, value: null },
type: 'condition'
};
filters.push(filterItem);
});
filterDefObject.filters = filters;
this.filter.filterDefinition = JSON.stringify(filterDefObject);
}
