1. Home
  2. Forum
  3. ASP.NET MVC
  4. Filter operator and customtoolbaritems

Filter operator and customtoolbaritems

Hi All, 

in Razor, in a grid, I am unable to figure out how to define filter operator "Contains" similarly as it works nicely in Search. 

also, why does it complain about CustomToolBarItems? I want to add toggle buttons that would hide and show a column, is it possible?

Thanks.

@(Html.EJ().Grid<HomeController.CompareParagraph>("gridLanguages")
      .Datasource((IEnumerable<object>)ViewBag.paragraphs)
      .GridLines(GridLines.Vertical)
      .AllowFiltering() // here I need something in FilterSettings to set the operator to Contains
      .AllowSearching().SearchSettings(d => d.Operator( Operator.Contains ))
      .ToolbarSettings
      (
        toolbar => toolbar.ShowToolbar()
            .ToolbarItems(items => items.AddTool(ToolBarItems.Search))
            .CustomToolBarItems(new List<object> { new CustomToolbarItem {TemplateID = "#Refresh"}})
      )
      .ClientSideEvents(eve => eve.ToolbarClick("onToolBarClick"))
      .Locale("hu-HU")
      .AllowResizing()
      .AllowResizeToFit()
      .AllowTextWrap()
      .IsResponsive()
      .AllowScrolling()
      .ScrollSettings(scroll => scroll.Height(680)
      //.EnableVirtualization().AllowVirtualScrolling().VirtualScrollMode(VirtualScrollMode.Normal)
      )
      .Columns(col =>
      {
          col.Field("Bek").Width(50).Add();
          col.Field("HU").Add();
          col.Field("FR").Add();
          col.Field("EN").Add();
          col.Field("DE").Add();
      }))

10 Replies
GG Gyorgy Gorog July 25, 2018 11:39 AM UTC

Also with the same grid, virtual scrolling runs to empty screen when 
.AllowScrolling()
.ScrollSettings(scroll => scroll.Height(640).AllowVirtualScrolling().VirtualScrollMode(VirtualScrollMode.Normal)

(as to the previous post, the language buttons work nicely but I want them to be part of the toolbar). 


GG Gyorgy Gorog July 26, 2018 09:56 AM UTC

Sorry if I'm repeating things but my new threads seem to disappear for a couple of days.

As the column hiding/showing buttons work nicely, I want them to hide the columns the user does not want from the beginning. However togglebutton isChecked returns undefined. Please advise.

$(document).ready(function() {
        var grid = $("#gridLanguages").data("ejGrid");
        alert($("#buttonHU").ejToggleButton.isChecked); // undefined
        if ($("#buttonHU").ejToggleButton.isChecked === false) {
            grid.hideColumns("HU");
        } 

I have tried $("#buttonHU").ejToggleButton("model.enabled") and also $("#buttonHU").ejToggleButton("option", "enabled") but it usually says properties are available only after plugin creation. 

if I put it in $(window).load(), I get
VM45:4 Uncaught TypeError: a.indexOf is not a function
    at r.fn.init.r.fn.load (:4:18894)
    at :3:15
    at p (jquery-3.2.1.min.js:2)
    at Ja (jquery-3.2.1.min.js:3)
    at r.fn.init.append (jquery-3.2.1.min.js:3)
    at r.fn.init. (jquery-3.2.1.min.js:3)
    at T (jquery-3.2.1.min.js:3)
    at r.fn.init.html (jquery-3.2.1.min.js:3)
    at Object._ajaxSuccessHandler (ej.web.all.min.js:10)
    at Object.success (ej.web.all.min.js:10)

KM Kuralarasan Muthusamy Syncfusion Team July 26, 2018 10:00 AM UTC

Hi Gyorgy, 

Thanks for contacting Syncfusion support. 

Query #1: I am unable to figure out how to define filter operator "Contains" 
 
From this query and given code example, we found that you want to use “Contains” filter operator in grid filterBar. We have already discussed about this topic in our following kb documentation. So please refer this kb to achieve your requirement, 
 

Also refer the following links to know about grid filters and its operators: 



Query #2: I want to add toggle buttons that would hide and show a column, is it possible? 
 
From this query, we found that you want to show or hide the grid columns after rendering the grid. So we suggest you to use columnChooser property of the grid to achieve your requirement. Please refer the following documentation link to know about grid columnChooser property: 
 

Also please refer the following code snippet: 

@(Html.EJ().Grid<object>("FlatGrid") 
         .Datasource((IEnumerable<object>)ViewBag.datasource) 
         .ShowColumnChooser() 
 
               ...... 
) 

By default columnChooser will appear outside the grid. If you want this columnChooser inside the grid toolbar, then please refer the following kb documentation, 


In this kb we have discussed about how render the column chooser within the grid toolbar. You can use this columnChooser property to show or hide the grid columns after rendering the Grid. 

Query #3:  I want them to hide the columns the user does not want from the beginning 

From this query we found that you want to hide the grid column at initial grid rendering. So we suggest you to use visible column property to achieve your requirement. Please refer the following code snippet: 

@(Html.EJ().Grid<object>("FlatGrid") 
          
                ..... 
 
     .Columns(col => 
      { 
          col.Field("Bek").Visible(false).Width(50).Add(); 
      }) 
     ) 

In this code we were hided the “Bek” column of the grid at initial grid rendering. If you want to show this column, then you need to set this visible property as true. So you do not need to use any individual methods to show or hide the column at initial rendering. 

Refer the following link to know about visible property of the Grid: 


Query #4: virtual scrolling runs to empty screen 
 
We suggest you to use enableVirtualization property of the grid to resolve this issue. Please refer the following code snippet; 
 
@(Html.EJ().Grid<object>("FlatGrid") 
          
               ..... 
 
     .AllowScrolling() 
      .ScrollSettings(scroll => scroll.Height(640).EnableVirtualization(true)) 
) 

Refer the following link to know about enableVirtualization property: 



Query #5: as to the previous post, the language buttons work nicely but I want them to be part of the toolbar 

From this query, we found that you want to add this language buttons within the grid toolbar. So we suggest you to use grid custom toolbar items to achieve your requirement. Please refer the following documentation link and kb link to know about custom toolbar items of the Grid: 



Also we have prepared the sample with your requirement and that sample can be downloadable from the below link, 


In this sample we have used “contains” operator to grid filterBar, columnChooser within the Grid toolbar, enableVirtualization property, and added the custom toolbar item also. So please refer this sample for more clarification. 

Please let us know if you need any further assistance on this, 

Regards, 
Kuralarasan M.  


GG Gyorgy Gorog July 26, 2018 12:00 PM UTC

Query #1: I am unable to figure out how to define filter operator "Contains" 

solved perferctly, I am grateful! (hope in JS2 you come up with a simpler property :) 

As to filtering, as the filter is cleared, the column widths reset.
Original:

Filtered:

Filter cleared:



GG Gyorgy Gorog July 26, 2018 12:27 PM UTC

Query #5: as to the previous post, the language buttons work nicely but I want them to be part of the toolbar 

Thanks for the sample, it's really comprehensive.

However I fail to imagine how the toolbar buttons will be toggle and persistent.

https://www.syncfusion.com/kb/2491/how-to-customize-toolbar-with-button-icon-and-link has a section about buttons but it's above my head. I come to these controls to solve basicly everything in C# :( I am a bit lost. 

GG Gyorgy Gorog July 26, 2018 05:15 PM UTC

Query #3:  I want them to hide the columns the user does not want from the beginning 

I understand from your example how to hide the columns. Actually if I don't have French content to present, I add the column as col.Field("FR").Visible(ViewBag.languages.Contains("FR"))
or perhaps could skip adding that column at all.

My problem is, how do I know from the langauge buttons' persisted isChecked state which one is wanted by the user and which is not? And when do I run this script?

I will try something I found in Grid documentation like 
var stateString = window.localStorage.ejToggleButtonbuttonFR; // state as string

GG Gyorgy Gorog July 26, 2018 05:33 PM UTC

Actually what about the opposite? Should the grid search box reside in the grid toolbar? Can't it be moved out?

Or can't the toolbar be narrower than the grid? I'm OK with my buttons right or left to the search box, inside or outside the toolbar.

GG Gyorgy Gorog July 27, 2018 06:52 AM UTC

I have an error in refreshContent(). 

Uncaught TypeError: n.render[(this._id + "_JSONTemplate")] is not a function
    at Object._replacingVirtualContent (<anonymous>:10:3137040)
    at Object._refreshVirtualView (<anonymous>:10:3124176)
    at Object._refreshScroller (<anonymous>:10:3097483)
    at Object._completeAction (ej.web.all.min.js:10)
    at Object.sendDataRenderingRequest (ej.web.all.min.js:10)
    at Object.showColumns (<anonymous>:10:3036119)
    at Object.lngChanged (<anonymous>:7:18)
    at Object._trigger (<anonymous>:10:13905)
    at Object._toggleButtonStatus (ej.web.all.min.js:10)
    at Object._tglebtnclicked (ej.web.all.min.js:10)

GG Gyorgy Gorog July 27, 2018 07:32 AM UTC

Query #3:  I want them to hide the columns the user does not want from the beginning 

Done through localstorage:
 
if (button.isChecked) {
            grid.showColumns(lng);
            localStorage.setItem(lng, "true");
        }...
 function GridCreated() {
        var grid = $("#gridLanguages").data("ejGrid");
        if (localStorage.getItem("HU") === "false")
            grid.hideColumns("HU");...


Problem is, storage does not work if grid content is refreshed, because refresh script has an error (see above). Please correct or let me know if I can do something.
It's 16.2.0.41. 


KM Kuralarasan Muthusamy Syncfusion Team July 27, 2018 01:07 PM UTC

Hi Gyorgy, 

Query #1: As to filtering, as the filter is cleared, the column widths reset. 
 
From your given code, we found that you have used isResponsive, virtualScrolling in same grid. But virtualScrolling does not have the support for isResponsive. So we suspect that this issue is occurred because of this cause. So we suggest you to remove this isResponsive property while using virtualScrolling and enableVirtualization in grid and check this issue status after removing this property. 
 
Refer the following link to further reference, 
 
 
Query #2:  I come to these controls to solve basicly everything in C# :( I am a bit lost. 
 
The Grid client side working is based on javascript code. So we cannot use c# to perform this actions. 
 
Query #3: I want them to hide the columns the user does not want from the beginning 
 
From this query, we found that you want to show or hide the column by using ejToggleButton click. So we suggest you to use change event of ejToggleButton and showColumns and hideColumns method of the ejGrid to achieve your requirement. Please refer the following code snippet: 
 
@(Html.EJ().Grid<object>("FlatGrid") 
       
              ...... 
 
      .ToolbarSettings(tool => 
     { 
          tool.ShowToolbar() 
          .ToolbarItems(items => 
          { 
              items.AddTool(ToolBarItems.Search); 
          }) 
          .CustomToolbarItems(new List<object>() { new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#Bek" }}); 
      }) 
      .Columns(col => 
      { 
          col.Field("Bek").Visible(ViewBag.Bek).Add(); 
     }) 
      .ClientSideEvents(eve => { eve.ToolbarClick("onToolBarClick"); }) 
) 
 
<script type="text/javascript"> 
        function onToolBarClick(args) { 
            $("#" + args.itemName).ejToggleButton({ 
                change: function () {                    
                    var gridObj = $("#FlatGrid").ejGrid("instance"); 
                    if (this.model.toggleState) 
                        gridObj.showColumns(this.model.defaultText); 
                    else 
                        gridObj.hideColumns(this.model.defaultText); 
                } 
            }) 
        } 
</script> 
 
<script id="Bek" type="text/x-jsrender"> 
  @Html.EJ().ToggleButton("Bek").Size(ButtonSize.Mini).ShowRoundedCorner(true).ToggleState(ViewBag.Bek).DefaultText("Bek") 
</script> 
 
In this code we have rendered the ejToggleButton with in the grid toolbar items by using the custom toolbar of the grid. After that we have used change event of the toggleButton with in the toolbarClickevent to perform this action. We have used ToggleState property to active the toggleButton at initial rendering. We have provided the value to this toggleState and the visible column property by using viewBag value. 
 
Refer the following link to know about ejToggleButton and its change event: 
 
 
 
Refer the following link to know about toolbarClick event of ejGrid: 
 
 
Query #4: Should the grid search box reside in the grid toolbar? Can't it be moved out? 
 
You cannot move out the search box outside the grid. But you can use external search box to perform search actions in grid. You can place this external search box outside of the grid. Please refer the following code snippet: 
 
<input type="text" id="Search" /> 
@(Html.EJ().Button("Search") 
.ClientSideEvents(eve => { eve.Click("onSearching"); }) 
) 
 
<script type="text/javascript"> 
        function onSearching(args) { 
           var obj = $("#FlatGrid").ejGrid("instance"); 
            var val = $("#Search").val(); 
            obj.search(val); 
        } 
</script> 
 
In this code we have used ejButton and search method the grid to achieve this requirement. Please refer the following link to know about ejButton and grid search method: 
 
 
 
 
Regards, 
Kuralarasan M. 


Loader.
Up arrow icon