I have tabs defined in this manner:
There is an action performed on Tab2 which requires a a webDropdown control to reload the data. How do I accomplish this? I know I can detect a selection changedevent either via Javascript or Server-side. With JAvascript, I can make a call to "tabs.set_SelectedIndex(tab1, true), but that appears to refresh the content in tab1 in a browser refresh sort of way (i.e., it flashes).
How can I simply reload the data associated to a specific control (i.e., an infragistics web drop down control to be exact)???
Thanks
Paul
Hello Pavel,
In JavaScript you can find a control in a tab which uses ContentUrl using the following code:
var drop_down = ig_controls.ApplicationMainTab.get_tabs()[0].get_iframe().contentWindow.$find("WebDropDown1");
Where "WebDropDown1" is the client id of the WebDropDown and 0 is the index of the tab.
From here you can re-bind the WebDropDown using its client-side data binding as demonstrated in "Using client binding to bind to hierarchical JSON" sample, but you'll need some service to get the data from as JSON.
You can also refer to the following forum post for more information: https://ko.infragistics.com/community/forums/f/ultimate-ui-for-asp-net/86636/webdropdown-web-service-client-side
Hope this helps,Martin PavlovInfragistics, Inc.
Finally getting to this....I suppose the only way to know the client id is to run the application, and inspect the object through Chrome (or Firefox), and then place the client ID statically in your statement above. I also think this javascript snippet is called on the same page where I define the webtab, right?
Sometimes the "current_value" appears to repeat itself more than a few times. The drop-down seems to appear with my values intact, but on occasion, I can see the current_value that I set "Please select a Product Type..." appear more than once in the drop-down list and the values that appeared to be "bound" don't show up.
Suggestions?
Well, it took a bit of digging and I found that I had to use the displayValue for my selection criteria (currentValue), when traversing the webdropdown list on server side instead of using the selectedValue which would return the "ID" associated to what is visible in the UI.
In the future, as a feature request, is it possible for client rendered drop-down data to be able to pass back the ID value that is selected as well. Fortunately, my values in general are unique.
So, I am able to load the data into the control. I forgot to parse the JSON string, so now the drop-down appears correctly. However, I have a problem in that
I don't have access to the selected item on postback which would allow me to process the selection server-side.
Also, I can get data from my service query via AJAX. In code-behind, I use the JsonConvert to translate the dataTable to a JSON string. This is immediately available in myresponse response variable:
[{"ID":277,"PortfolioName":"Platforms"},{"ID":278,"PortfolioName":"Applications"},{"ID":279,"PortfolioName":"Microsoft"},{"ID":280,"PortfolioName":"Mac"},{"ID":281,"PortfolioName":"VMWare"},{"ID":282,"PortfolioName":"Google"},{"ID":283,"PortfolioName":"RIM"},{"ID":284,"PortfolioName":"Citrix"},{"ID":285,"PortfolioName":"RDP"},{"ID":286,"PortfolioName":"IBM"},{"ID":287,"PortfolioName":"bla"},{"ID":288,"PortfolioName":"bleck"}]
However, when I databind, the dropdown continues to be empty, but I do see a scrollbar added. This is my dropdown definition in my ASPX file:
<ig:WebDropDown ID="cbxProductType_cv" runat="server" EnableClientRendering="true" ClientIDMode="Static" Width="350px" CurrentValue="Select a Product Type..." ToolTip="Select a Product Type" StyleSetName="LucidDream" AutoPostBack="True" OnSelectionChanged="cbxProductType_SelectionChanged" DataKeyFields="ID" ValueField="ID" TextField="PortfolioName"></ig:WebDropDown>
and this is my Javascript code:
$.ajax({ type: "POST", url: "Default.aspx/GetProductTypeData", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { var drop_down = ig_controls.ApplicationMainTab.get_tabs()[0].get_iframe().contentWindow.$find("cbxProductType_cv"); console.log("Retrieved drop down object: " + drop_down); console.log("Got new data:" + msg.d); drop_down.set_dataSource(msg.d); console.log("Set data source"); drop_down.dataBind(); drop_down.set_currentValue("Select a Product Type..."); drop_down.set_selectedItemIndex(-1); console.log("Data Binding"); } });
I seem to see a "_clientState" added to each of my ID's. Is this normal? If I call my dropdown "WebDropDown1", do I still perform the $find with "WebDropDown1"?
Also, I had to download jquery.tmpl.min.js as my latest jquery.2.2.0.js library doesn't resolve the $tmpl? Is there a workaround, or should I use an earlier version of
jQuery?