Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
510
How can I rebind the dataSourceUrl of Igcombo at runtime?
posted

How can I rebind the dataSourceUrl of Igcombo at runtime?

I found databund method only can request data once.

Parents
No Data
Reply
  • 24497
    posted

    Hi Spark_li,

    The dataBind method is disigned mostly for internal use, though it can be used when application modifed some data related options explicitly within options object and needs to synchronize them with actual runtime internal data source.

    To change dataSource application needs only to set that option.
    1. If valueKey and textKey remain the same, then no extra statements is required.
    2. If valueKey and textKey in new dataSource is different, then application needs to provide those options too.
    3. If dataSource is plain array, then setting textKey, valueKey, valueKeyType and textKeyType will not work, because those options within "_setOption" are set one by one and each of them triggers recreating all data and rebinding as well. It means that missing values each time are replaced by calculated values defined by old (not changed yet) settings. In this case, the only suggestion: is to get reference to igCombo.options object, clear data-related member options explicitly and only after that set dataSource or call dataBind. I wrote example for you, which covers all those cases.

    Note: I did not include #1, because the only thing you will need to do, is to change dataSource. If that is the case in your application, then please do one of the following:
    $('#myCombo').igCombo('option', 'dataSource', newDataSource);
    $('#myCombo').igCombo({ dataSource: newDataSource });

    Examples for advanced dataSource changes:

    <script type="text/javascript">
      $(function () {
       
    var ds1 = [1, 2, 3, 4, 5],
         
    ds2 = ["one", "two", "three", "four"],
         
    ds3 = [{a: "a1", b: "b1"}, {a: "a2", b: "b2"}],
         
    ds4 = [{x: 1, txt: "x1"}, {x: 2, txt: "x2"}];
       
    $('#combo1').igCombo({ dataSource: ds1 });
       
    $('#ds1').click(function () {
         
    var comboOptions = $('#combo1').data('igCombo').options;
         
    comboOptions.valueKey = null;
         
    comboOptions.textKey = null;
         
    comboOptions.valueKeyType = null;
         
    comboOptions.textKeyType = null;
         
    comboOptions.dataSource = ds1;
            $('#combo1').igCombo('dataBind');
       
    });
        $('#ds2').click(function () {
         
    var comboOptions = $('#combo1').data('igCombo').options;
         
    comboOptions.valueKey = null;
         
    comboOptions.textKey = null;
         
    comboOptions.valueKeyType = null;
         
    comboOptions.textKeyType = null;
         
    $('#combo1').igCombo({ dataSource: ds2 });
        });
        $('#ds3').click(function () {
         
    $('#combo1').igCombo({
           
    valueKey: 'a',
           
    textKey: 'b',
           
    dataSource: ds3
            });
        });
        $('#ds4').click(function () {
         
    $('#combo1').igCombo('option', 'valueKey', 'x').igCombo('option', 'textKey', 'txt').igCombo('option', 'dataSource', ds4);
       
    });
      });
    </script>
    <span id="combo1"></span><br />
    <input type="button" value="ds1" id="ds1" />
    <
    input type="button" value="ds2" id="ds2" />
    <
    input type="button" value="ds3" id="ds3" />
    <
    input type="button" value="ds4" id="ds4" />

Children