This is a migrated thread and some comments may be shown as answers.

MVC Grid customize

4 Answers 53 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Patrick
Top achievements
Rank 1
Patrick asked on 25 Sep 2017, 09:25 AM

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>

4 Answers, 1 is accepted

Sort by
0
Patrick
Top achievements
Rank 1
answered on 25 Sep 2017, 11:01 AM

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");

 

0
Stefan
Telerik team
answered on 27 Sep 2017, 06:44 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Patrick
Top achievements
Rank 1
answered on 27 Sep 2017, 07:35 AM

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?

0
Stefan
Telerik team
answered on 29 Sep 2017, 06:00 AM
Tags
Grid
Asked by
Patrick
Top achievements
Rank 1
Answers by
Patrick
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or