Column size print, search the grid for date

[Ryan]

Hello Syncfusion Support.

I have some doubts about the width of the columns when printing, and I would like to know how to search for date, in the search bar, attached images to understand my doubt

[Ryan]

??

[Balaji Sekar]

Hi Ryan, 

  

Query #1: how to search for date, in the search bar, 

  

We have already discussed about date type column search option in Knowledge base and we shared link as below, 

  

KB: https://www.syncfusion.com/kb/11251/how-to-perform-searching-in-date-type-column 

  

Query #2: We cannot see all columns in Print while use large number of columns 

  

By default, the browser uses A4 as page size option to print pages and to adapt the size of the page the browser print preview will auto-hide the overflowed contents. 

  

To show large number of columns when printing, adjust the scale option from print option panel based on your content size. 

  

For more information we shared documentation link to about large number of column printing. 

  

Help Documentation: https://ej2.syncfusion.com/vue/documentation/grid/print/#print-large-number-of-columns 

  

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

  

Regards, 

Balaji Sekar 

[Ryan]

I'm not able to implement the search example for Vue.js

[Balaji Sekar]

Hi Ryan, 

 

Thanks for your patience. 

 

Based on your query we have created a sample with date column search option in the DataGrid component. In below code example, we can search the date value in MM/dd/yyyy format using regex option so, you can customize the regex as you need date format. 

 

Please refer the below code example, sample and screenshot for more information. 

 

[App.Vue] 

load: function () { 

      this.$refs.grid.$el.addEventListener("keyup", (args) => { 

        if ( 

          args.target.getAttribute("id") === "toolSearch" && 

          args.key === "Enter" 

        ) { 

          debugger; 

          let gridObj = this.$refs.grid.$el.ej2_instances[0]; 

 

          var regex = /^(([012]\d)|3[01])\/((0\d)|(1[012]))\/\d{4}$/; // check the search value is date format 

 

          let input = args.target; 

          if (regex.test(input.value)) { 

            debugger; 

            var count = 0; 

            var predicates; 

 

            var dateSplit = input.value.split("/"); 

            var dateVal = new Date( 

              parseInt(dateSplit[2], 10), 

              parseInt(dateSplit[0], 10) - 1, 

              parseInt(dateSplit[1], 10) 

            ); 

            while (count < gridObj.columns.length) { 

              var col = gridObj.columns[count]; 

              if (col.type === "date") { 

                predicates = 

                  predicates === undefined 

                    ? new Predicate(col.field, "contains", dateVal) 

                    : predicates.or(col.field, "contains", dateVal); 

              } 

              count++; 

            } 

 

            new DataManager({ json: gridObj.dataSource }) 

              .executeQuery(new Query().where(predicates)) 

              .then((e) => { 

                gridObj.dataSource = e.result; 

              }); 

          } else if (input.value === "") { 

            if (gridObj.searchSettings.key === "") { 

              var data = gridData; 

 

              gridObj.dataSource = DataUtil.parse.parseJson(data); 

            } else { 

              gridObj.search(""); 

            } 

          } else { 

            gridObj.search(input.value); 

          } 

        } 

      }); 

    }, 

 

 

Sample link: https://codesandbox.io/s/vue-template-forked-ihix9 

 

Screenshot:  

 

 

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

 

Regards, 

Balaji Sekar