[Solved] Edit Issue with Grid in TabStrip

[Ronan]

Hi,

I'm having problems editing a Grid when it's stored in a TabStrip.  I first created the Grids as part of regular pages and they work fine with pop-up editing.  The problem arises when I want to Edit the Grid in a TabStrip - this time the currently selected item in Dropdowns is always the first item and not the actual value.

This is the grid view that I have in ascx file for the TabStrip

<%
    GridEditMode mode = (GridEditMode)ViewData["mode"];
    GridButtonType type = (GridButtonType)ViewData["type"];
%>
<%= Html.Telerik().Grid(Model)
    .Name("ProductsGrid")
    .DataKeys(keys =>
    {
        keys.Add(p => p.ProductID);
    })
    .ToolBar(commands => commands.Insert().ButtonType(type).ImageHtmlAttributes(new { style = "margin-left:0" }))
    .Columns(columns =>
    {
        columns.Bound(o => o.ProductID);
        columns.Bound(o => o.ItemID);
        columns.Bound(o => o.ISBN);
        columns.Bound(o => o.MaterialCode);
        columns.Bound(o => o.MaterialStatus);
        columns.Command(commands =>
        {
            commands.Edit();
            commands.Delete();
        }).Width(200);
    })
    .DataBinding(settings => settings.Ajax()
        .Select("_AjaxSelectProductEditing", "Admin")
        .Insert("_AjaxInsertProductEditing", "Admin")
        .Update("_AjaxSaveProductEditing", "Admin")
        .Delete("_AjaxDeleteProductEditing", "Admin"))
    .Editable(editing => editing.Mode(mode))
    .Pageable()
    .Sortable()
%>

When I have this in an aspx file (where it works) I have the following Javazscript alongside it

<script type="text/javascript">
    function onEdit(e) {
        $(e.form).find('#Component').data('tDropDownList').select(function (dataItem) {
            return dataItem.Value == e.dataItem['Component'];
        });
        $(e.form).find('#Project').data('tDropDownList').select(function (dataItem) {
            return dataItem.Value == e.dataItem['Project'];
        });
        $(e.form).find('#Language').data('tDropDownList').select(function (dataItem) {
            return dataItem.Text == e.dataItem['Language'];
        });
    }
</script>

Putting this in the ascx file has no effect and I've also tried putting it in the parent index.aspx of the Tabstrip but to no avail either.  Is there some change of syntax in the Javascript required when using the Grid within the Tabstrip?

Any help appreciated.....worst case I can revert to using the pages but ideally would like to use the TabStrip and partial views.

Thanks!

[Atanas Korchev]

Hello Ronan,

 Things may not work if the tabs are populated via ajax. If this is the case you need to manually load the required javascript files of any components defined in the partial views (tabs). You can check this help article.

Kind regards,
Atanas Korchev
the Telerik team

[Ronan]

Thanks for the quick reply.

I have this currently in the parent index.aspx of the tabstrips. Is this where I should load the onEdit javascript that I originally posted?

<% Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
       .Add("telerik.common.min.js")
       .Add("telerik.grid.min.js")
       .Add("telerik.grid.editing.min.js")
       .Add("telerik.calendar.min.js")
       .Add("telerik.datepicker.min.js")
       .Add("telerik.grid.filtering.js")
%>

On the other hand, would it be more straightforward for me to use server-side editing with TabStrips?

Thanks,
Ronan

[Atanas Korchev]

Hi Ronan,

 Server side editing would make things worse if you load the tabs on demand as it will post and the selected tab will get lost.

I suggest you try listing the files in the right order:

       .Add("telerik.calendar.min.js")

       .Add("telerik.datepicker.min.js")
       .Add("telerik.grid.min.js")

       .Add("telerik.grid.editing.min.js")

       .Add("telerik.grid.filtering.js")

I also don't see the JavaScript files of the dropdownlist included. Please check the Required JavaScript files help topic for the full list.

Regards,

Atanas Korchev
the Telerik team

[Ronan]

Ok I changed the order round as suggested.  Dropdowns have been displayed ok in the popup window just don't have the correct selected value.  Should I create another js file to add to the list with my OnEdit code included in it?

Ronan