1. Home
  2. Forum
  3. ASP.NET MVC
  4. Custom filtering and functionality in Grid

Custom filtering and functionality in Grid

Hi!

I'm working with the grid and I want to filter the data with external dropdownbox filled with the diferents options that exist... is this can be possible?:


These dropdownbox, the values will be dinamically based on existing values:

Also, I don´t know if is it possible to have in the grid a field that will be used for the background color of a cell instead of being printed. For example, in a dialog when I adds/saves in the grid, there will be for some fields a checkbox in left like this:



At the moment of saving data, in the grid I want to use the value of checkboxes to modify the background color depends if it's checked or not. Related withthe previous image, the final result in the grid will be like this (the red backgrouds are because "Feb" and "Abr" was checked and "Ene" and "Mar" are white because are unchecked)



If you see, I don't print the boolean value of the checkboxes... instead, I want to use them for the color of the related field.

Thanks in advance,

Regards!

14 Replies
FS Farveen Sulthana Thameeztheen Basha Syncfusion Team October 24, 2017 05:21 PM UTC

Hi Daniel, 

Thanks for contacting Syncfusion support. 

Query #1 :- I'm working with the grid and I want to filter the data with external dropdownbox filled with the diferents options that exist. 

We have checked your query and we have filtered the data using the filterColumn method of the Grid while selecting the value from the dropdownList change event. Please refer to the code example 

 
<select id="CustomerID1" name="CustomerID"> 
    <option value="VINET">VINET</option> 
    <option value="HANAR">HANAR</option> 
    <option value="SUPRD">SUPRD</option> 
    <option value="CHOPS">CHOPS</option> 
</select> 
<script type="text/javascript"> 
    $(function () { 
        $("#CustomerID1").ejDropDownList({ change: "filter" }); 
        $("#Grid").ejGrid({ 
            //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js' 
            dataSource: window.gridData, 
            allowFiltering: true, 
            toolbarSettings: { 
                showToolbar: true, 
                toolbarItems: ["add", "edit", "delete", "update", "cancel"] 
            }, 
             
            allowPaging: true, 
            columns: [ 
                { field: "OrderID", isPrimaryKey: true }, 
                { field: "CustomerID" }, 
                { field: "ShipCity" } 
            ], 
         }); 
    }); 
 
    function filter(args) { 
        $("#Grid").ejGrid("instance").filterColumn("CustomerID", "equal", args.text, "and", true); 
    } 
</script> 

Please refer to the sample:- 



Query #2 :- At the moment of saving data, in the grid I want to use the value of checkboxes to modify the background color depends if it's checked or not. 
 
We have checked this query and we have placed the checkbox in the dialog template and on actionComplete event of the Grid, when the requestType as “save”, we have changed the background color of the particular cell.  

Please refer to the code example:- 
<body> 
    <div id="Grid"></div> 
    <script id="template" type="text/template"> 
        <table cellspacing="10"> 
            <tr> 
               <td> 
                    <input type="checkbox" class="nodetext" id="check1" /> 
                </td> 
            </tr> 
        </table> 
    </script> 
    <script type="text/javascript"> 
        $(function () { 
            $("#Grid").ejGrid({ 
                //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js' 
                dataSource: window.gridData, 
                editSettings: { 
                    allowEditing: true, 
                    allowAdding: true, 
                    allowDeleting: true, 
                    editMode: "dialogtemplate", 
                    dialogEditorTemplateID: "#template" 
                }, 
                allowPaging: true, 
                columns: [ 
                    .  .   . 
                ], 
                actionComplete: "complete" 
            }); 
        }); 
 
        function complete(args) { 
            $("#EmployeeID").ejNumericTextbox(); 
            $("#Freight").ejNumericTextbox(); 
            $("#ShipCity").ejDropDownList(); 
            $("#check1").ejCheckBox(); 
            if (args.requestType == "save" && args.rowData.check1) { 
                $("#Grid").find(".e-gridcontent tr:eq(" + args.selectedRow + ") td:eq(2)").css("background-color", "yellow"); 
            } 
        } 
    </script> 
</body> 

Refer to the sample and documentation Link:- 



Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 




DA Daniel October 24, 2017 10:05 PM UTC

Hi!!!

Query #1 :- I'm working with the grid and I want to filter the data with external dropdownbox filled with the diferents options that exist. 
With the example, I implemented same functionality to my solution and works fine. I have to questions related to this:

* Can I hide filtering in grid (full row) to make filtering only from the dropdownlist?



* Is there a way to remove the selection and remove the filter for each?




Query #2 :- At the moment of saving data, in the grid I want to use the value of checkboxes to modify the background color depends if it's checked or not. 

Also works the sample code but there is some things:

* How to load the colors at the begging or when is paging for the current rows?
* The boolean value, it need to be hide in grid but visible in the add/edit form. How to do this? Need I use the dialog template?



Thanks, regards!


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team October 25, 2017 04:56 PM UTC

Hi Pratheep, 

Thanks for contacting Syncfusion Support. 

We have checked your query and when we use template editing you can change the elements that are defined in the Template to appropriate JS controls  in actionComplete event of the Grid. Your reported problem occurs when you does not render ejButton inside the actionComplete event.So we suggested you to render ejButton on ActionComplete event of the Grid. We have modified the sample which can be downloaded from the below location. 


Please refer to the code example:- 

     <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" > 
          <ClientSideEvents ActionComplete="complete" EndAdd="endAdd" EndDelete="endDelete" EndEdit="endEdit" /> 
                    <Columns> 
                          .  .  . 
                    </Columns> 
          <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 
     </ej:Grid> 
 
     function complete(args) { 
         $("#btncountry").ejButton({ 
                text: "template button", 
                click: function (args) { 
                    alert('yes'); 
                    $("#Dialog").ejDialog("open"); 
                } 
            }); 
            function rowSelected(args) { 
                var textvalue = true; 
                $("#ShipCountry").val(args.data.ShipCountry); 
                $("#CountryCode").val(args.data.CountryCode); 
                var gridObj = $("#ShipGrid").data("ejGrid"); 
                 gridObj.clearSelection(args.rowIndex);                 
                $("#Dialog").ejDialog("close"); 
          } 
       } 
    </script> 
 
           

Refer to the documentation and Online Demo Link:- 



Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 




FS Farveen Sulthana Thameeztheen Basha Syncfusion Team October 25, 2017 05:16 PM UTC

Hi Daniel, 
 
Please ignore the previous update. 

Query #1 :- Can I hide filtering in grid (full row) to make filtering only from the dropdownlist? 
 
You can hide the filterbar cell using dataBound event of the Grid. In the dataBound we can find the row of the filterbar and hide the row.  
 
  2.  Is there a way to remove the selection and remove the filter for each? 
 
We have added clear in dropdownlist and when we select the clear text we can remove the filtering for the particular column/ all column using clearFiltering method ejGrid. 
 
We used clearFiltering method in change event of dropdown. 
 
Please refer to the code example for both of the queries:- 
 
<select id="CustomerID1" name="CustomerID"> 
    <option value="VINET">VINET</option> 
    <option value="HANAR">HANAR</option> 
    <option value="SUPRD">SUPRD</option> 
    <option value="CHOPS">CHOPS</option> 
    <option value="clearFilter">CLEAR</option> 
</select> 
<script type="text/javascript"> 
      $(function () { 
          $("#CustomerID1").ejDropDownList({ change: "filter" }); 
          $("#Grid").ejGrid({ 
              dataSource : window.gridData, 
              allowFiltering:true, 
              columns : [ 
                  { field: "OrderID", isPrimaryKey: true }, 
                  { field: "CustomerID" }, 
                  { field: "ShipCity" } 
              ], 
              actionComplete : "complete", 
              dataBound:"databound" 
          }); 
      }); 
 
    function databound(args){ 
        this.element.find(".e-filterbar").hide(); 
    } 
    function filter(args) { 
        $("#Grid").ejGrid("instance").filterColumn("CustomerID", "equal", args.text, "and", true); 
        if(args.text == "CLEAR") 
            $("#Grid").ejGrid("clearFiltering");  
    } 
    </script> 
 
Please refer to the sample:- 
 
 
Refer to the API link:- 
 
 
 
Query # 3 :- How to load the colors at the begging or when is paging for the current rows? 
 
We have already discussed about how to customize the cell using “queryCellInfo” in  our Syncfusion Knowledge base. For your convenience please find the KB in following link. 



Query#4 :- The boolean value, it need to be hide in grid but visible in the add/edit form. How to do this? Need I use the dialog template? 
 
Yes, you need to use dialog template to hide the column in Grid and  to be visible in add/edit form. Refer to the documentation link:- 


Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 
 
 



DA Daniel October 25, 2017 08:35 PM UTC

Hi!

Thanks for your help, with the solution of query #1 and #2... I already implemented in my solution and it's fine.

The query #3 about the "queryCellInfo" and colors, also it's fine... Only one question more related to this: At the moment of printing... is there any way to also print these colors?



The query #4 about the dialog template form... I already searched some info to check how to implement the foreign key columns but I didn´t find anything. How I migrate the following colulms definitions with the foreign key columns, formats, edit options and rules?

.Columns(col =>
    {
         col.Field("PagoID").HeaderText("Pago ID").IsPrimaryKey(true).ValidationRules(v => v.AddRule("required", true)).Visible(false).Add();
        col.Field("AlumnoID").HeaderText("Alumno").Width("230").ForeignKeyField("AlumnoID").ForeignKeyValue("Nombre").DataSource((IEnumerable<object>)ViewBag.lstAlumnos).ValidationRules(v => v.AddRule("required", true)).Add();
        col.Field("CicloID").HeaderText("Ciclo").Width("110").ForeignKeyField("CicloID").ForeignKeyValue("Ciclo").DataSource((IEnumerable<object>)ViewBag.lstCiclos).ValidationRules(v => v.AddRule("required", true)).Add();
        col.Field("GradoID").HeaderText("Grado").Width("110").ForeignKeyField("GradoID").ForeignKeyValue("Grado").DataSource((IEnumerable<object>)ViewBag.lstGrados).ValidationRules(v => v.AddRule("required", true)).Add();
        col.Field("Horario").HeaderText("Horario").Width("110").ValidationRules(v => v.AddRule("required", true)).Add();
        col.Field("blEne").HeaderText("blEne").EditType(EditingType.Boolean).Width("35").Visible(false).Add();
        col.Field("Ene").HeaderText("Ene").Width("110").ValidationRules(v => v.AddRule("min", "0")).EditType(EditingType.Numeric).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).Format("{0:C}").Add();
        col.Field("blFeb").HeaderText("blFeb").EditType(EditingType.Boolean).Width("35").Visible(false).Add();
        col.Field("Feb").HeaderText("Feb").Width("110").ValidationRules(v => v.AddRule("min", "0")).EditType(EditingType.Numeric).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).Format("{0:C}").Add();
        col.Field("blMar").HeaderText("blMar").EditType(EditingType.Boolean).Width("35").Visible(false).Add();
        col.Field("Mar").HeaderText("Mar").Width("110").ValidationRules(v => v.AddRule("min", "0")).EditType(EditingType.Numeric).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).Format("{0:C}").Add();
        col.Field("blAbr").HeaderText("blAbr").EditType(EditingType.Boolean).Width("35").Visible(false).Add();
        col.Field("Abr").HeaderText("Abr").Width("110").ValidationRules(v => v.AddRule("min", "0")).EditType(EditingType.Numeric).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).Format("{0:C}").Add();
        col.Field("blMay").HeaderText("blMay").EditType(EditingType.Boolean).Width("35").Visible(false).Add();
        col.Field("May").HeaderText("May").Width("110").ValidationRules(v => v.AddRule("min", "0")).EditType(EditingType.Numeric).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).Format("{0:C}").Add();
        col.Field("blJun").HeaderText("blJun").EditType(EditingType.Boolean).Width("35").Visible(false).Add();
        col.Field("Jun").HeaderText("Jun").Width("110").ValidationRules(v => v.AddRule("min", "0")).EditType(EditingType.Numeric).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).Format("{0:C}").Add();
        col.Field("blJul").HeaderText("blJul").EditType(EditingType.Boolean).Width("35").Visible(false).Add();
        col.Field("Jul").HeaderText("Jul").Width("110").ValidationRules(v => v.AddRule("min", "0")).EditType(EditingType.Numeric).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).Format("{0:C}").Add();
        col.Field("blAgo").HeaderText("blAgo").EditType(EditingType.Boolean).Width("35").Visible(false).Add();
        col.Field("Ago").HeaderText("Ago").Width("110").ValidationRules(v => v.AddRule("min", "0")).EditType(EditingType.Numeric).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).Format("{0:C}").Add();
        col.Field("blSep").HeaderText("blSep").EditType(EditingType.Boolean).Width("35").Visible(false).Add();
        col.Field("Sep").HeaderText("Sep").Width("110").ValidationRules(v => v.AddRule("min", "0")).EditType(EditingType.Numeric).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).Format("{0:C}").Add();
        col.Field("blOct").HeaderText("blOct").EditType(EditingType.Boolean).Width("35").Visible(false).Add();
        col.Field("Oct").HeaderText("Oct").Width("110").ValidationRules(v => v.AddRule("min", "0")).EditType(EditingType.Numeric).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).Format("{0:C}").Add();
        col.Field("blNov").HeaderText("blNov").EditType(EditingType.Boolean).Width("35").Visible(false).Add();
        col.Field("blDic").HeaderText("blDic").EditType(EditingType.Boolean).Width("35").Visible(false).Add();
        col.Field("Dic").HeaderText("Dic").Width("110").ValidationRules(v => v.AddRule("min", "0")).EditType(EditingType.Numeric).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).Format("{0:C}").Add();
    })

Thanks again, regards!


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team October 26, 2017 05:03 PM UTC

Hi Daniel, 

Query #1 :- At the moment of printing... is there any way to also print these colors? 
 
We cannot apply the background color while printing,  cause of the issue is Bootstrap print CSS removes background color. Please refer to the below online link where this query has been discussed.  
  

Query#2 :-I already searched some info to check how to implement the foreign key column 
 
Please refer to the online Demo link and documentation link for foreign key column with editing options enabled. 
 
 
 
Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

 


DA Daniel November 8, 2017 06:44 PM UTC

Hi!

Sorry for the delay, I just apply allo the necessary changes and works fine. There is only one additional problem: How I can make the read function of the Mask Edit work in Dialog template? Without the dialog template (as normal edition) it works, I need the UnstrippedValue.

This is my template for the mask:



This is the filed that use the mask (at the momento of writing it works, but saving did not take the unstripped value):


 
And another additional question, how I can change the value of the edit form title to use another field?



I attached my full view page if helps.

Thanks, regards!


Attachment: Index_d0e4f800.zip

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team November 9, 2017 04:13 PM UTC

Hi Christian, 

Thanks for your patience. 

As per your suggestion, we installed German Windows 10 and Office 2016 and checked your issue but we are unable to reproduce your reported problem “Sum of the Values in the Excelsheet remains Zero” when we bind Freight column as integer. Please refer to the video Demo that we have checked in German Office 2016. 


If you have faced the issue while binding the integer column, we would like to set up a web meeting with you to look into this issue and provide a solution. Could you please let me know your availability for this? Our team will make every effort to have this scheduled on a date and time according to your convenience  

Regards,  
 
Farveen sulthana T  





DA Daniel replied to Farveen Sulthana Thameeztheen Basha November 9, 2017 05:35 PM UTC

Hi Christian, 

Thanks for your patience. 

As per your suggestion, we installed German Windows 10 and Office 2016 and checked your issue but we are unable to reproduce your reported problem “Sum of the Values in the Excelsheet remains Zero” when we bind Freight column as integer. Please refer to the video Demo that we have checked in German Office 2016. 


If you have faced the issue while binding the integer column, we would like to set up a web meeting with you to look into this issue and provide a solution. Could you please let me know your availability for this? Our team will make every effort to have this scheduled on a date and time according to your convenience  

Regards,  
 
Farveen sulthana T  





Hi! I think you were wrong about last post... It's not related to this.

Regards!

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team November 10, 2017 05:25 PM UTC

Hi Daniel,  
  
Please ignore the previous update. 
  
 Query#1:-How I can make the read function of the Mask Edit work in Dialog template? I need the UnstrippedValue. 
 
As per your code example, we cannot place both editForms editTemplate and dialog Template in the same Grid. We have achieved your requirement “place the maskEdit control in dialog Template”  by using ActionComplete event of the Grid. In the ActionComplete event we have rendered the MaskEdit control for the respective column. Please refer to the code example:- 
 
@(Html.EJ().Grid<Object>("FlatGrid") 
            .Datasource((IEnumerable<object>)ViewBag.DataSource) 
            .AllowPaging() 
            .ClientSideEvents(eve => { eve.ActionComplete("complete"); }) 
            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().TitleColumn("CustomerID").EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template"); }) 
             .Columns(col => 
               { 
                   col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Add(); 
                   col.Field("CustomerID").HeaderText("Customer ID").EditType(EditingType.String).Add(); 
                   col.Field("ShipCity").HeaderText("Ship City").EditType(EditingType.Dropdown).Add(); 
 
               })) 
    <script id="template" type="text/template"> 
    <table cellspacing="10"> 
         <tr> 
            <td>Freight</td> 
            <td> 
                <input type="text" id="Freight" name="Freight" value="{{:Freight}}" /> 
            </td> 
         </tr> 
    </table> 
</script> 
       <script> 
             function complete(args) { 
                 $("#EmployeeID").ejNumericTextbox(); 
                 $("#Freight").ejMaskEdit({name: "mask", inputMode: ej.InputMode.Text, maskFormat: "99-999-99999"}); 
                 $("#ShipCity").ejDropDownList(); 
              } 
       </script> 
 
 

Query #2 :- how I can change the value of the edit form title to use another field? 
We have already discussed about “how to customize the Edit form title of the Grid“ in our Syncfusion Knowledge base. For your convenience please find the KB in following link. 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 



DA Daniel November 10, 2017 08:05 PM UTC

Hi!

Thanks for your help, but the example of Query #1 has the same problem as I told. When you edit/add a row in the dialog template, it's fine... but at saving it's not saved with the mask.. I need the value to be saved with the mask.




About the Query #2... it works, thanks for the KB article.

Regards!


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team November 13, 2017 04:39 PM UTC

Hi Daniel, 

We doesn’t achieve your requirement while on saving need to maintain mask edit on dialog template. This scenario can only be achieved by using EditTemplate property of the Grid. 


Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 


DA Daniel November 13, 2017 06:00 PM UTC

Hi!

No problem, I though a workaround and I implemented in the insert and update methods a manually updating value with a string format and substring the value to make it as with the mask.

Thanks! Regards.

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team November 14, 2017 04:36 PM UTC

Hi Daniel, 
  
Thanks for your update. Please get back to us if you need any further assistance. 
  
Regards, 
  
Farveen sulthana T 


Loader.
Up arrow icon