jQuery UI Widgets Forums Grid card view with dropdown and date picker

This topic contains 1 reply, has 2 voices, and was last updated by  Yavor Dashev 1 month, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • ksheer
    Participant

    Dear Jqwidgets,

    we are trying for cardview with grid edit exampke.

    https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/cellediting.htm

    I want the cardview update to have datepicker and drowpdown in the edit option.

    Please give me the example. It will be of great help.

    Regards
    ksheer


    Yavor Dashev
    Participant

    Hi ksheer,

    Thank you for contacting us!

    I have created a code snippet that shows you how to achieve this kind of functionality (when you open the window for editing the card to have dropDownList instead)
    I have used this demo for base:
    https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/cardview.htm

    And the code snippet:

    
                    grid.addEventListener('click', (event) =>{
    
                        if(event.target.classList.contains('jqx-icon-edit')){
                            
                            setTimeout(() => {
                                let inputElement = document.querySelectorAll("input[datafield='productname']")
                                var source = [
                                    "Affogato",
                                    "Americano",
                                    "Bicerin"
                                ]
    
                                let dropdownlistDiv = document.createElement('div')
                                dropdownlistDiv.id = 'jqxWidget'
                                inputElement[0].appendChild(dropdownlistDiv)
    
                                let dropdownlist =  $("#jqxWidget").jqxDropDownList({ source: source, placeHolder: inputElement[0].value, width: 180, height: 30});
                                inputElement[0].replaceWith(dropdownlistDiv)
                               
                            }, 10);
                         
                        }
                    })
    

    With this code we replace the input for the product name with a dropdownlist but this can be applied to different inputs and to be replaced with different components such as DateTimePicker for example.

    Let me know if that works for you!

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.