Kendo Grid Popup Editing Mode

In this article am going to explain about

1.      How to make kendo grid editable.

2.      How to give a title to popup.

3.      How to disable editing specified columns in edit popup mode.

4.      How to disable the display of few unwanted columns in popup.

5.      How to specify the width of a column in popup.

6.      How to rename the column.

Technology Used: Kendo UI

Scripting Language: JavaScript

What is Kendo UI

Kendo UI is a HTML5 and Jquery framework which is used to develop modern web apps.

A kendo grid is more powerful and easy when compared to an asp grid. In kendo grid all the controls are user friendly. A kendo grid has three kinds of edit modes. They are:-

      a.       Inline editing

      b.      Popup editing and

      c.       Incell editing.

Here am going to explain kendo grid popup editing.

     1.      How to Make Kendo Grid Editable

In order to make a kendo grid editable we need to specify that the grid is editable.

It is declared as follows

.Editable(editable =>

            {

                editable.Mode(GridEditMode.PopUp);               

            })

.Editable is the field which makes the kendo grid in editable mode.

The “GridEditMode” defines the mode in which we desire to edit the grid.

.PopUp defines that the grid is editable in popup mode.

      2.      How to Give A Title to Popup

Now if we want to give a title to the popup we can give our own title. Giving a title to the popup is as follows

.Window(w => w.Title("My Project"));

This specifies the title of the popup window. This title is also mentioned at .Editable field only. The code is as follows

.Editable(editable =>

            {

                              editable.Mode(GridEditMode.PopUp).Window(w => w.Title("My Project"));          

            })

      3.      How to Disable Editing Specified Columns In Edit Popup Mode

In general when we don’t want a column to be editable in a kendo grid we specify that particular column as editable false. i.e.,

.Model(model =>

    {

        model.Field(p => p.ColumnName).Editable(false);

    })

When we write like this that particular column is not editable.

But in edit popup mode the above mentioned code will not work and the column can be edited. In order to avoid this we need to write an event to the grid.

.Events(e =>

        {

            e.Edit("EditGrid");

        })

In the above mentioned edit function we will write the code about disabling the edit functionality

<script type="text/javascript">

function EditTelecallerGrid(e) {

                if (!e.model.isNew()) {

                    $('#ColumnName').attr('readonly', 'readonly');

}

}

</script>

Now the above mentioned column is a non-editable field.

      4.      How to Disable The Display of Few Unwanted Columns In Popup

In order to disable a specified column we generally don’t mention its name in the columns field. But in when we are editing the grid in popup mode all the columns are displayed in the popup field. This is not preferable because displaying unwanted columns is not necessary. So we should not display the unwanted columns in the popup screen. This code is also written in the grid edit function. The code to do this is as follows

<script type="text/javascript">

function EditTelecallerGrid(e)

{

if(!e.model.isNew())

{

e.container.find('#ColumnName').closest(".editor-label").prev().andSelf().remove();

e.container.find('#ColumnName').closest(".editor-field").prev().andSelf().remove();

}

}

</script>

      5.      How to Specify The Width of A Column In Popup

In General when we are declaring the columns we will mention the width of a column. But in Kendo popup this won’t work. We have to write a separate code in grid edit function. The code is as follows

<script type="text/javascript">

function EditTelecallerGrid(e)

{

if (!e.model.isNew())

{

$('#ColumnName').width(185);

}

}

</script>

      6.      How to Rename The Column

Generally we give a new name to the column when we bind it to a grid. This is given at the time of declaring the columns. In order to rename a column name we will write as

columns.Bound(p => p.ColumnName).Title("NewName");

But when we open the grid in popup mode the column names are not changed and instead they display the column name given in the table or the stored procedure. Here we write a separate code in edit function of the grid. The code is as follows

<script type="text/javascript">

function EditTelecallerGrid(e)

{

if (!e.model.isNew())

{

var test1 = e.container.find('#ColumnName').closest(".editor-field").prev();

            for (var n = 0; n < test1.length; n++)

{

                        var lab1 = test1[n];

                     lab1.innerText = "NewColumnName";

       }

}

}

</script>

This will rename the column in the kendo grid popup.