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

How to Reuse Editor for other columns with different name

10 Answers 382 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Nigel
Top achievements
Rank 1
Nigel asked on 10 Apr 2017, 02:42 AM

I'm creating a custom Editor for TEXT AREA for my Kendo Grid. The grid will have in-line editing.

I was wondering if I could reuse the same editor for other columns as well ?

Code:

<%@ Control Language="C#" %> <textarea id="Description" name="Description" class="k-textbox"></textarea>

 

For example the above code can bind to column Description but what if I want to use it for another column such as Address ?

How to do it ?

10 Answers, 1 is accepted

Sort by
0
Nigel
Top achievements
Rank 1
answered on 10 Apr 2017, 02:46 AM
fyi I'm using DevCraft Ultimate .
0
Nigel
Top achievements
Rank 1
answered on 11 Apr 2017, 04:46 AM
Anybody ?
0
Boyan Dimitrov
Telerik team
answered on 12 Apr 2017, 06:21 AM

Hello,

Indeed an editor can be reused for more than one column. I prepared a sample  http://dojo.telerik.com/ilOsE example that shows how to define a text area editor for the ProductName column using the columns.editor option. In the function handler there is nothing specific for the ProductName, so it can be used for any string column. 

Regards,
Boyan Dimitrov
Telerik by Progress
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
Nigel
Top achievements
Rank 1
answered on 12 Apr 2017, 06:34 AM

Hi,

Can you give an example using ASP.Net MVC ?

0
Boyan Dimitrov
Telerik team
answered on 13 Apr 2017, 02:27 PM

Hello,

Please refer to the code below: 

@(Html.Kendo().Grid<KendoGridAjaxEditing.Models.ProductViewModel>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(product => product.ProductID).Width(100);
          columns.Bound(product => product.ProductName).EditorTemplateName("TextAreaTemplate");
          columns.Bound(product => product.UnitsInStock).Width(250);
          columns.Command(commands =>
          {
              commands.Edit(); // The "edit" command will edit and update data items
              commands.Destroy(); // The "destroy" command removes data items
          }).Title("Commands").Width(200);
      })
      .ToolBar(toolbar => toolbar.Create()) // The "create" command adds new data items
      .Editable(editable => editable.Mode(GridEditMode.InLine)) // Use inline editing mode
      .DataSource(dataSource =>
          dataSource.Ajax()
            .Model(model =>
            {
                model.Id(product => product.ProductID); // Specify the property which is the unique identifier of the model
                model.Field(product => product.ProductID).Editable(false); // Make the ProductID property not editable
            })
            .Create(create => create.Action("Products_Create", "Home")) // Action invoked when the user saves a new data item
            .Read(read => read.Action("Products_Read", "Home"))  // Action invoked when the grid needs data
            .Update(update => update.Action("Products_Update", "Home"))  // Action invoked when the user saves an updated data item
            .Destroy(destroy => destroy.Action("Products_Destroy", "Home")) // Action invoked when the user removes a data item
      )
      .Pageable()
        )

Editor template: 

@model object
 
@Html.TextAreaFor(model => model)

The template view should be placed in the  ~/Views/Shared/EditorTemplates folder. For more information please refer to Editor Templates article. 

Regards,
Boyan Dimitrov
Telerik by Progress
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
Nigel
Top achievements
Rank 1
answered on 17 Apr 2017, 11:24 PM
Thanks Boyan, I will try and get back to you.
0
Nigel
Top achievements
Rank 1
answered on 18 Apr 2017, 01:37 AM

Hi I'm using a file upload editor.

Here's the code:

<%@ Control Language="C#" >
 
  <%: Html.Kendo().Upload()
            .Name("Image")
            .Multiple(false)
            .Validation(validation => validation.AllowedExtensions(new string[] { ".gif", ".jpg", ".png", ".jpeg", ".bmp" }))
            .HtmlAttributes(new { accept = "image/*" })          
  %>

 

How to implement it here?

0
Boyan Dimitrov
Telerik team
answered on 19 Apr 2017, 12:39 PM

Hello Nigel,

I am not sure that I completely understand what you are trying to achieve. Uploading a file with the Kendo UI Upload widget should update the model field with the file name or something else? 

Regards,
Boyan Dimitrov
Telerik by Progress
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
Nigel
Top achievements
Rank 1
answered on 19 Apr 2017, 11:42 PM

Hi Boyan,

I'm using in-line editing mode and I want to change a URL column in the grid to a file upload control when I click edit.

The file upload control should have the name and id of the model property.

I managed to do it for a specific column name but I wanted to use the editor for other grid where column name is different.

0
Boyan Dimitrov
Telerik team
answered on 21 Apr 2017, 01:11 PM

Hello,

The Kendo Upload for ASP.NET MVC does not have view helper For (as @(Html.Kendo().ComboBoxFor)  so individual editor template should be defined for specific column (with Name for the column). 

Regards,
Boyan Dimitrov
Telerik by Progress
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.
Tags
Editor
Asked by
Nigel
Top achievements
Rank 1
Answers by
Nigel
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or