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

Requird Javascript for Client Edit Templates sample?

7 Answers 134 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.
JULIA
Top achievements
Rank 1
JULIA asked on 06 Oct 2010, 12:43 PM
Hello,

is this code required for Client Edit Templates ( http://demos.telerik.com/aspnet-mvc/grid/clientedittemplates )?
My test works fine without this code.

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

Regards,
Timo

7 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 06 Oct 2010, 01:06 PM
Hello Timo,

If you need to select correct item in the DropDownList UI component, then you need to use this javascript code.

Regards,
Georgi Krustev
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
0
JULIA
Top achievements
Rank 1
answered on 06 Oct 2010, 01:14 PM

Hello,

this is strange.
i have modified your sample and it seems that it works.
where is the difference?

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
   <%= Html.Telerik().Grid<ClientEditableOrder>()
           .Name("Grid")
           .DataKeys(keys =>
           {
               keys.Add(o => o.OrderID);
           })
           .DataBinding(dataBinding =>
           {
               dataBinding.Ajax()
                   .Select("_ClientEditTemplate", "Grid")
                   .Update("_UpdateOrder", "Grid");
           })
           .Columns(columns =>
           {
               columns.Bound(o => o.OrderID).Width(100);
               columns.Bound(o => o.Employee).Width(230);
               columns.Bound(o => o.OrderDate).Width(150);
               columns.Bound(o => o.Freight).Width(220);
               columns.Command(commands => commands.Edit()).Title("Edit").Width(200);
           })
           .ClientEvents(events=>events.OnEdit("onEdit"))
           .Pageable()
    %>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
    function onEdit(e) {
    }
</script>
</asp:Content>

Regards,
Timo
0
Georgi Krustev
Telerik team
answered on 07 Oct 2010, 11:56 AM
Hello Timo,

In Q2 SP1 of Telerik Components for ASP.NET MVC (version 2010.2.930) the code in OnEdit event handler is not required anymore in order to set correct selected item. Some improvements were made, which remove the need of this code.

Sincerely yours,
Georgi Krustev
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
0
Steve
Top achievements
Rank 1
answered on 17 Oct 2010, 08:24 PM
Hi,

  I just tried this new release, but it does not seems to work when I remove onEdit event.  I'm using a DropDownList in a subGrid (Hierarchical grid) and on Edt, the selected item is not selected.

Here is the code on my bound column
columns.Bound(u => u.Role).Width(100).
    ClientTemplate("<# if (Role) { #><#= Role.RoleName#> <#} else { #> none <# } #>");

Here is the code for EditorTemplate
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IRoleSimple>" %>
  
<%= Html.DropDownList(null, new SelectList((IEnumerable)ViewData["RolesUsers"], "RoleId", "RoleName"))%>
<script type="text/javascript">
    // find the dropdown first
    var $dropdown = $('#Role');
    $('<option/>', { text: '<none>', value: -1 })
          .prependTo($dropdown);
    // find the table row (tr) which is being edited
    var $tr = $dropdown.closest('tr:has(form)');
  
    // get the grid client object
    var grid = $tr.closest('.t-grid').data('tGrid');
  
    // get the data item bound to this table row
    var dataItem = grid.dataItem($tr);
    // set the value of the dropdown to select the proper item
    $dropdown.val(dataItem.Role ? dataItem.Role.RoleId : -1);
</script>

Here is my Model class
[TypeConverter(typeof(UserConverter))]
public class RoleSimple : IRoleSimple
{
    public Guid RoleId { get; set; }
    public string RoleName { get; set; }
    public override string ToString()
    {
        return RoleName;
    }
}
[TypeConverter(typeof(UserConverter))]
public class UserConverter : TypeConverter
{
    public override bool CanConvertFrom(ITypeDescriptorContext context, Type sourceType)
    {
        return (sourceType == typeof(string)) ? true : base.CanConvertFrom(context, sourceType);
    }
}

I have a null reference exception in OnEdit for that line.
$(e.form).find('#Role') return an object, but
$(e.form).find('#Role').data('tDropDownList')
return null

$(e.form).find('#Role').data('tDropDownList')


Thank you
0
Victor
Top achievements
Rank 1
answered on 15 Dec 2010, 04:40 AM
Hi,
I'm facing the same issue as "returning 'null' in the 

$(e.form).find('#Roles').data('tDropDownList')

I included the "telerik.list.min.js" by my own.
I've also tried the hotfix (v 2010.3.1111), unfortunately the problem is still there.
Anybody got new idea? Thanks in advance.
0
Victor
Top achievements
Rank 1
answered on 15 Dec 2010, 08:12 AM
Just downloaded the latest version 2010.3.1110 in OFFICIAL download page (NOT 2010.3.1111 attached in the other forum post), and included those js files manually via ScriptRegistrar in Site.Master, and it works fine now:

<%= Html.Telerik().ScriptRegistrar()
                .DefaultGroup(group => group.DefaultPath("~/Scripts/2010.3.1110/")
                                            .Add("jquery-1.4.3.min.js")
                                                  ......
                                            .Add("telerik.list.min.js")
                                                  ......
                                              .Compress(true))
 %>

0
Steve
Top achievements
Rank 1
answered on 17 Dec 2010, 08:32 PM
I don't know if it can help, but here is my OnEdit code

function OnEdit(e) {
    var $dropdown = $(e.form).find('#Role');
    $('<option/>', { text: '<none>', value: -1 })
  .prependTo($dropdown);
    $dropdown.val(e.dataItem.Role.RoleId);
}

Hope this help
Steve
Tags
Grid
Asked by
JULIA
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
JULIA
Top achievements
Rank 1
Steve
Top achievements
Rank 1
Victor
Top achievements
Rank 1
Share this question
or