[Solved] clajax databinding client editing

[Domagoj]

Hi

i have a grid with ajaxdatabinding and clientrow template
i would like to edit a row on first click how to nanage this?
tia DOm

[Atanas Korchev]

Hi Domagoj,

 Unfortunately I couldn't understand what your question is. Could you please clarify? What is the current grid declaration and what is the desired outcome?

Regards,
Atanas Korchev
the Telerik team

[Domagoj]

my code
i wouild like my edit popup to show when i click on the row

@(  Html.Telerik().Grid(Model).Name("Grid")
    .Localizable("de-DE")
    .Columns(columns =>
    {
        columns.Bound(o => o.OrderDate).Width(200).Format("dd.MM.yy HH:mm");
        columns.Bound(o => o.ArtId).Width(200);
        columns.Bound(o => o.Amount).Aggregate(agr => agr.Sum()).ClientGroupFooterTemplate("Anz Artikel: <#= Sum #>");
        columns.Bound(o => o.OrderId).Visible(false).Aggregate(agr => agr.Count()).ClientFooterTemplate("Anz Bestellugen: <#= Count #>");
        columns.Command(cmds =>
        {
            //cmds.Edit().ButtonType(GridButtonType.BareImage);
            //cmds.Delete().ButtonType(GridButtonType.Image);
            cmds.Edit().ButtonType(GridButtonType.BareImage);
        });
    })
        .DataKeys(keys => keys.Add(c => c.ID))
        .Groupable(grouping => grouping.Groups(groups =>
        {
            groups.Add(o => o.OrderId);
        }).Visible(false))
        .Pageable()
        .Footer(true)
        .Sortable()
        .Filterable()
        .Selectable()
        .ColumnContextMenu()
        .NoRecordsTemplate(@<div>Keine Daten gefunden</div>)
        .Editable(editing => editing.Mode(GridEditMode.PopUp).TemplateName("OrderEntryModel"))
        .ClientEvents( ce => ce.OnRowSelected("onRowSelected") )
        .DataBinding(db => db.Ajax()
            .OperationMode(GridOperationMode.Client)
            .Select("AjaxIndex", "List")
            .Update("AjaxUpdate", "List")
        )
        .ClientRowTemplate(tmp => @"
            <div class='order-details'>
                <div class='order-title'>
                    <h4><#= ArtId #></h4>
                    <h3><#= Name #></h3>
                </div>
                <dl>
                    <dt>Menge:</dt><dd><#= Amount #></dd>
                    <dt>Vebe:</dt><dd><#= VeBe #></dd>
                </dl>
                <dl>
                    <dt>Bestellt:</dt><dd><#= $.telerik.formatString( '{0:dd.MM.yy HH:mm}', OrderDate) #></dd>
                    <dt>Erstellt:</dt><dd><#= $.telerik.formatString( '{0:dd.MM.yy HH:mm}', CreateDate) #></dd>
                </dl>
                </div>
            </div>"
            )
)
 
@{ Html.Telerik().ScriptRegistrar().Globalization(true); }
 
<script type="text/javascript">
 
    function dump(obj) { var result = []; $.each(obj, function (key, value) { result.push('"' + key + '":"' + value + '"'); }); return '{' + result.join(',') + '}'; }
 
    function onRowSelected(e) 
    {
        var dataItem = jQuery('#Grid').data('tGrid').dataItem(e.row);
        var rowIndex = e.row.rowIndex;
        //debugger;
        var id = dataItem["ID"];
        var grid = jQuery('#Grid').data('tGrid');
        alert(id);
        grid.EditIndex = rowIndex;
        grid.rebind({ ID: id });
    }

[Atanas Korchev]

Hello Domagoj,

 You can try with the editRow JavaScript method:

function onRowSelected(e) {
    var grid = $(this).data("tGrid");
    
    grid.editRow(e.row);
}

Regards,
Atanas Korchev
the Telerik team

[Domagoj]

Thanks for the answer

I get javascript exception object doesn't supprt this method

r.addClass("t-grid-edit-row" ) 

tia Dom

[Atanas Korchev]

Hi Domagoj,

 Could you please try the following instead:

function onRowSelected(e) {
    var grid = $(this).data("tGrid");
    
    grid.editRow($(e.row));
}

The difference is that a jQuery object is passed to the editRow method.

All the best,
Atanas Korchev
the Telerik team

[Domagoj]

Thanks that worked, btw great package telerik mvc extensions

greetings

[Domagoj]

Hi
sorry but there is just one issue I have, i use custom edit template
in which if i use

@Html.EditorFor(model => model.Company) everything is fine,
 but if i replace it with @Html.DisplayFor( model => model.Company ) just an empty string is shown

tia, Dom

[Atanas Korchev]

Hello Domagoj,

 I don't understand what the issue is. Could you please clarify? A few screenhots may be of help too.

Best wishes,
Atanas Korchev
the Telerik team

[Domagoj]

Hi

ok here is my template, and attached screenshot

as U can see the between first two <hr>'s it should be a companycode but its empty
below second hr i wrote the id of the modelitem and it definitly shouldnt be 0 

TIA dom 

@model mth.eop.web.Models.OrderEntryModel

<script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>OrderEntryModel</legend>
        <div>
            <h1>Artikel</h1>
            <hr />
            <div>@Html.DisplayFor(model => model.Company)</div>

            <hr />
            <h2>@Model.ID</h2>
        </div>
        <hr />
        <div class="editor-label">
            @Html.LabelFor(model => model.Company)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Company)
            @Html.ValidationMessageFor(model => model.Company)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ArtId)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ArtId)
            @Html.ValidationMessageFor(model => model.ArtId)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.OrderId)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.OrderId)
            @Html.ValidationMessageFor(model => model.OrderId)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ArtId_A)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ArtId_A)
            @Html.ValidationMessageFor(model => model.ArtId_A)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Amount)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Amount)
            @Html.ValidationMessageFor(model => model.Amount)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.CurrentStatus)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CurrentStatus)
            @Html.ValidationMessageFor(model => model.CurrentStatus)
        </div>

        @Html.HiddenFor(model => model.ID)

        <div class="editor-label">
            @Html.LabelFor(model => model.OrderDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.OrderDate)
            @Html.ValidationMessageFor(model => model.OrderDate)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.CreateDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CreateDate)
            @Html.ValidationMessageFor(model => model.CreateDate)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

[Atanas Korchev]

Hi Domagoj,

 Display templates are not supported in ajax edit mode (only editor templates are). This is mentioned in our documentation:http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-display-and-editor-templates.html


 The solution is to use the OnEdit event and populate the display template using JavaScript:

function onEdit(e) {
  $(e.form).find("#Company").text(e.dataItem.Company);
}

Regards,
Atanas Korchev
the Telerik team

[Domagoj]

Hi
thanks for the answer but
this is the editor template i just don't want to edit everything there

greetings

[Rosen]

Hello Domagoj,

As my colleague Atanas mentioned, Html.DisplayFor is not supported during ajax editing as it will use a display templates. In order to show text you will need to handle grid's onEdit event and populate the appropriate html element through JavaScript as described previously.

Regards,
Rosen
the Telerik team