[Solved] obtaining parent grid name from within editor template

[Sheldon]

I have a grid within a tab strip control.    Each tab represents a set of information in a specific language.
The name of each grid is dynamically generated based on the language.  ex. ProductInfo_EN , ProductInfo_ES, etc etc

Within the grid I have an editor template defined that contains a dropdownlist.  I am editing the grid InLine.

I need to obtain the name of the parent grid from within the editor template so that I can then access cells within the grid for parameters in the loading of the dropdownlist.

I am having trouble determining the name of the parent grid (see below).   Everything works fine when I hardcode the name ... but of course that will only work for one language.   Any ideas?

<script type="text/javascript">
    function sendMasterData() {

        var rowID = $("[name=GridRowID]").val();
        var model = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid").dataSource.get(rowID);

        return  {
            countrycode: model.ProductData.Country,
            lang: model.ProductData.Language,
            GlobalFieldName: model.ProductData.FieldName,
            MDTableName: model.ProductData.MasterDataTableName
        };
    }

</script>
@model NewGlobalProductCatalogue.Models.ProductInfo
@(Html.Kendo().DropDownListFor(p => p.ProductData.ProductValue)
.Name("ProductData.ProductValue.MasterDataID")
.DataValueField("MasterDataID")
.DataTextField("MasterDataText")
.DataSource(d => d
       .Read(r => r.Action("Index", "MasterDataSelection").Data("sendMasterData").Type(HttpVerbs.Post))

)
.Events(e => e.Change("ChangeMasterData"))
.AutoBind(false)
.SelectedIndex(0)
) 

It is the clause $(event.srcElement).closest("[data-role=grid]")   that is giving me trouble.

If I just go $("#ProductInfo_EN").data("kendoGrid").dataSource.get(rowID);   It all works fine ... but of course this is useless for any other grid except the English one.

Any suggestions would be appreciated.

-Sheldon

[Kiril Nikolov]

Hi Sheldon,

I am afraid that in the data function of the read method of the editor template it is not possible to get a reference of the Grid element that is currently being used. The problem comes from the fact that the function is executed in the global context and neither the event argument or the this reference holds any information about the widget. 

Regards,
Kiril Nikolov
Telerik

 

 

[Sheldon]

humm ... that's a shame ... well maybe there is another way to approach this.  

I will try and pass some data into editor using the viewModel.  ... or maybe I can create some sort of hidden field on the parent page that I can then read information from.

All I need to do is pass the language code (EN, ES, FR, etc) into the editor template and then be able to read that information from the data function.   From there I can append the code to the static text "ProductInfo_", and that will be the name of the parent grid.

Just need to figure out a way to pass data in and read it.

[Sheldon]

Just a quick update.   I managed to get around the issue using the viewdata htmlhelper

On the grid I provided the information I needed, the language code in this case, within the viewdata object like so.

@(Html.Kendo().Grid(Model)
    .Name("ProductInfo_" + lang)
    .Columns(columns =>
    {
        columns.Bound(c => c.GridRowID).Hidden(); 
        columns.Bound(c => c.ColumnName);
        columns.Bound(c => c.ProductData.FieldName);
        columns.Bound(c => c.ProductData.ProductValue).ClientTemplate("#: ProductData.ProductValue.MasterDataText #").EditorTemplateName("EditorProductMasterData").EditorViewData(new { languagecode = ViewBag.ProductLanguage });
        columns.Command(command => { command.Edit(); });
    })

Then within the data reader that the dropdownlist uses I referenced the viewdata and pulled out the language code.

I could then append that to the name of the grid I wanted and voila, everything started working :) (see below)
<script type="text/javascript">
    function sendMasterData() {
        var langu = '@(ViewData["languagecode"])';
        var rowID = $("[name=GridRowID]").val();
        var model = $("#ProductInfo_" + langu).data("kendoGrid").dataSource.get(rowID);

        return  {
            countrycode: model.ProductData.Country,
            lang: model.ProductData.Language,
            GlobalFieldName: model.ProductData.FieldName,
            MDTableName: model.ProductData.MasterDataTableName
        };
    }

</script>

[Kiril Nikolov]

Hello Sheldon,

I did not think of that approach. But I am really happy that you managed to find the solution for the problem and shared it with us.

Thanks!

Regards,
Kiril Nikolov
Telerik