Grid not refresh when template code is added

[Mahesh]

I have problem when add any new data in grid. Grid is not refresh after adding new  data.
here is the dummy  sample.
 xyz=data;
             var dataSource= new kendo.data.DataSource({
                  data: xyz,        
              schema: {
              model: {
                id: "id",
                fields: {
                    id:{type: "number"},
                   name:{type:"string'},
                   other fields here
                }
            }
          }
      });
            var abc= $("#abc").kendoGrid({
                        dataSource: dataSource,
                        scrollable: false,
                        cache: false,
                        //selectable:true,
                       columns: [{
                                field: "name",
                                title: " Name",
                                template:'#if(name=="pqr"){# <span id="Background"> #=name#</span>#}else{# <span id="Align">#=name# </span>#}#'
                            } ,
             other field here  ,it also have some condition as above
                        ], 
               })

there is one add button , when you click on that, data is added in xyz object.and refresh grid, but here grid is not refresh.[when i remove  template:'#if(name=="pqr"){# <span id="Background"> #=name#</span>#}else{# <span id="Align">#=name# </span>#}#' from grid  it works fine.]
 $(".add").click(function(){
               var getNewData =  {};
                 getNewData .name=document.getElementById("name").innerHTML;
                 xyz.push(getNewData );
                  $("#abc").data("kendoGrid").refresh();       
           })

Please help me
thanks in advance