Author Topic: Multilevel header - Angular directive is not working  (Read 2230 times)

jeeva

  • Newbie
  • *
  • Posts: 29
    • View Profile
Multilevel header - Angular directive is not working
« on: April 11, 2017, 06:09:49 pm »
Dear support,

I have written small keyrestriction with validation in angular directive like

Only - A or B allowed and maxlength - 1

Its working fine in single level column.when come in multilevel level columns(consider 4 level).Its not working.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Multilevel header - Angular directive is not working
« Reply #1 on: April 11, 2017, 06:17:39 pm »
Validations should be added in lowest level columns i.e., the columns which don't have further children.

jeeva

  • Newbie
  • *
  • Posts: 29
    • View Profile
Re: Multilevel header - Angular directive is not working
« Reply #2 on: April 12, 2017, 12:29:31 pm »
Thank you for your support.

I have also applied the least children,

Single level:
{ title:function(ui){
      dataType: "string",width: "3%",align: "center",cls:"mandatoryHdrBkgrnd", dataIndx: "inout",editable: function(ui){
      return editableCheck(ui);
   },render :function(ui){
      return handleCellOnCondition(ui);
   },      
   filter: {
      type: 'textbox',
      condition: 'contain',
      listeners: ['keyup']
   } ,editorTemplate: "<allow-values type='alphabetsAB' keyrestrict='1' />"},

Mulitilevel :
{ title: function(ui){
      return doTranslateHeader("first1");
      }, width: "3%", dataType: "string",cls:"optionalHdrBkgrnd", align: "center", editable: function(ui){
      return editableCheck(ui);
   },colModel:[
   { title: function(ui){
      return doTranslateHeader("delivery");
      }, width: "8%", dataType: "string",cls:"optionalHdrBkgrnd", align: "center", editable: function(ui){
      return editableCheck(ui);
   }, colModel:[
   { title: function(ui){
      return doTranslateHeader("time");
      }, width: "5%", dataType: "string",cls:"optionalHdrBkgrnd", align: "center", dataIndx: "deliveryTime1_first_1_deliveryTime",editable: function(ui){
      return editableCheck(ui);
   },filter: {
      type: 'textbox',
      condition: 'contain',
      listeners: ['keyup']
   },editorTemplate: "<allow-values type='alphabetsAB' keyrestrict='1' />"}]
   },
   { title: function(ui){
      return doTranslateHeader("pickUp");
      }, width: "3%", dataType: "string",cls:"optionalHdrBkgrnd", align: "center", editable: function(ui){
      return editableCheck(ui);
   }, colModel: [
   { title: function(ui){
      return doTranslateHeader("dayN");
      },width: "5%", dataType: "string",cls:"optionalHdrBkgrnd", align: "center", dataIndx: "deliveryTime1_first_1_pickUpDayN",editable: function(ui){
      return editableCheck(ui);
   },filter: {
      type: 'textbox',
      condition: 'contain',
      listeners: ['keyup']
   },editorTemplate: "<allow-values type='alphabetsAB' keyrestrict='1' />",validations: [
   //validation   
      { type: 'minLen', value: '', cls:'error-required',warn: true },
      //warning   
      { type: 'minLen', value: '2', msg: 'Better more than 5 chars',cls:'error', warn: true },
   ]},
   { title: function(ui){
      return doTranslateHeader("time");
      }, width: "3%", dataType: "string",cls:"optionalHdrBkgrnd", align: "center", dataIndx: "deliveryTime1_first_1_pickUpTime ",editable: function(ui){
   return editableCheck(ui);
   },filter: {
      type: 'textbox',
      condition: 'contain',
      listeners: ['keyup']
   }, editor: { type: "textbox"}}
   ] }   
   ]
   },

/*********************************
*  Directive for validation starts
**********************************/
function NumbericDirective(){
    return{       
        restrict: 'AE',       
        link: function($scope, $ele, attr){
            //var dataLen = attr.keyrestrict;
            var type = attr.type;
            if(type == 'alphabetsOnly'){
                checkField($scope,attr,"^[a-zA-Z]+$");
            }
            else if(type == 'alphabetsAB'){
                checkField($scope,attr,"^[a-bA-B]+$");
            }
            else if(type == 'allCharacters'){
                allCharacter($scope,attr);
            }
        }       
    }
    /*****************************
    *Checks for regular expression
    ******************************/
    function checkField(scope,attr,regexp){
        scope.editor = {
                type: 'textbox',
                attr:'maxlength = '+attr.keyrestrict,
                init: function(ui){
                    var $inp = ui.$cell.find("input");
                    //$inp.replace(/[^0-9]/g, '');
                    $inp.on('keypress',function(event){
                        //console.log($inp.val().length);
                        /*if($inp.val().length >= 4){
                            console.log(evt);
                        }*/
                    var regex = new RegExp(regexp);
                    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
                    if (!regex.test(key)) {
                        if(event.which != 8 || event.keyCode != 8){
                            event.preventDefault();
                            return false;
                        }
                    }

                    });
                }
        }
    }
   
    /*******************************
    *Accept all character start here
    ********************************/
    function allCharacter(scope,attr){
         scope.editor = {
            type: 'textbox',
            attr:'maxlength = '+attr.keyrestrict,
         }
    }
}