Filter not working for DateTime columns with "equal To" filter

4 Answers 1201 Views
Filter
Matt
Top achievements
Rank 1
Matt asked on 22 Nov 2011, 04:48 PM
I can't get the filters for 'equal to' working on date time column in rad grid. As far as I can tell this has something to do with the times on the dates. I have seen many posts about this here with no answer so I guess I don't really expect help, but just throwing my voice in with everyone else saying your filters don't work right for date time columns. Period.

4 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 23 Nov 2011, 04:38 AM
Hello,

I have tried the same and worked as expected. You can take a look into the following demo.
Grid / Basic Filtering

Thanks,
Princy.
Preeti
Top achievements
Rank 1
commented on 26 Jul 2013, 11:39 AM

I tried the code shown in the demo but the filter does not work for me.
The date time column in database is saved as '2013-07-26 00:01:09.840' format. whereas in the grid the value is displayed as '7/26/2013 12:01:09 AM'. This should not be a problem as far as I think.
I am giving the value '7/26/2013 12:01:09 AM' in the text box to search with Filter option as 'Equal To'. No results are returned when I have selected this value from the grid itself.

Greater than and Less Than filter options work fine. Just the equal to is not.

Please tell me what is wrong here.
Thanks
0
Eyup
Telerik team
answered on 31 Jul 2013, 11:38 AM
Hi Preeti,

This behavior is expected since the "2013-07-26 00:01:09.840" is not equal to "2013-07-26 00:01" which is the value used for filtering. The picker assumes the entered date to have starting seconds and milliseconds: "2013-07-26 00:01:00.000", which makes it different than the desired: "2013-07-26 00:01:09.840".

To resolve this issue, you can either enable the following property:
<telerik:GridDateTimeColumn ... EnableTimeIndependentFiltering="true">
Or prevent the filter command when the selected function is EqualTo and use Contains function instead.

Hope the clarification was helpful.

Regards,
Eyup
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Preeti
Top achievements
Rank 1
commented on 06 Aug 2013, 06:26 AM

Hi Eyup,
Thanks a lot for the reply.
I need to understand what value comparison is going on by the telerik filter/grid.

Because the grid column shows the value  '7/26/2013 12:01:09 AM' and this is what I am entering in the filter textbox. so ideally it should fetch the data correctly.

Also I don't have the option of EnableTimeIndependentFiltering.I think the version of control I am using is different. am I right?

Please let me know a way to make this work.'

Thanks,
Preeti
Kunal Chowdhury
Top achievements
Rank 2
commented on 06 Aug 2013, 08:19 AM

Hi Preeti,

Eyup is right. The value that you have in database is '2013-07-26 00:01:09.840' and when you bind it to DataGrid and display in the UI, it shows like this: '2013-07-26 00:01:09' where 840 milliseconds different is there. Now, when you are doing a comparison with EqualTo() operator, you are just neglecting that delta value 840. Thus the comparison returns false.

In case you want to implement that functionality, you have to override the EqualTo() operator or write some additional logic to compare both the sides without that delta difference.

Hope this clarifies your query. Let us know, if you still have any queries on this.

Regards,
Kunal Chowdhury
www.kunal-chowdhury.com

(Mark as answer, if this helped you)
Preeti
Top achievements
Rank 1
commented on 06 Aug 2013, 10:20 AM

Thank you Kunal. Let me try out what you and Eyup have suggested and I will come back if I have any questions.

Thanks Again,
Preeti
Vishal
Top achievements
Rank 1
commented on 16 Sep 2016, 10:50 AM

I have formatted the Editor text box the date time picker etc to have the milliseconds but still it is not filtering, as the filter descriptor does not have milliseconds 
Eyup
Telerik team
commented on 21 Sep 2016, 10:53 AM

Hello Vishal,

Have you tried setting the following property?
<telerik:GridDateTimeColumn ... EnableTimeIndependentFiltering="true">

Regards,
Eyup
Telerik by Progress
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tyler
Top achievements
Rank 1
commented on 18 Oct 2018, 03:31 PM

I am having trouble filtering on a date/time column with 'eq' as well.  After some research I was able to find a reference to filterMenuOpen (I've also attempted using filterMenuInit) and used a function to search by two dates/times and the values between.  It works to filter by equals to even to the second, but I am getting odd behavior from the other columns in my grid.  In my grid I have a column for filename(sting), upload date/time(date), import status(string), and import date/time(date).  If I first filter by the upload date/time, I am able to filter additionally on the other two string columns, but not on the second date/time column.  If I first filter by any string column, the date columns will not filter.  I've used a custom filterable.ui function and formatting of the date columns in order to allow the user to copy and paste a date/time from the dates column.

I really need to be able to search for a date/time down to the second as the users are using this for auditing.  Additionally, the users may need to apply additional filters on the other columns.  How do I make this happen?  Here is my code so far:

function upImpDateTimeFilter(control) {  //this is the function used by the filterable ui
    var expdatepic = $(control).kendoDateTimePicker({
    format: "MM/dd/yyyy HH:mm:ss",
    timeFormat: "HH:mm:ss"});
}

filterMenuOpen: function gridFilter(e) {
    var firstDropDown = $('[data-bind="value: filters[0].operator"]').data('kendoDropDownList');
    $('button[type="submit"]').click(function (ev) {
       ev.preventDefault;
       if (firstDropDown.value() === 'eq') {
           ev.preventDefault();
           var selectedDateTime = $('[data-bind="value:filters[0].value"]').val();
           var selectedDateTimeTwo = $('[data-bind="value: filters[1].value"]').val();
           var selectedDateObj = new Date(selectedDateTime);
           if (!selectedDateTime) {
                $(ev.target).closest('[data-role="popup"]').data('kendoPopup').close();
                return;
           }
           var startOfFilterDate = new Date(selectedDateObj.getFullYear(), selectedDateObj.getMonth(), selectedDateObj.getDate(),selectedDateObj.getHours(), selectedDateObj.getMinutes(), selectedDateObj.getSeconds());
           var endOfFilterDate = new Date(selectedDateObj.getFullYear(), selectedDateObj.getMonth(), selectedDateObj.getDate(), selectedDateObj.getHours(), selectedDateObj.getMinutes(), selectedDateObj.getSeconds() + 1);
           var filter = {
                logic: "and",
                filters: [
                      { field: e.field, operator: "gte", value: startOfFilterDate },
                      { field: e.field, operator: "lte", value: endOfFilterDate }
                           ]
          };
e.sender.dataSource.filter(filter);
$(ev.target).closest('[data-role="popup"]').data('kendoPopup').close();
return;
}
});
}

Why is it that this custom filter affects the other columns in grid when the firstDropDown.value criteria is not met?  Am I missing something with the e.send.dataSource.filter(filter)?

Eyup
Telerik team
commented on 23 Oct 2018, 12:50 PM

Hi Tyler,

Generally, filtering date field includes the time part, too:
https://demos.telerik.com/kendo-ui/grid/filter-menu-customization

Filtering only on date requires explicit coding:
https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/filtering/filter-by-date

I suggest that you check the live sample provided in the first link above. If you have further questions, you can post your question in the Kendo forums or open a formal support thread and select the Kendo in the Product category.

Regards,
Eyup
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tyler
Top achievements
Rank 1
commented on 24 Oct 2018, 07:37 PM

Thank you Eyup,

The second link was most helpful.  I was partially to the solution and still am.  Using the parse on the data source to create an independent field had the desire result.  I am facing a second issue now.  This solution works fine when there is a single date/time column in the grid, but I have 2 date fields and 2 string fields.  If I filter by the 'eq' on either date field, I can also filter on the string fields.  But, when I try to filter on both date fields, I get no results.  I added a simple alert to identify e.field before the filter is set.  I get the e.field for the first date column, but when I try to filter by 'eq' on the second date column, I get no alert and no results.

 

Does Progress have a solution to filter by 'eq' on more than one date/time fields?

Eyup
Telerik team
commented on 29 Oct 2018, 09:51 AM

Hi Tyler,

You can find additional details about the filter method of the datasource widget here:
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/filter

You will notice that it also has an option to join multiple filters with OR statement in addition to AND. A practical implementation you can find here:
https://docs.telerik.com/kendo-ui/knowledge-base/filter-all-columns-with-one-textbox

I hope this will prove helpful. For additional questions, you can open a new thread and select the appropriate product as suggested in my previous reply.

Regards,
Eyup
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
kishor
Top achievements
Rank 1
commented on 27 Nov 2019, 11:03 AM

I tried the code shown in the demo but the filter does not work for me.
the grid the value is displayed as '27/11/2019 12:34:20' and I am giving the value '27/11/2019' in the text box to search with Filter option as 'Equal To'. No results are returned when I have selected this value from the grid itself.

Greater than and Less Than filter options work fine. Just the equal to is not.

Please tell me what is wrong here.
Thanks

Eyup
Telerik team
commented on 02 Dec 2019, 06:01 AM

Hello Kishor,

 

This happens because the EqualTo filter function compares everything literally and since 27/11/2019 12:00:00 is not equal to 27/11/2019 12:34:20, the filtering does not show any record.

You can use one of the options suggested in the last post here to achieve this requirement:
https://www.telerik.com/forums/date-filter-doesn-t-ignore-the-time#P488Yi8khEa0SgL15ZhRPQ

 

Regards,
Eyup
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
kishor
Top achievements
Rank 1
commented on 02 Dec 2019, 06:42 AM

Thanks Eyup
kishor
Top achievements
Rank 1
commented on 03 Dec 2019, 12:16 PM

how can implement client side paging/filtering with kendo grid?
Eyup
Telerik team
commented on 06 Dec 2019, 08:45 AM

Hello Kishor,

 

The Kendo grid is entirely client-side based:
https://demos.telerik.com/kendo-ui/grid/filter-row

For any specific questions you can refer to the Kendo UI for jQuery forums.

 

Regards,
Eyup
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
kishor
Top achievements
Rank 1
commented on 10 Dec 2019, 08:41 AM

How can set two datetimepicker in filterable row mode like shown in image
kishor
Top achievements
Rank 1
commented on 10 Dec 2019, 08:59 AM

How can add from and to datepicker with operator in filterable row mode.
Eyup
Telerik team
commented on 10 Dec 2019, 09:21 AM

Hello Kishor,

 

Questions regarding the Kendo UI toolset you can post in their respective forums:
https://www.telerik.com/forums/kendo-ui

 

Regards,
Eyup
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
kishor
Top achievements
Rank 1
commented on 12 Dec 2019, 09:32 AM

I was implemented server side filter, my code was

 $(document).ready(function () {

        getDateFormat();

        var options = localStorage[$("#spUserName").text() + "_peppol_kendo-grid-options-rejected"];
        var mydataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "LoadDeliveredDocuments",
                    type: "post",
                    dataType: "json"
                }
            },parameterMap: function (data, type) {
                return {
                    take: data.take,
                    skip: data.skip,
                    sort: data.sort,
                    filter: data.filter,
                    structureID:""
                }
            },
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
             requestEnd: function (e) {
                setTimeout(function (e) {
                    hideAjaxLoading();
                })
            },   
            sort: ({ field: "DocumentDepositDate", dir: "desc" }),
         
            schema: //The configuration used to parse the remote service response.
            {
                data: "Data",
                total: "Total",
                model: {
                    fields: {
                        DocumentNumber: { type: 'string' },
                        DocumentStatus: { type: 'string' },
                        DocumentReceiver: { type: 'string' },
                        DocumentDepositDate: { type: 'date' }, /*{ type: 'date' },*/
                        DocumentDepositDate2: { type: 'string' },
                        DocumentPayableAmount: { type: 'number' },
                        DocumentSender: { type: 'string' },
                        SenderInfo1: { type: 'string' },
                        SenderInfo2: { type: 'string' },
                        DocumentType: { type: 'string' }
                    }
                }
            }

            //pageSize should be in the datasource also else we see "Nan-Nan of X items"
            //(cf. < https://stackoverflow.com/questions/23941065/pager-error-in-kendo-gridnan-nan-of-1-items >)
            , pageSize: 100
        });
        mydataSource.bind("error", mydataSource_error);
        mydataSource.bind("change", mydataSource_change);
      
        var gridbuttons2 = '<div id="toolbar"></div>';
        var gridbuttons = '';

       
        var label = "";
        var cleanlabel = "";

        label = "@Resources.Index.btnRefresh";
        cleanlabel = label.replace(/#/g, "\\#");
        gridbuttons += '<a id="refreshGrid" class="k-button k-button-icontext" href="\\#" title="' + cleanlabel + '"><span class="k-sprite fal fa-sync"></span></a>';


        label = "@Resources.Index.btnDelete";
        cleanlabel = label.replace(/#/g, "\\#");
        gridbuttons += '<a id="deleteGridRec" class="k-button k-button-icontext" onclick="deleteRecords()" href="\\#" title="' + cleanlabel + '"><span class="k-sprite fal fa-times"></span>' + cleanlabel + '</a>';


        $("#grid").kendoExtGrid({
            //autoBind:false,
            autoBind: !options,
            toolbar: [
                {
                    template: gridbuttons
                }
            ],
               columns: [
                {
                    template: '<input type="checkbox" class="chkbx" />',
                    minResizableWidth: 40,
                    width: 40,
                    title: "<input type='checkbox' class='chkhdr' />"
                },
                {
                    field: "DocumentNumber", title: '@Resources.Index.DocumentNumber', width: "190px",
                    template: '<a class="jobInfo" title="${ DocumentNumber }" href="\\#" >#=DocumentNumber#</a> ',
                    filterable: {
                        multi: false,
                        cell: {
                            operator: "contains",
                            suggestionOperator: "contains",
                            showOperators: false
                        },
                        extra: false,
                    }
                },
                {
                    field: "DocumentStatus", title: '@Resources.Index.DocumentStatus', width: "120px",
                    template: "<span class='label label-sm' title='${DocumentStatus}'>" + kendo.htmlEncode("${DocumentStatus}") + "</span>",
                    filterable: {
                        multi: true,
                        cell: {
                            template: statusFilter, showOperators: false
                        }
                    }
                },
                {
                    field: "DocumentReceiver", title: '@Resources.Index.DocumentReceiver', width: "175px",
                    //TODO: test and see in cae of value ith quote or double quotes or html chars...
                    template: "<span title='${DocumentReceiverID}'>${DocumentReceiver}</span>",
                    filterable: {
                          cell: {
                                operator: "contains",
                                suggestionOperator: "contains",
                                showOperators: false
                        },
                        extra: false
                    }
                },
                {
                    field: "DocumentDepositDate", title: '@Resources.Index.DocumentDepositDate', width: "250px",
                    template: '#= kendo.toString(kendo.parseDate(DocumentDepositDate, "yyyy-MM-ddTHH:mm:ss.fffZ"), "' + userFormatDate + '") #',
                    filterable: {
                       cell: { template: DateFilters }
                    }
                },
                {
                    field: "DocumentPayableAmount", title: '@Resources.Index.DocumentPayableAmount', width: "175px",
                    attributes: { class: "numbers" },
                    filterable: {
                        multi: false,
                        cell: {
                           operator: "gte"
                        },
                        extra: false
                    }

                },
                {
                    field: "DocumentSender", title: '@Resources.Index.DocumentSender', width: "175px",
                    //TODO: test and see in cae of value ith quote or double quotes or html chars...
                    template: "<span title='${DocumentSenderID}'>${DocumentSender}</span>",
                    filterable: {
                        multi: false,
                        cell: {
                                operator: "contains",
                                suggestionOperator: "contains",
                                showOperators: false
                        },
                        extra: false
                    }
                },
                {
                    field: "SenderInfo1", title: '@Resources.Index.SenderInfo1', width: "175px",
                    //TODO: test and see in cae of value ith quote or double quotes or html chars...
                    template: "<span title='${SenderInfo1}'>${SenderInfo1}</span>",
                    filterable: {
                        multi: false,
                        cell: {
                                operator: "contains",
                                suggestionOperator: "contains",
                                showOperators: false
                        },
                        extra: false
                    }
                },
                {
                    field: "SenderInfo2", title: '@Resources.Index.SenderInfo2', width: "175px",
                    //TODO: test and see in cae of value ith quote or double quotes or html chars...
                    template: "<span title='${SenderInfo2}'>${SenderInfo2}</span>",
                    filterable: {
                        multi: false,
                        cell: {
                                operator: "contains",
                                suggestionOperator: "contains",
                                showOperators: false
                        },
                        extra: false
                    }
                   },
                   {
                       field: "DocumentType", title: '@Resources.Index.DocumentType', width: "175px",
                       //TODO: test and see in cae of value ith quote or double quotes or html chars...
                       template: "<span title='${DocumentType}'>${DocumentType}</span>",
                       filterable: {
                           multi: false,
                           cell: {
                               operator: "contains",
                               suggestionOperator: "contains",
                               showOperators: false
                           },
                           extra: false
                       }
                   },
            ],
            serverPaging: true,
            serverFiltering: true,
            resizable: true,
            //filterable: true,
            filterable: { mode: "row,menu"},
            filterMenuInit: onFilterMenuInit,
            // height: setGridHeight(),
            dataBound: function (e) {
              
                $(".chkhdr").prop("checked", false);

                //var columns = e.sender.columns;
                var columnIndex = this.wrapper.find(".k-grid-header [data-field=" + "DocumentStatus" + "]").index();
                //var columnIndexForComments = this.wrapper.find(".k-grid-header [data-field=" + "Comments" + "]").index();
                var rows = e.sender.tbody.children();
                rows.on("click", onGridRowClick);

                var previousSelectedJob = selectedJobItem;
                selectedJobItem = [];
                for (var j = 0; j < rows.length; j++) {
                    var row = $(rows[j]);
                    var dataItem = e.sender.dataItem(row);
                    var status = dataItem.get("SubmittedStatusCodeColor");
                    var idValue = dataItem.get("DocumentNumber");
                    $.each(previousSelectedJob, function (key, value) {
                        if (value.DocumentNumber == idValue) {
                            row.find('[type=checkbox]').click();
                        }
                    });
                    //var statusText = dataItem.get("DocumentStatus");
                    var cell = row.children().eq(columnIndex);
                    var span = $(cell).find('span');
                    span.addClass(getStatusClass(status));
                }
                var AllowDeleteButton = '@Session["DeleteAllowed"]';
                if (AllowDeleteButton == "false") {
                    $("#deleteGridRec").hide();
                    $("#context-menu #delete").hide();
                }
            },
            sortable: {
                allowUnsort: false
            },
            pageable:
            {
                pageSizes: [100, 200, 300, 400, 500 , "all"]
            },
            //mobile: "phone", //bentest (cf. https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/mobile)
            dataSource: mydataSource,
            toolbarColumnMenu: true
        });

       
        var grid = $('#grid').data('kendoExtGrid');
        if (options) {
            //kishor:commented because applying date format to kendo date picker get issue when redirection happen.
            //   grid.setOptions(JSON.parse(options));

            //kishor:fixed issue: applying date format to kendo date picker  and persistence of grid data when redirection happen.

            var originalOptions = grid.getOptions();
            var status = originalOptions.columns[2].filterable.cell;
            var depositeDateFunc = originalOptions.columns[4].filterable.cell;
            var parsedGridoptions = JSON.parse(options);
            var gridfilter = grid.dataSource.filter();
            var filterCount = 0;
            if (parsedGridoptions.dataSource.filter != undefined) {

                for (let i = 0; i < parsedGridoptions.dataSource.filter.filters.length; i++) {
                    if (parsedGridoptions.dataSource.filter.filters[i].field == "DocumentDepositDate") {

                        var newTime = new Date(parsedGridoptions.dataSource.filter.filters[i].value)
                        filterCount = filterCount + 1;
                        newTime = new Date(newTime.getFullYear(), newTime.getMonth(), newTime.getDate());
                        var operator = parsedGridoptions.dataSource.filter.filters[i].operator;
                        if (operator == "gte" || operator == "lt") {
                            newTime = new Date(newTime.getFullYear(), newTime.getMonth(), newTime.getDate());
                        }
                        else if (operator == "gt" || operator == "lte") {
                            newTime = new Date(newTime.getFullYear(), newTime.getMonth(), newTime.getDate(), 23, 59, 59);
                        }

                        parsedGridoptions.dataSource.filter.filters[i].value = newTime;
                    }
                    else
                        parsedGridoptions.dataSource.filter.filters[i].value = parsedGridoptions.dataSource.filter.filters[i].value
                }
                gridfilter = parsedGridoptions.dataSource.filter;
            }
            parsedGridoptions.columns[4].filterable.cell = depositeDateFunc;
            parsedGridoptions.columns[2].filterable.cell = status;
            grid.setOptions(parsedGridoptions);
            grid.dataSource.filter(gridfilter);
        }

        var pager = grid.pager;
        pager.bind('change', onChangePage);

        function onChangePage(e) {
            $(".chkhdr").prop("checked", false);
            $("#deleteGridRec").addClass("k-state-disabled").attr('disabled', true);
        }


        window.onbeforeunload = function () {
            //If onbeforeunload event fired because of settings changed in right panel then ,  we should not load grid settings into cache..
            if (isSettingsChanged == false) {
                localStorage[$("#spUserName").text() + "_peppol_kendo-grid-options-rejected"] = kendo.stringify(grid.getOptions());
            }

            return;
        }
    
    });

 

and when i open page and see in browser console it calls transport read request more than one. how to prevent multiple calls.

kishor
Top achievements
Rank 1
commented on 12 Dec 2019, 12:59 PM

i was found issue that makes multiple request. i was added two filterable cell template for status and date those calls additional two calls.

 

how to prevent to make additional two calls.

shown in picture.

 

thanks

Eyup
Telerik team
commented on 17 Dec 2019, 06:50 AM

Hello Kishor,

 

This question is in the expertise of our Kendo Support Experts. Feel free to open a thread in the mentioned forums and they will respond to you adequately:
https://www.telerik.com/forums/kendo-ui

 

Regards,
Eyup
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
kishor
Top achievements
Rank 1
commented on 26 Dec 2019, 10:24 AM

When type first time in search box,checkbox list not filtering. when i refresh page and type in searchbox then checkbox list filters
Eyup
Telerik team
commented on 31 Dec 2019, 05:58 AM

Hi Kishor,

 

There is probably some kind of javascript error. You can direct your question to Kendo for jQuery forums or open a new Support thread using your active Trial or Full license.

The team responsible for Kendo will answer your technical questions accordingly.

 

Regards,
Eyup
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
kishor
Top achievements
Rank 1
commented on 31 Dec 2019, 11:02 AM

i need filters like shown in image
kishor
Top achievements
Rank 1
commented on 02 Jan 2020, 07:02 AM

in Kendo UI v2018.3.911 pager visibility feature is exist or not. 

if exist given sample demo of it

Eyup
Telerik team
commented on 02 Jan 2020, 08:54 AM

Hi Kishor,

 

Kendo provides the Filter component which can help you achieve a similar functionality:
https://demos.telerik.com/kendo-ui/filter/index

For further details, you can contact the Kendo support team as mentioned in my previous replies.

 

Regards,
Eyup
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
kishor
Top achievements
Rank 1
commented on 27 Feb 2020, 06:05 AM

can we apply client side filtering in kendoExtGrid filterable mode with row, menu?

I was added kendoAutoComplete,kendoNumericTextBox,kendoDatePicker,kendoDropDownList and on change of this need to filter kendogrid datasource without calling server side function.

 

Eyup
Telerik team
commented on 03 Mar 2020, 03:52 AM

Hello Kishor,

 

Yes, you can use the filter method of the DataSource instance to achieve this requirement:
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/filter

Here is a practical implementation:
https://docs.telerik.com/kendo-ui/knowledge-base/multiselect-used-for-column-filtering

Regards,
Eyup
Progress Telerik

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
kishor
Top achievements
Rank 1
commented on 05 Mar 2020, 06:06 AM

I used serverfiltering in kendo grid and added custom dropdownlist and i want to disabled serverfiltering for this dropdownlist means on selected item from dropdown it not makes web api call.

 

My code was

 

 var mydataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "LoadInvoices",
                    type: "post",
                    dataType: "json"

                }
            },
            parameterMap: function (data, type) {
                return {
                    take: data.take,
                    skip: data.skip,
                    pageSize: data.pageSize,
                    sort: data.sort,
                    filter: data.filter,
                    structureID: ""
                }
            },
           serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
            requestEnd: function (e) {
                setTimeout(function (e) {
                    hideAjaxLoading();
                });
            },
            sort: ({ field: "SubmittedDate", dir: "desc" }),
            //NOTE: the shema allow to avoid the tips to cast json "date" with tips
            //(cf. <https://stackoverflow.com/questions/726334/asp-net-mvc-jsonresult-date-format>)
            schema: //The configuration used to parse the remote service response.
            {
                data: "Data",
                total: "Total",
                model: {
                    fields: {
                        InvoiceNumber: { type: 'string' },                      
                        SubmittedStatus: { type: 'string' }
                      
                    }
                }
            }

            //pageSize should be in the datasource also else we see "Nan-Nan of X items"
            //(cf. < https://stackoverflow.com/questions/23941065/pager-error-in-kendo-gridnan-nan-of-1-items >)
            , pageSize: 100
        });

$("#grid").kendoExtGrid({
            //autoBind:false,
            autoBind: true,
            selectable: "multiple, row",
            toolbar: [
                {
                    template: gridbuttons
                }
            ],
            columns: [
               
                {
                    field: "InvoiceNumber", title: '@Html.Raw(Resources.Index.InvoiceNumber)', width: "190px",
                    template: '<a class="jobInfo" title="${ InvoiceNumber }" href="\\#" >#=InvoiceNumber#</a> ',
                    filterable: {
                        cell: {
                            @*template: function (args) { AutocompleteFilter(args, "InvoiceNumber", '@Html.Raw(Resources.Index.InvoiceNumber)') },*@
                            showOperators: false,
                            operator: "contains",
                            template: function (e) {
                                e.element.addClass("k-textbox"),
                                    e.element.attr("placeholder", '@Html.Raw(Resources.Index.InvoiceNumber)')
                            }
                        },
                        extra: false,
                    }
                },               
                {
                    field: "SubmittedStatus", title: '@Html.Raw(Resources.Index.SubmittedStatus)', width: "240px",
                    template: "<span class='label label-sm' title='${SubmittedStatus}'>" + kendo.htmlEncode("${SubmittedStatus}") + "</span>",
                    filterable: {
                        multi: true,
                        checkAll: true,
                        search: true,
                        cell: {
                            template: function (args) { LoadStatus(args) },
                            showOperators: false

                        }
                    }
                },
                
            resizable: true,
            filterable: { mode: "row, menu" },
            filterMenuInit: onFilterMenuInit,
            // height: setGridHeight(),
            dataBound: function (e) {             


            },

            sortable: {
                allowUnsort: false
            },
            pageable:
            {
                pageSizes:["All",100,200,300,400,500],
                responsive: false
                //buttonCount: 100,
                //input: true
            },
            //mobile: "phone", //bentest (cf. https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/mobile)
            dataSource: mydataSource,

            toolbarColumnMenu: true
        });


function LoadStatus(args) {
        args.element.kendoDropDownList({
            autoBind: false,
            dataTextField: "strValue",
            dataValueField: "strValue",
            optionLabel: {
                strValue: '@Html.Raw(Resources.Index.SelectAStatus)',
                strKey: "None"
            },            
            dataSource: {
                type: "json",
                transport: {
                    read: {
                        url: "LoadStatus",
                        dataType: "json"
                    }
                }
            },
            valuePrimitive: true,
            
        });
      
    }

 

 

Eyup
Telerik team
commented on 09 Mar 2020, 06:00 AM

Hi Kishor,

 

For more specific Kendo questions, feel free to direct your questions to our Kendo support team either by opening a Kendo forum thread or support ticket.

If you have any questions about Telerik AJAX Web Forms components, I will try to help.

 

Regards,
Eyup
Progress Telerik

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
kishor
Top achievements
Rank 1
commented on 30 Mar 2020, 06:31 AM

I am using  kendo editor with textarea in modal popup. I am inserting text in this editor dynamically. Whenever I insert text in editor , focus of cursor is not getting properly. I have used below code to focus on editor.

If i use kendo editor with textarea without modal popup then below code works but when i add  kendo editor with textarea in modal popup then it not works

My code is

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js">
  </script>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="modal fade" id="textZoneModal" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">

                    <div class="modal-body">
                       
                        <div id="example">
                            <textarea id="editor" rows="5" cols="15" style="height: 140px" aria-label="editor">
                             </textarea>

                        </div>

                    </div>
                   
                </div>

            </div>
        </div>

<script>
  $("#textZoneModal").modal('show');
$("#editor").kendoEditor();
var editor = $("#editor").data("kendoEditor");
  editor.value("I am using  kendo editor with textarea in modal popup.")
editor.focus();
   var range = editor.createRange();
            range.selectNodeContents(editor.body);
            range.collapse(false);
            editor.selectRange(range);
</script>
</body>
</html>

 

Rumen
Telerik team
commented on 31 Mar 2020, 11:21 AM

Hi Kishor,

Can you please post your question for the Kendo UI Editor in its designated forum - https://www.telerik.com/forums/kendo-ui/editor?

Another option is to open a support ticket for it.

Thank you!

Regards,
Rumen
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Shawn
Top achievements
Rank 1
answered on 16 Mar 2021, 03:59 PM
I am having the same issue on Blazor Server Grid
0
Rumen
Telerik team
answered on 17 Mar 2021, 02:27 PM

Hi Shawn,

Please use the Telerik Blazor forums to submit your inquiries for the Blazor components.

I also noticed that my colleagues from the Blazor team have already answered your Default Grid Fitler ticket 1511386 for the Blazor Grid.

 

Regards,
Rumen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Filter
Asked by
Matt
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Eyup
Telerik team
Shawn
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or