MVC Grid customize

[Patrick]

Hi, I am trying to customize my mvc grid, here is the image https://ufile.io/6c1xf

1. No header, the columns.bound to customize instead of c.name

2. How to put edit and delete into 1 column?

3. How to call javascipt in string not integer?

 

@(Html.Kendo().Grid<iOneDistribution.Web.Models.Users.UserViewModel>()
      .Name("grid")
      .Columns(columns =>
      {

           //1. header must be able to customize.

           //3.  it doesn't call the datagrid as this must be in string not integer
           columns.Bound(c =>
             c.Name).ClientTemplate(
                      "<a style='cursor:pointer' onclick='getEditView('#=UserCode#');' " +
            ">EDIT</a>").Width("90");

         //  2. it is in the other column, i want to put into 1 column with the edit

         columns.Command(command =>
          {
              command.Destroy().Text(" ");
          }).Width(100);
          columns.Bound(c => c.Name);
          columns.Bound(c => c.Email);
          columns.Bound(c => c.MobilePhone);
          columns.Bound(c => c.OfficePhone);
          columns.Bound(c => c.HomePhone);
          columns.Bound(c => c.UserPosition);
          columns.Bound(c => c.IsSalesPerson);
          columns.Bound(c => c.IsPurchaser);
          columns.Bound(c => c.IsActive);
          columns.Bound(c => c.IsAllowApprove);
          columns.Bound(c => c.DefaultCulture);
      })
      .Pageable()
      .Sortable()
      .Filterable()
      .Scrollable()
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(20)
          .Model(model => model.Id(u => u.UserCode))
          .Read(read => read.Action("Users_Read", "Users"))
          .Destroy(update => update.Action("Destroy", "Users"))
      )
)

<script type="text/javascript">
    function getEditView(id) {
        alert(id);
        $.post("@Url.Action("ShowEdit", "Users")", {id: id}, function(data) {
            if (data) {
                $('#EditDiv').append(data);
            }
        });
    }
</script>

[Patrick]

3. How to call javascript in string not integer?

I got the answer from this post http://www.telerik.com/forums/templates-7f1d514aa40d, in order for a javascript to call string instead of integer, code must use \". here is my code below

 columns.Bound(c =>
             c.Name).ClientTemplate(
                      "<a style='cursor:pointer' onclick='getEditView(\"#=UserCode#\");' >EDIT</a>").Width("90");

 

[Stefan]

Hello, Patrick,

Regarding the remaining questions 1 and 2:

1) The title property can be used to change the text in the column header. For the customization, the header template can be used

http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridColumnBuilderBase#methods-Title(System.String)

http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridColumnBuilderBase#methods-HeaderTemplate(System.Action)

2) The command column can receive multiple values. The following line will add an edit and a delete button:

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Patrick]

Thank you Stefan, 

1. No header, the columns.bound to customize, instead of c.name

2.. How to put edit and delete into 1 column?

 

I change the code instead of using bound I use the code below:

it solve the item 1 not to have a header and putting into the 2 commands into 1 column.

 columns.Command(c =>
        {
            c.Custom("EDIT").Click("getEditView");
            c.Destroy().Text("DELETE");
        }
        ).Width(100);

 

May I know how to image or css instead of EDIT and DELETE text?

[Stefan]

Hello, Patrick,

This can be achieved using the iconClass and the className properties which will allow modifying the buttons:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.command.iconClass

MVC:

http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridActionCommandBuilderBase#methods-IconClass(System.String)

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.command.className

MVC:

http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridActionCommandBuilderBase#methods-HtmlAttributes(System.Collections.Generic.IDictionary

Regards,
Stefan
Progress Telerik