This is a migrated thread and some comments may be shown as answers.

How do I add to the grid filter boxes via Javascript?

3 Answers 57 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Graeme
Top achievements
Rank 1
Graeme asked on 29 Feb 2012, 06:19 PM
I am trying to add filter values so that they appear in the filter dropdowns. I would like to have various search form fields that can have values entered and then click search and it copies the values to the filter and are then applied. I am trying to acheive this with client side operation set to on.

If I disable client side operation. I can see that if I include code like 

   var grid = $(this).data('tGrid');
  grid.filterBy = "Status~eq~'Open'";

in OnDataBinding the filtering occurs and only Status Open events are displayed. However it doesn't actually change the value in the filter. It is still displayed as empty even though the results are filtered.

If I do this with client side operation on the grid filter isn't applied at all.

So I guess the question is how can I get input to appear in the filters from a form element in non client side mode? And how do I get it to work in Client side mode?

Any ideas?

Thanks

Graeme

3 Answers, 1 is accepted

Sort by
0
Dadv
Top achievements
Rank 1
answered on 01 Mar 2012, 05:41 PM
hi,

look at this : http://www.telerik.com/community/forums/aspnet-mvc/grid/how-can-i-change-the-default-filter-for-telerik-mvc-grid.aspx 

You could do something like this : 

function onLoad() {
$('#ColumnId') 
            .find(".t-grid-filter")
            .click(function (e) { 
                var filterIcon = $(this);

                var select = $("<select name='AgencyFilter'><option value='Open'>Open</option>[Add yours options]</select>");


                setTimeout(function () {
                    var filterMenu = filterIcon.data("filter");
                    if (filterMenu.find(":text").length != 0) {
                        filterMenu.find(":text").first().replaceWith(select); 
                        filterMenu.find(":text").last().remove();
                        filterMenu.find(".t-filter-help-text").last().remove();
                        filterMenu.find(".t-filter-operator").last().remove();
                    }
                }, 10);
            });
}

in the grid :

   columns.Bound(o => o.MyColumn).Title("Column name").HeaderHtmlAttributes(new { @id = "ColumnId" });

and :

.ClientEvents(e => e.OnLoad("onLoad"))


Regards,
0
Graeme
Top achievements
Rank 1
answered on 02 Mar 2012, 05:15 PM
Yeah that is good for changing the way the columns work. However what I want to do is have separate text boxes in a form and enter the values in there and pass those to the filter text box. That way if the user looks at the filter value it is the same as the value they entered in the from.

Also does anyone know how to add HTML attributes to the filter box on a column level. I'd like to add knockout data-bind bindings to the filter column textbox.

Thanks
0
Atanas Korchev
Telerik team
answered on 06 Mar 2012, 09:04 AM
Hi,

The idea is the same - attach a  click handler to the filter icon (as shown above). Then use a setTimeout (because the filter menu is built on demand) and find the corresponding textbox:

function onLoad() {
      $(this).find(".t-grid-filter")
            .click(function (e) { 
                var filterIcon = $(this);

                setTimeout(function () {
                    var filterMenu = filterIcon.data("filter");

                    var textbox = filterMenu.find(":text");
                    textbox.val("Some value")
                }, 10);
            });


Greetings,
Atanas Korchev
the Telerik team
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 Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.
Tags
Grid
Asked by
Graeme
Top achievements
Rank 1
Answers by
Dadv
Top achievements
Rank 1
Graeme
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or