Column size print, search the grid for date

Question

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

Balaji Sekar · Accepted Answer

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

Ryan · Answer

??

Balaji Sekar · Answer

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 · Answer

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