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
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.
Just what I was looking for. Thanks!
ReplyDelete