Wijmo5 ListBox alternate row color

Originally Posted 22 August 2017, 11:27 am EST

  • Originally Posted 22 August 2017, 11:27 am EST

    Hi,

    Can we give any style like color to wijmo listbox alternate row data?

    Thanks
  • Reply

    Hello,
    You can use itemFormatter for formatting ListBox item. Please refer to the fiddle that implements the same.

    Thanks,
    Manish Kumar Gupta
  • Reply

    Hello,

    Can we achieved in wijmo listbox as in attached image. In attached image listbox each item contain delete button. Also All item have styling like UL and IL html tag.Can we achieved this with wijmo listbox?

  • Reply

    Hi,
    We need to set isContentHtml property to true to show HTML content in ListBox item. As I have added X in the item, you can add image as per your need.

    Thanks,
    Manish Kumar Gupta
  • Reply

    Hi Manish,

    One thing more, on every item we need delete button. You applied just 'X'. Kindly apply image of cross button instead of text.

    Thanks
  • Reply

    Hi Manish,

    In mentioned Fiddle , you are using jquery and bootstrap. Can you provide the same functionality with angularjs? Actually am trying the same example in angularjs but html is not applied on content in customItemFormatter function.See attached image.

    Thanks

  • Marked as Answer

    Reply

    Hi,
    For this, you need to set dropDown width equals to Control width. For your reference, please refer to the updated fiddle.

    Thanks,
    Manish Kumar Gupta
  • Reply

    Hi Manish Gupta,

    Thanks for this. One thing more, I have a scanerio, When we click any where on combobox then open the drop down list. In this fiddle its working. But the issue is, dropdown width is not equal to the height of dropdown list when we click on dropdown arrow button.Can you guide me about this.

    Thanks
  • Reply

    Hi,
    Please set is-content-html instead of isContentHtml for AngularJS.

    Thanks,
    Manish Kumar Gupta
  • Reply

    Hi Manish,

    Please check this Fiddle. Html is coming here as plain text instead of affecting some UI. Can you guide me why this is not working?

    Thanks
  • Reply

    Hi,
    As we mentioned, these features are not supported with Wijmo Popup. Hence, we created a enhancement for the same with tracking id 281223. This feature will be added in the future if the team found this feasible.

    You can perform the desired action using show method. Please refer to the documentation for the same at the following link:
    http://wijmo.com/5/docs/topic/wijmo.input.Popup.Class.html#show


    Thanks,
    Manish Kumar Gupta
  • Reply

    Hi,
    We are sorry, currently, these features are not supported.
    We would like to confirmation on the features if we understand it correctly.

    Make Popup Draggable
    ------------------------
    You are referring to move Popup from the current position to the new position.

    Assign Title
    ---------------------------
    You would like to show Title as Header in the Popup or you would like to show title as Above the Popup.

    Please confirm these so that we can update you.

    Thanks,
    Manish Kumar Gupta
  • Reply

    Hi,

    Yes popup as draggable from one position to other position.
    Yes, give title to header of popup.

    Please also tell me that, can we give customized button functionality to cancel or ok button of popup.In this fiddle please tell me how to close popup when we click on close button. I want to take some action on close button and then close the popup.

    Thanks
  • Reply

    Hi,

    This is my fiddle.I want to make popup as dragable and also give it title.Thanks for help

    Thanks
  • Reply

    Hi Manish,

    Is there any way to call lost-focus method after calling selected-index-change of wijmo combobox.

    Thanks
  • Reply

    Hi,
    You can focus out from current control by focusing other control or by calling onLostFocus() method.

    Thanks,
    Manish Kumar Gupta
  • Reply

    Hi Manish,

    This is my fiddle link. When i click on country combobox, gotfocus method called and dropdown list opened.But when i select any country and without clicking anywhere else, again click on country combobox, dropdown will not opened.I have also called lostfocus method from selected index change method.

    Thanks
  • Reply

    Hi,
    If you refer to the #109481 reply, you will find that you need to handle click event for Control to open dropdown. Same here, you need to handle click event for the same and no requirement to handle gotFocus event.

    Please refer to the updated fiddle for the same.

    Hope it helps!

    http://wijmo.com/blog/wijmo-com-will-soon-be-grapecity-com/
    Thanks,
    Manish Kumar Gupta
  • Reply

    Hi,
    If you would like to focus Combobox on page load, you can focus using focus method. However, we are unable to replicate the issue at our end with the fiddle. On page load, any HTML is not in focus. On hitting Tab key, ComboBox gets focus.

    #109487
    Control property is exposed only for Wijmo angular js directive. Hence, you can not use it through code. Please refer to the following code snippet for the same:
    var combobox = new wijmo.input.AutoComplete('#searchCompaniesCpy', {
    headerPath: 'Ticker',
    itemsSource: companies,
    showDropDownButton: false,
    gotFocus: gotfocusCompany.bind(this), // onGotFocus && onLostFocus are not event, these are method
    lostFocus: lostfocusCompany.bind(this),
    selectedIndex: 1,
    selectedIndexChanged: CompanyChanged.bind(this)
    });



    Thanks,
    Manish Kumar Gupta
  • Reply

    Hi Manish,

    control is not working for

    var combobox = new wijmo.input.AutoComplete('#searchCompaniesCpy', {
    headerPath: 'Ticker',
    itemsSource: companies,
    showDropDownButton: false,
    control: 'companygroup',
    onGotFocus: gotfocusCompany.bind(this),
    onLostFocus: lostfocusCompany.bind(this),
    selectedIndex: 1,
    selectedIndexChanged: CompanyChanged.bind(this)
    });

  • Reply

    Hi Manish,

    This is my fiddle. When i refresh the page or when first time my page will be open, cancel button got focus.
    Thanks
  • Reply

    Hi,
    You should handle click event for control and show drop-down in this case. Please refer to the updated fiddle for the same.

    THanks,
    Manish Kumar Gupta
  • Reply

    Hi Manish,

    I have another issue.

    In this fiddle link. There is a wijmo listbox, When i click on cross button, MyFunc() was not clicked. Can you suggest me how to hit function on cross button.

    Thanks
  • Reply

    Hi Manish,

    This is updated fiddle link and i face two issues.

    1. When i type some thing in second dropdown, it will not serach from its dropdown table. In first dropdown, when i type some thing it will searched from its dropdown list.

    2. As you told me that add addEventListener for click for second dropdown, it will hide my dropdown header row. How can we fixed dropdown table header row.

    Thanks
  • Reply

    Hi Manish,

    This is my fiddle link. As above you mentioned, dropdown not working as i expected. I expect working of second dropdown same like first dropdown in fiddle link. Like when i click on dropdown and select some country and without clicking any where again click on same dropdown, dropdown not opened. First dropdown is working fine.
  • Reply

    Hi Farhat,
    For need to set headerPath for displaying the desired field in input display, searchMemberPath for searching for the fields in dropDown and selectedValuePath for selecting a item from dropDown.

    For showing header row, we use addHeader method, this method should be called in the click event.

    Please refer to the updated fiddle for the same.

    You were using MyFuc(); for click event with a ng-click attribute for click event handling. Since, you are adding HTML using JS, you can not use ng-click from here. You need to use JS onclick attribute for click event handling.

    Please refer to the updated fiddle for the same.

    Please read the following blog:
    http://wijmo.com/blog/wijmo-com-will-soon-be-grapecity-com/

    Thanks,
    Manish Kumar Gupta
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels