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

[Solved] Inline editing & data binding

26 Answers 745 Views

Grid

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

This question is locked. New answers and comments are not allowed.

26 Answers, 1 is accepted

answered on 10 Feb 2010, 08:26 AM

Hello Tx3,

Unfortunately implementing inline editing is not an easy task and I am afraid there is no simple workaround with the current release.

Still you can try embedding textboxes and dropdowns using the Template of the column. It allows you to specify the contents of the cell during server-side binding (templates do not work with client-side binding).

Regards,
Atanas Korchev
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

answered on 01 Mar 2010, 02:39 PM

hello,

i'm trying to implement a inline editing using drop down extension but i'm getting an error when i try to render the aspx file.

can someone help me

this is the error:

            Line 33:             columns.Add(c => c.id).Visible(false);Line 34:             columns.Add(c =>Line 35:              {Line 36:                 %>Line 37:                 <%= Html.DropDownList(c.idUnidade.ToString(), new SelectList((IEnumerable)ViewData["Unidades"]));%>

this is the code:

                        <div>         
                    <% using (Html.BeginForm())         
                       {%>         
                    <%= Html.Telerik().Grid<SIG.DomainModel.Entities.Ementa>()         
                            .Name("Grid")         
                            .BindTo((IEnumerable<SIG.DomainModel.Entities.Ementa>)ViewData["Ementas"])         
                            .DataKeys(dataKeys => dataKeys.Add(c => c.id))         
                            .Toolbar(commands => commands.Insert())         
                            .DataBinding(dataBinding => dataBinding         
                                //Server binding         
                                .Server()         
                                //Home.Index renders the grid initially         
                                    .Select("Create", "Ementas")         
                                //Home.Insert inserts a new data record         
                                    .Insert("Insert", "Ementas")         
                                //Home.Update updates an existing data record         
                                    .Update("Update", "Ementas")         
                                //Home.Delete deletes an existing data record         
                                    .Delete("Delete", "Ementas")         
                            )         
                     
                    .Columns(columns =>         
                    {         
                        columns.Add(c => c.id).Visible(false);         
                        columns.Add(c =>         
                         {         
                            %>         
                            <%= Html.DropDownList(c.idUnidade.ToString(), new SelectList((IEnumerable)ViewData["Unidades"]));%>         
                            <%         
                        });         
                     
                        columns.Add(c =>         
                         {         
                            %>         
                                <%=Html.Telerik().DatePicker().Name("data")%>         
                            <%         
                        });         
                     
                        columns.Add(c => c.QtdRefDiarias).Title(SIG.App_GlobalResources.GridEmentasCreate.QtdRefeicoes.ToString());         
                     
                        columns.Command(commands =>         
                        {         
                            commands.Edit();         
                            commands.Delete();         
                        });         
                    })         
                    .Pageable()         
                    .Sortable();         
                    %>         
                    <% } %>         
                </div>         

answered on 01 Mar 2010, 03:50 PM

thks atanas,

That was exactly my problem.

Now i'm adding a dropdown list but how can i bound it to my dto property?

i'm trying this :

on controller action

ViewData["Ementas"] = ServiceLocator.Current.GetInstance<IEmentasRepository>().GetAll();

IEnumerable unidades = ServiceLocator.Current.GetInstance<IUnidadesRepository>().GetAll();

ViewData["idunidade"] = new SelectList(unidades, "id", "nome");

on view inside columns:

<%= Html.DropDownList("idUnidade", null, "** Escolha s.f.f. **",new { @class = "DropDown" })%>

can someone post a sample or tell me what i'm doing wrong?

best regards

answered on 01 Mar 2010, 04:52 PM

Hi Marco,

Binding the DropDown should not be a problem - bind it as you would normally do when the dropdown list is outside of the grid.

Setting the value may be a bit difficult. You should use the onRowDataBound client side event to set the dropdown value as shown in this example. The code would be something like this:

function onRowDataBound(e) {
    var row = e.row;
    var dataItem = e.dataItem;

    $('select', row.cells[0 /*or whatever the index of the dropdown column is*/]).val(dataItem.idUnidade);
}

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 01 Mar 2010, 07:47 PM

hi Atanas, first of all thanks a lot for your replies.

unfortunately grid is not calling my js function.

i'm using script registrar on my master page to link my js file and it is being linked, because i'm seeing it on firebug.

but my alert windows is never launched and it is being rendered one item.

another problem that i have is that edit and delete buttons are not being rendered.

could you pleas give a look at the following code block?

contentPage:

                    <div>         
                    <% using (Html.BeginForm())         
                       {%>               
                     <% Html.Telerik().Grid<SIG.DomainModel.Entities.Ementa>()         
                    .Name("Menus")         
                    .BindTo((IEnumerable<SIG.DomainModel.Entities.Ementa>)ViewData["Ementas"])         
                    .DataKeys(dataKeys => dataKeys.Add(c => c.id))         
                    .Toolbar(commands => commands.Insert())         
                    .DataBinding(dataBinding => dataBinding         
                        .Server()         
                           .Select("Create", "Ementas")         
                           .Insert("Insert", "Ementas")         
                           .Update("Save", "Ementas")         
                           .Delete("Delete", "Ementas")         
                    )         
                    .Columns(columns =>         
                    {         
                        columns.Add(c => c.descricao);         
                        columns.Add(c =>         
                         {         
                            %>         
                              <%= Html.DropDownList("idUnidade", null, "** Escolha s.f.f. **", new { disabled = "disabled" })%>         
                            <%         
                        }).Title("unidades");         
                     
                        columns.Command(commands =>         
                        {         
                            commands.Edit();         
                            commands.Delete();         
                        }).Width(180).Title("teste");         
                    })         
                    .ClientEvents(events => events         
                            .OnDataBinding("onRowDataBound")         
                        )         
                    .Pageable()         
                    .Sortable()         
                    .Render();         
                %>         
                    <% } %>         

MasterPage: i'm registering the gridDataBoud js file

    <%

        Html.Telerik().ScriptRegistrar().DefaultGroup(group =>

                    group.Add("~/Scripts/DropDownMenu.js")

                         .Add("~/Scripts/thickbox.js")

                         .Add("~/Scripts/2010.1.218/telerik.common.min.js")

                         .Add("~/Scripts/2010.1.218/telerik.calendar.min.js")

                         .Add("~/Scripts/2010.1.218/telerik.datepicker.min.js")

                         .Add("~/Scripts/Custom/gridDataBound.js")

                ).Globalization(true)

            .Render();

    %>

and the simple js file:

function onRowDataBound(e) {

    alert("test");

    var row = e.row;

    var dataItem = e.dataItem;

    $('select', row.cells[1]).val(dataItem.idUnidade);

}

what i'm trying to do is something like this example:

http://demos.telerik.com/aspnet-mvc-beta/grid/editingserverside

in this demo in edit/insert mode exist a datetimepicker, how can it simple appear... i don't see any code or template column to render the datetimepicker? this is something that is intrinsic to grid control when a data transfer object property have the dateTime Atribute defined?

I also do not understand how you add a new row to the grid when someone click on the button to insert.

I hope you can help me.

Best Regards

answered on 02 Mar 2010, 09:19 AM

Hi Marco,

The onRowDataBound client-side event fires only during client-side databinding. Your grid is configured for server binding thus the event will never fire.

The datepicker is output via the built-in ASP.NET MVC 2.0 templates. In the samples there is a Date.ascx partial view which is used for rendering dates. It is located in \Telerik.Web.Mvc.Examples\Views\Shared\EditorTemplates\Date.ascx.

If you just want to show a dropdown in edit mode you can check the example attached in this forum thread.

Regards,
Atanas Korchev
the Telerik team

answered on 02 Mar 2010, 10:05 AM

helllo Atenas.

Thank you for your reply.

i took a look into the sample that you recommend but i could open the project. i had to open file by file and i don't really understand how this matching is being done.

i don't know if you really understand me. what i need is a full crud grid, i want to have a insert, edit, delete buttons on grid.

and on edit mode i want to see a drop down list for every column that needs and id of another related table, a dateTimePicker for dateTime columns and a int textbox for numbers but here i think that i need to create a custom extension for this.

my problem now is not on rendering controls in specific columns, the problem is how to bind it and how can i make a grid pass from read to edit mode;

how to insert a new row for insert proposes;

how to pass the entire row for controller to be updated or the id to delete.

i also like to create a copy row button, to insert a new record equal to the copied one except the id.

I know this is a lot of questions, but i would really like to use your controls i'm stuck in this problem now!

Can you please give me one sample how to do this.

thanks a lot

best regards

answered on 02 Mar 2010, 10:39 AM

Hello Marco,

The attached project is doing exactly the same thing - showing how to add a dropdown and how to populate it. It is built using Visual Studio 2008 and requires the latest ASP.NET MVC 2.0 RC installed. For more info about ASP.NET MVC 2.0 templates you can check these series of blog posts.

Regards,
Atanas Korchev
the Telerik team

answered on 02 Mar 2010, 12:07 PM

thanks for your reply Atanas,

my apologize for the low level of knowledgement of display templates.ry

i was using mvc1 and you gave me a big help whit this...

but i'm getting an error when trying to use this template:

<%= Html.Telerik().DatePicker()

.Name("").Value(ViewData.TemplateInfo.FormattedModelValue.ToString())

i have also tried using the date? overload but i'm getting always the same error:

"value" cannot be null or empty.

but debugging the FormattedModelValue return a value of "04-07-1996 00:00:00"

i have tried the attribute [UIHint("Name of ascx")] and [DataType(DataType.Date)] and also [DataType(DataType.Date?)]

do you know what could be wrong?

another issue is related to validation. how can i perform a validation like this sample

http://demos.telerik.com/aspnet-mvc-beta/Grid/EditingServerSide/ALFKI?Grid-mode=edit

i'm using the try updatemodel but after i press update error css in not aplyed and the status of grid pass to normal, i mean does't wait on update status?

could you help me accomplish this task?

many thanks Atanas

answered on 02 Mar 2010, 01:41 PM

Hello Marco,

There is a readily built Date.ascx in the provided examples - I've mentioned its location in one of my previous responses. Please use it instead.

Please check the EditableCustomer class which is used in the editing example and see how it is decorated with attributes. Those are required for validation.

Regards,
Atanas Korchev
the Telerik team

answered on 03 Mar 2010, 01:57 PM

Hi Marco,

For the time being to change those buttons you need to modify the source code. Check the Commands folder within Telerik.Web.Mvc\UI\Grid. The JavaScript needs to be modified too if you are using ajax binding.

To implement copy you can use this code:

<%= Html.Telerik().Grid(Model)

.Name("Grid")

.DataKeys(dataKeys => dataKeys.Add(o => o.OrderID))

.Toolbar(toolbar => toolbar.Custom().Text("Copy").Url("javascript:copyRow()"))

.Columns(columns =>

{

columns.Bound(o => o.ShipAddress);

columns.Bound(o => o.ShipCountry).Width(300);

columns.Command(commands => commands.Edit()).Width(200);

})

.DataBinding(dataBinding => dataBinding

.Ajax()

.Select("IndexAjax", "Home")

.Update("UpdateAjax", "Home"))

.Pageable()

.Sortable()

.Filterable()

.Selectable()

%>

<script type="text/javascript">

function copyRow() {

var $grid = $('#Grid');

var grid = $grid.data('tGrid');

var $selectedRow = $('#Grid').find('tr.t-state-selected');

if ($selectedRow.length) {

grid.addRow();

$selectedRow.find('td').each(function(i) {

$grid.find('.t-edit-form tr td')

.eq(i)

.find('input,select')

.val($(this).text());

});

}

</script>

Regards,
Atanas Korchev
the Telerik team

answered on 04 Mar 2010, 08:05 AM

Hi Marco,

I am sorry for misleading you. The addRow function used to be named createRow - please try with that. However have in mind that it will be named addRow in the official release. Here is a quick workaround that will work for both versions:

(grid.addRow || grid.createRow)();

Regards,
Atanas Korchev
the Telerik team

answered on 04 Mar 2010, 03:20 PM

Hello Atanas,

yes thats exactly what i want to do. but thats not what is happening now. now when i select the row and click on copy button the function is called and a row is added to the grid.but that row is empty.

it produces a <tr> whit all empty td.

i have done some debug on this function and the $(this).text() are returning the correct values. so my question is how are this values added to the row that i create previously using (grid.addRow || grid.createRow).apply(grid);

i hope you can understand my doubts..

best regards

answered on 04 Mar 2010, 03:37 PM

mvc2application.zip

Hello Marco,

It works fine on my end. Find attached the sample.

Regards,
Atanas Korchev
the Telerik team

answered on 04 Mar 2010, 03:59 PM

the problem happens because i'm using server binding.

i have changed to ajax biding to be able to use the script that Atanas post here.

i had a template column and on ajax binding you can't use it... so i have to workaround this issue using the format method of column.

so now i use a css class to define my specific button that redirect me to another controller action. it works nice.

Now i have another problem. it's possible to remove columns on edit mode.

take the case of the column that i have to redirect to details of a specific row.

that column have the pk of the corresponding row, and i just want to use it to link to another controller passing the id as parameter. on view mode its great i just see the image link. but when i pass to edit mode i see a text box whit the corresponding id!

what can i do to hide this column on edit mode?

[Solved] Inline editing &amp; data binding

26 Answers, 1 is accepted

[Solved] Inline editing & data binding