How to display Grid items

I am using kendo Grid for 4 years , and i find the built-in edit template the best to show edit form.

@(Html.Kendo().Grid ()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Id).Title("Id").Visible(false);
columns.Bound(c => c.Name).Title("Name").Width(150);
columns.Bound(c => c.DOB).Title("DOB").Width(150).Filterable(false);
columns.Bound(c => c.Salary).Title("Salary").Width(150).Filterable(false);
columns.Bound(c => c.Gender).Title("Gender").Width(150).Filterable(false);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
}).HtmlAttributes(new { style = "height: 550px;" })
.ToolBar(toolbar => toolbar.Create())
.Scrollable()
.Groupable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.AccountId))
.PageSize(5)
.Read(read => read.Action("GetAll", "Home"))
)
.Resizable(resize => resize
.Columns(true)
)
.ToolBar(toolbar =>
{
toolbar.Custom().Name("newAdd").Text("+ Add Account ").Url("#").HtmlAttributes(new { id = "newAdd" });
})
.Pageable(pageable =>
{
pageable.Refresh(true);
pageable.PageSizes(true);
})
)
function editDetails(e) {
debugger
e.preventDefault();
var wnd = $("#EditDetails").data("kendoWindow");
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
document.getElementById("txtid").value = dataItem.AccountId
document.getElementById("txtName").value = dataItem.AccountName
..... other columns
$("#btnUpdate").kendoButton({}).data("kendoButton").enable(true);
wnd.open().element.closest(".k-window").css({
top: 125,
left: 350
});
}
class="col-md-12">
@(Html.Kendo().Window().Name("EditDetails")
.Title("Update Account")
.Visible(false)
.Modal(true)
.Events(events => events.Refresh("refresh"))
.Content(@
"width:100%;" id="fieldlist">
@*@Html.Partial("_partialUpdateRole")*@
@*@(Html.LabelFor(m=>m.)*@
"Updateform">
"update-container" >
@Html.Hidden("txtid")
"width:100%">
Name :
@(Html.Kendo().TextBox()
.Name("txtAName1")
.HtmlAttributes(new { placeholder = "Enter AccountName", required = "required", validationmessage = "Enter AccountName", maxlength = "50", @class = "col-sm-2 form-control", style = "width: 100%", })
)
"height:10px">
OtherColumn:
@(Html.Kendo().TextBox()
.Name("txtOtherColumn")
.HtmlAttributes(new { placeholder = "Enter something", required = "required", validationmessage = "Enter WebsiteUrl", maxlength = "50", @class = "col-sm-2 form-control", style = "width: 100%", })
)
"width:55%;margin-top:20px;">
"right">
@(Html.Kendo().Button()
.Name("btnUpdate")
.Content("Update")
.HtmlAttributes(new { type = "button", @class = "k-button k-primary", style = "height:35px;width:70px;" })
.Events(e => e.Click("btnUpdate_Click"))
)
@(Html.Kendo().Button()
.Name("btnUReset")
.Content("Reset")
.HtmlAttributes(new { type = "button", @class = "k-button k-primary", style = "height:35px;width:70px;" })
.Events(e => e.Click("btnUReset_Click"))
)

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
I am using kendo Grid for 4 years , and i find the built-in edit template the best to show edit form.
@(Html.Kendo().Grid ()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(c => c.Id).Title("Id").Visible(false);
                columns.Bound(c => c.Name).Title("Name").Width(150);
                columns.Bound(c => c.DOB).Title("DOB").Width(150).Filterable(false);
                columns.Bound(c => c.Salary).Title("Salary").Width(150).Filterable(false);
                columns.Bound(c => c.Gender).Title("Gender").Width(150).Filterable(false);
                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
            }).HtmlAttributes(new { style = "height: 550px;" })
                 .ToolBar(toolbar => toolbar.Create())
        .Scrollable()
        .Groupable()
        .Sortable()

            .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.AccountId))
            .PageSize(5)

                                    .Read(read => read.Action("GetAll", "Home"))

            )
             .Resizable(resize => resize
             .Columns(true)
          )

           .ToolBar(toolbar =>
            {
                toolbar.Custom().Name("newAdd").Text("+ Add Account ").Url("#").HtmlAttributes(new { id = "newAdd" });

            })
            .Pageable(pageable =>
            {
                pageable.Refresh(true);
                pageable.PageSizes(true);
            })
    )
function editDetails(e) {
        debugger
        e.preventDefault();
        var wnd = $("#EditDetails").data("kendoWindow");
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        document.getElementById("txtid").value = dataItem.AccountId
        document.getElementById("txtName").value = dataItem.AccountName
       ..... other columns

        $("#btnUpdate").kendoButton({}).data("kendoButton").enable(true);

        wnd.open().element.closest(".k-window").css({
            top: 125,
            left: 350

        });
    }
class="col-md-12">
    @(Html.Kendo().Window().Name("EditDetails")
        .Title("Update Account")
        .Visible(false)
        .Modal(true)
        .Events(events => events.Refresh("refresh"))
        .Content(@
            "width:100%;" id="fieldlist">
                @*@Html.Partial("_partialUpdateRole")*@
                @*@(Html.LabelFor(m=>m.)*@
                "Updateform">
                    "update-container" >
                        @Html.Hidden("txtid")
                        "width:100%">



                                    Name :


                                    @(Html.Kendo().TextBox()
                     .Name("txtAName1")
                             .HtmlAttributes(new { placeholder = "Enter AccountName", required = "required", validationmessage = "Enter AccountName", maxlength = "50", @class = "col-sm-2 form-control", style = "width: 100%", })
                                    )


                            "height:10px">

                                OtherColumn:

                                    @(Html.Kendo().TextBox()
                     .Name("txtOtherColumn")
                             .HtmlAttributes(new { placeholder = "Enter something", required = "required", validationmessage = "Enter WebsiteUrl", maxlength = "50", @class = "col-sm-2 form-control", style = "width: 100%", })
                                    )





                        "width:55%;margin-top:20px;">
                            "right">

                                    @(Html.Kendo().Button()
                    .Name("btnUpdate")
                    .Content("Update")
                                    .HtmlAttributes(new { type = "button", @class = "k-button k-primary", style = "height:35px;width:70px;" })
                    .Events(e => e.Click("btnUpdate_Click"))
                                    )
                                    @(Html.Kendo().Button()
                    .Name("btnUReset")
                    .Content("Reset")
                                    .HtmlAttributes(new { type = "button", @class = "k-button k-primary", style = "height:35px;width:70px;" })
                    .Events(e => e.Click("btnUReset_Click"))
                                    )