[Solved] Obtaining Json object for row in edit mode...

[Joan Vilariño]

Hello...

I'm using your new component combobox in a grid. For that, I've created an "EditorTemplate" for the field I want the combobox to be displayed... In that template, I need to "inject" the current Id and Label of the combobox, because the combo items are loaded with ajax, and at render time that list is void. But I'm unable to access the row's Json object ...

When I need to access the Json data of a row where the user has clicked or something like that I use this:

var jsonObj = $('#myGrid').data('tGrid').dataItem($(e.target).closest('tr'));

and it works, so I tried to do it this way for the edit template like this:

<%=Html.Telerik().ComboBoxFor(o => o.Id)
.DataBinding(db => db.Ajax().Select("_obtenerComboEmpresas","GrupoEmpresa"))
.Filterable(ft => ft.FilterMode(AutoCompleteFilterMode.StartsWith))
.AutoFill(true)
%>
<script type="text/javascript">


$(document).ready(function(e) {
    var combo = $('#Empresa_Id'); // this would be the Id for the ComboboxFor
    var grid = combo.closest('div.t-grid');
    var jsonObj = grid.data('tGrid').dataItem(combo.closest('tr'));
    alert(jsonObj);
}

</script>

When I click the grid's edit button, the template gets rendered and the javascript code executed, but the alert returns 'undefined', meaning that dataItem function returned null...

I've debugged and I see the "data" property of grid.data('tGrid') and all the Json objects are there (in an array)... why is the 'dataItem()' function returning undefined?

Could this have something to do with the row being in edit mode? Is the only thing I can think of... what would be then the correct way to obtain the json object for that row in edit mode??

Thanks!!

[Georgi Krustev]

Hi Joan Vilariño,

dataItem() method try to retrieve JSON from grid.data depending on the index of the passed row. Unfortunately in your case grid.data is empty, so dataItem method will never return JSON object.

In order to achieve your goal you can wire OnEdit client event and cache passed dataItem:

var dataItem
function editGrid(e)
{
    dataItem = e.dataItem;
}

Sincerely yours,
Georgi Krustev
the Telerik team

[Joan Vilariño]

Browsing the forums I found the solution.

Grid's data property, as I explain in my first post is not empty... all the rows are there but dataiTem() "FUNCTION" doesn't work because it seems I was passing the wrong row...

When you are in edit mode, .closest('tr:has(form)') must be used instead .closest('tr') ..

The final code looks like this:

<script type="text/javascript">

    $(document).ready(function() {
        // Handle for the combobox
        var combo = $('#Empresa_Id');
        // Get the row where the combo is
        var tr = combo.closest('tr:has(form)');
        // Access the Json object of the grid to get the data
        var row = $(combo.closest('div.t-grid')).data('tGrid').dataItem(tr);
        // If the combo has any value...
        if (row.Id != 0) {
            // Access the Telerik object for work...
            combo = combo.data('tComboBox');
            // Create a DataSource with the current value of the combo field
            var datasource = [ { Text: row.Empresa.Nombre, Value: row.Empresa.Id, Selected: true } ];
            // Bind the combobox...
            combo.dataBind(datasource);
            // Set the value
            combo.value(row.Empresa.Id);
            combo.text(row.Empresa.Nombre);
        }
    });

This works ok... when I click edit, the combo shows the actual value of the field... anyway, as I tell you in http://www.telerik.com/community/forums/aspnet-mvc/grid/combobox-not-posting-its-data-on-ajax-update.aspx, after all this headache, I find that the value is not posted when I click update....