Hi,
have this problem that when use static json data for datasource then picklist is getting rendered and show up as combobox
but when I use same data from webapi picklist doesn't show up and related column is empty without combobox.
$("#grid1").igGrid({ width: '100%', columns: gridcolumns, dataSource: dataURL, features: [ ], rendered: function (evt, ui) { tmpl = "<div id=grdpicklist_${ID}></div>"; $('#grid1').igGrid('setColumnTemplate', 'Company', tmpl); }, });
dataSource = $("#grid1").igGrid("option", "dataSource"); $.each(dataSource, function (index, row) { $("#grdpicklist_" + row.ID).CustomPickList({ 'id': 'grdpicklist_' + row.ID, 'dataSource': PickListData, 'contentType': 'application/json', 'valueKey': 'ID', 'textKey': 'Company', 'selected': row.ID, 'externalColumns': PickListCols, 'module': 'Project', 'callback': onGridPicklistSelection }); });
what can be a problem here? When I switch data source to local json array it works.
thanks
Hello Robson Wild,
Thank you for posting in our community.
In the code snippet provided, you are subscribing to "rendered" event, which is fired only prior initialization of the grid and when the whole grid has been rendered (including headers,footers,etc.).
In the "setColumnTemplate" method there is one additional (optional) parameter called "render" which makes the grid rerender after template is set.
Could you please try setting it to true like this:
rendered: function (evt, ui) { tmpl = "<div id=grdpicklist_${ID}></div>"; $('#grid1').igGrid('setColumnTemplate', 'Company', tmpl, true)
}
and see if that helps?
If the desired behavior is not achieved, could you please attach a small sample where the specific issue does reproduce so I can provide further help?
Best Regards,
Martin Dragnev,
Infragistics
thanks, that seems to help, but I also put nested ajax call for picklist data once grid data is loaded as code below.
Anyway related problem now is that rendering that combobox inside grid takes very long. For sample few records works fine.
time because I need to have it for few columns which is not acceptable, Grid loads like 1000 records and then picklist is processed for each row, takes forever despite I have local paging set. Is there a better way to have a dropdown selection with one or more columns to do it efficiently? how limit rendering just to records on current page?
$.ajax({ url: dataURL, type: 'GET', dataType: 'json', success: function (data, textStatus, xhr) { database = data; $("#grid1").igGrid({ width: '100%', columns: gridcolumns, //DefaultColumns, // dataSource: database, //dataURL, features: [ ], rendered: function (evt, ui) { tmpl = "<div id=grdpicklist_${TIDnumber}></div>"; tmpl2 = "<div id=grdpicklist2_${MakeFlag}></div>"; $('#grid1').igGrid('setColumnTemplate', 'Opis', tmpl, true); $('#grid1').igGrid('setColumnTemplate', 'MakeFlag', tmpl2, true); }, }); $.ajax({ url: pickURL, type: 'GET', dataType: 'json', success: function (data2, textStatus, xhr) { dataSource = $("#grid1").igGrid("option", "dataSource"); $.each(dataSource, function (index, row) { $("#grdpicklist_" + row.TIDnumber).CustomPickList({ 'id': 'grdpicklist_' + row.TIDnumber, 'dataSource': data2, 'valueKey': 'col1', 'textKey': 'Opis', 'selected': row.TIDnumber, 'externalColumns': PickListCols, 'module': 'Project', 'callback': onGridPicklistSelection }); }); }, error: function (xhr, textStatus, errorThrown) { console.log('Error in PickList Operation'); } }); $.ajax({ url: pickURL2, type: 'GET', dataType: 'json', success: function (data3, textStatus, xhr) { dataSource = $("#grid1").igGrid("option", "dataSource"); $.each(dataSource, function (index, row) { $("#grdpicklist2_" + row.MakeFlag).CustomPickList({ 'id': 'grdpicklist2_' + row.MakeFlag, 'dataSource': data3, // 'contentType': 'application/json', 'valueKey': 'col1', 'textKey': 'col1', 'selected': row.MakeFlag, 'externalColumns': SinglePickListCols, 'module': 'Project', 'callback': onGridPicklistSelection2 }); }); }, error: function (xhr, textStatus, errorThrown) { console.log('Error in PickList Operation'); } }); function onGridPicklistSelection(result) { //if (result && result[0]) $("#grdpicklist_" + result[0]["col1"]).find('.ui-iggrid-filtereditor').attr("placeholder", result[0]["Opis"]); } function onGridPicklistSelection2(result) { //if (result && result[0]) $("#grdpicklist2_" + result[0]["col1"]).find('.ui-iggrid-filtereditor').attr("placeholder", result[0]["col1"]); } }, error: function (xhr, textStatus, errorThrown) { console.log('Error in Grid Operation'); } });