Log in to start a topic

Wijmo5 ListBox alternate row color

Posted by: fullah on 14 September 2017, 12:12 pm EST

  • fullah

    • Post Options:
    • Link
      Copy

    Posted 14 September 2017, 12:12 pm EST

    Hi,

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

    Thanks

  • fullah

    Posted 14 September 2017, 12:13 pm EST

    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?

  • manish-gupta1

    Posted 14 September 2017, 12:13 pm EST

    Hello,

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

    Thanks,

    Manish Kumar Gupta

  • fullah

    Posted 14 September 2017, 12:13 pm EST

    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

  • fullah

    Posted 14 September 2017, 12:13 pm EST

    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

  • manish-gupta1

    Posted 14 September 2017, 12:13 pm EST

    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

  • fullah

    Posted 14 September 2017, 12:13 pm EST

    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

  • fullah

    Posted 14 September 2017, 12:13 pm EST

    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

  • manish-gupta1

    Posted 14 September 2017, 12:13 pm EST

    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

  • fullah

    Posted 14 September 2017, 12:13 pm EST

    Hi,

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

    Thanks

  • manish-gupta1

    Posted 14 September 2017, 12:13 pm EST

    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

  • fullah

    Posted 14 September 2017, 12:13 pm EST

    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

  • manish-gupta1

    Posted 14 September 2017, 12:13 pm EST

    Hi,

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

    Thanks,

    Manish Kumar Gupta

  • manish-gupta1

    Posted 14 September 2017, 12:13 pm EST

    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

  • fullah

    Posted 14 September 2017, 12:13 pm EST

    Hi Manish,

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

    Thanks

  • manish-gupta1

    Posted 14 September 2017, 12:13 pm EST

    Hi,

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

    Thanks,

    Manish Kumar Gupta

  • fullah

    Posted 14 September 2017, 12:13 pm EST

    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

  • manish-gupta1

    Posted 14 September 2017, 12:13 pm EST

    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

  • fullah

    Posted 14 September 2017, 12:13 pm EST

    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

  • fullah

    Posted 14 September 2017, 12:13 pm EST

    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)
                    });

  • manish-gupta1

    Posted 14 September 2017, 12:13 pm EST

    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

  • fullah

    Posted 14 September 2017, 12:13 pm EST

    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.

  • manish-gupta1

    Posted 14 September 2017, 12:13 pm EST

    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

  • fullah

    Posted 14 September 2017, 12:13 pm EST

    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

  • fullah

    Posted 14 September 2017, 12:13 pm EST

    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

  • manish-gupta1

    Posted 14 September 2017, 12:13 pm EST

    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

  • manish.gupta

    Posted 3 January 2018, 5:27 am EST

    HI Fullah,

    Wijmo Popup draggable feature has been added to the Popup Control and Popup can be dragged by setting isDraggable property to true and adding wj-dialog-header class to drag and move functionality.

    Please find the attached sample and move Popu using Popup Header.

    ~Manish

  • manish.gupta

    Posted 3 January 2018, 5:27 am EST

Need extra support?

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

Learn More

Forum Channels

  • © 2023 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.