locked
Asp.net mvc dropdown list is not functionating properly on mobile view . RRS feed

  • Question

  • User-748081555 posted

    I am working on MVC 5 web application project . I am creating a field ( dropdown list field) within the cshtml page and consuming in a control by a certain provider (Syncfusion). The application is working fine on desktop view ( it has data  , which is list of strings passed through the model from the controller) .However when i change to mobile view the dropdownlist field is showing null .

    i will share my code where i added the field in my cshtml page .

    // Create required custom elements in initial time if (!args.element.querySelector('.custom-field-row')) {

                //Creating an element on the base of EJ inside a div and append it to class custom-field-row
                var row = ej.base.createElement('div', { className: 'custom-field-row' });
    
    
                //putting the schedule object in a variable called formElement
                var formElement = args.element.querySelector('.e-schedule-form');
    
                //Inserting the creating elemenet at a certain location on the Popup Event
                formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));
    
    
                //Creating an element in a div with joining it to class called custom-field-container
                var container = ej.base.createElement('div', { className: 'custom-field-container' });
    
                //Create input element with class name e-field e-event-type and setting attribute name to EventType
                var inputEle = ej.base.createElement('input', {
                    className: 'e-field e-event-type', attrs: { name: 'EventType' }
                });
    
    
              //  var costEle = ej.base.createElement('input', { className: 'e-field e-cost-type', attrs: { name: 'Cost' } });
    
    
                //Appending the created input element to the container which is the element created under class name custom-field-container
                container.appendChild(inputEle);
                //container.appendChild(costEle);
    
                //Appending the container created to the row
                row.appendChild(container);
    
    
                //Creating an array to assign to datasource
                 var myArray = [];
    @foreach (var service in Model.ServicesArray)
    {
        @*@:myArray.push("{ text: '@service.text', value: '@service.value' }");*@
                @:myArray.push("@service.text");
    
    }
                //Creating the drop down list datasource
                var drowDownList = new ej.dropdowns.DropDownList({
                    dataSource:
    
                        myArray,
    
                    fields: { text: 'text', value: 'value' },
                    value: (args.data).EventType,
                    floatLabelType: 'Always', placeholder: 'Service'
                });
    
    
                //Appending the drop down list to the created input element
                drowDownList.appendTo(inputEle);
    
                //setting created input element namee
                inputEle.setAttribute('name', 'EventType');
    
               
             
              
    
              
            }

    Thanks in advance for all your efforts.

    Monday, August 31, 2020 6:36 AM

All replies

  • User-474980206 posted

    What is not functioning, and what was used to test the mobile view?

    Monday, August 31, 2020 7:39 PM
  • User-748081555 posted

    Thank you for taking time to review my blog.

    Actually I have a drop down list which i created through the code shared in the blog by HTML. This dropdown list is not functionating well when i select mobile view from the developer tool for my web application .

    The dropdownlist contains a list of strings i am passing to the view through a model . This dropdown list (field) is showing null when I select mobile view or minimize the web browser am running ,however it is showing the list of strings expected properly when the page is set to desktop view or maximize the page . 

    Looking forward for your support.

    Regards

    Tuesday, September 1, 2020 7:07 AM
  • User-474980206 posted

    if resizing just makes the list go away, check the browser console for errors (failed resizing javascript). this all appears to be issues with your 3rd party control. you should look to them for support.

    Tuesday, September 1, 2020 7:35 PM