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,
What version of the product do you use?
Also, by the code snipped provided I believe that you are setting your columns locally with the "columns:gridcolumns" property, there is additional property of the column object called "template", where you can set the specific template you want.
www.igniteui.com/.../ui.iggrid
Could you please try templating the columns in that way.
In addition, I am attaching two samples where the specific behavior does not reproduce. I am using the latest version of IgniteUI. The first one is using your approach of templating and the second one is the way I mentioned above.
If this is not the desired thing, could you please modify one of the samples so that the specific issue occur.
http://jsfiddle.net/ntofa12v/3/
http://jsfiddle.net/ntofa12v/4/
If you have any questions or concerns please let me know.
Best Regards,
Martin Dragnev,
Infragistics
thanks, but when I click next page button the rendered column with pick list is not populated, just empty other data is fine. what's the trick here?
I also tried removing paging and it loads quite fast with proper dropdown but when I scroll down below visible records picklist are there not rendered, empty column and when I scroll back up previously rendered rows got clear, empyu column.
any idea, why it is not persistent?
You can set igGrid to render just the first page using virtualization.
For example, you can set your grid like this:
$("#grid1").igGrid({
virtualization: true, 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); }
});
You can read more about our virtualization here:
https://www.igniteui.com/help/iggrid-virtualization-overview
and the topic of how to set and configure here:
https://www.igniteui.com/help/iggrid-enabling-and-configuring-virtualization
Using virtualization should help you to render faster your records.
If you have any additional questions or concerns, please let me know.
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'); } });
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?