how to hide particular column when insert new record in kendo grid

Question

hey hi everyone i am try to insert new record using kendo grid.
it's work fine.
but i want to set hide and show.
when its new then hide second column.
only on this row not other all.
here is my code:-

<!DOCTYPE html>
<html>
<head>

  <link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
  <link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
  <script>
   $(document).ready(function () {
        var users = [{ UserId: 1, UserName: "Robin", IsAdmin: true }
            , { UserId: 2, UserName: "Hood", IsAdmin: false }];


        var t = $("#grid").kendoGrid({
            dataSource: { data: users, pageSize: 10 }// binding data
            ,pageable: true
            , selectable: "multiple row"
            , toolbar: ["create"]
            , columns: [
                { field: "UserId" }
                , { field: "UserName"},
                 { command: "destroy", title: " ", width: "100px" }
               ],
               editable: true,
            edit: function(e)
                {   
                        if(e.model.isNew())
                        {
                                   $("td:nth-child(2)").css("display","none");
                        }
                }              
        });
    });
  </script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input type="button" value="Iterate" onclick="iterate()"/>
<div id="grid"></div>


</body>
</html>

please help if is possible when insert new record hide there second td.
thanks.

I do not understand what you are trying to do but one first problem is that you try to use e.model but it is not defined because your DataSource does not define a schema.model. Said that, if what you are trying to get is do not be able of editing a column when it is new, maybe there are other ways of getting it that are not hiding and showing columns. — OnaBai

Jeet Bhatt Jeet Bhatt · Accepted Answer · 2013-07-23T07:20:28

Try this,

Below code set in document.ready

 $(".k-button,.k-button-icontext,.k-grid-add").click(function(){
              var activityGrid = $("#grid").data("kendoGrid");
              activityGrid.hideColumn(1);
 });

Updated Code:

var cnt = 1;
        $(".k-button,.k-button-icontext,.k-grid-add").click(function () {
            cnt = 0;                
        });
        var hideFieldName = "UserName";
        $(".k-textbox").live("focusin", function (e) {
            if (cnt == 0) {
                if ($(this).attr("name") == hideFieldName) {
                    if ($(this).closest('tr').index() == cnt) {

                        $(this).attr("readonly", "readonly");
                    }
                }
            }
        });

So, below code worked as per your requirement. But in this case textbox was generated but user can't enter any value.

Let me know if any issue....

how to hide particular column when insert new record in kendo grid

1 Answers