When the ASPxComboBox component is situated within two ASPxPageControl tab pages, I am unable to access it

I am encountering an issue with accessing the ASPxComboBox component when it is within an ASPxPageControl that has multiple tab pages. To handle this, I have added a function to the ClientSideEvents using string.Format:


function(s, e) {{ 
    if (window['{1}']) {{ 
        {0}.SetSelectedItem(
            {0}.FindItemByText(
                {2}.GetText()
            )
        ); 
        {0}.Focus(); 
        {3}.PerformCallback(
            {0}.GetSelectedItem().value
        ); 
    }} 
}} 

However, upon firing this function on one tab page and then switching to another, I encounter the following error:


Microsoft JScript runtime error: Unable to get value of the property 'SetSelectedItem': object is null or undefined

I am wondering why this error occurs and if there is a way to access the combobox after switching tabs. Additionally, I have an ASPxPopupControl appearing on both tabs when opened.

For further context, here are some additional details:


0 refers to ASPxClientControl.GetControlCollection().Get('<%=ASPxComboBox_Views.ClientID%>');
1 refers to ASPxClientControl.GetControlCollection().Get('<%=ASPxComboBox_Views.ClientInstanceName%>');
2 refers to ASPxClientControl.GetControlCollection().Get('<%=GetClientStr(ASPxHyperLink_Desc.ClientID%>');
3 refers to ASPxClientControl.GetControlCollection().Get('<%=ASPxCallbackPanel_Menu.ClientID%>');

It seems that the issue arises when the ASPxComboBox_Views is placed within the ASPxPageControl tab structure. Here is how my page layout looks:


<..>
<dx:ASPxPageControl ID="ASPxPageControl_Main">
    <TabPages>
        <dx:TabPage>
            // Content for first tab
            <dx:ASPxGridView ID="ASPxGridView_Naudojimas">
            <dx:ASPxPopupControl ID="ASPxPopupControl_Layout">
            ...
            // Partial content shared between tabs starts from here
            <dx:ASPxComboBox ID="ASPxComboBox_Views" runat="server" ...>
            
        </dx:TabPage>
        
        <dx:TabPage>
            // Content for second tab
            <dx:ASPxGridView ID="ASPxGridView_Redagavimas">
            <dx:ASPxPopupControl ID="ASPxPopupControl_Layout">
            ...
            // Partial content shared between tabs starts from here
            <dx:ASPxComboBox ID="ASPxComboBox_Views" runat="server" TextField="Description" ValueField="FullName" ClientInstanceName="cbViews" TextFormatString="{0}">
            ...

Answer №1

Ensure to assign a ClientInstanceName to every control utilized on the client side.

<dx:ASPxCallbackPanel ClientInstanceName="cbPanel1" ...>
<dx:ASPxHyperLink ClientInstanceName="hyperlink1" ..../>

Then, follow this script:

function(s, e) {{ 
    if (window.{0}) {{ 
        {0}.SetSelectedItem(
            {0}.FindItemByText(
                {1}.GetText()
            )
        ); 
        {0}.Focus(); 
        {2}.PerformCallback(
            {0}.GetSelectedItem().value
        ); 
    }} 
}} 

where:
0 - combo box ClientInstanceName
1 - hyperlink ClientInstanceName
2 - callbackpanel ClientInstanceName

Additionally, make sure to check out the links provided by Niranjan.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transferring the "key" and "values" data from a JSON object to a perl script

I am currently working on developing a shopping cart application. All the items stored in the shopping cart are kept within a JavaScript object called Cart, with data structured like {"sku"=quantity}. For instance: Cart={"5x123"=1,"5x125"=3} At this ...

Delete the parent div when the button is clicked

trying to create a dynamic button system to add/remove inputs on clicks. I have the addButton working but not the deleteButton. What am I missing? $(document).ready(function() { var maxFields = 20; var addButton = $('#plusOne'); va ...

Combining Angular JS 1 and Laravel 5.2 for seamless integration

Currently, I am in the process of setting up Angular JS 1 with Laravel 5.2 by installing the necessary dependencies using npm. After installation, a node_modules folder was created alongside the app directory. My primary concern is whether it is recommend ...

Setting a custom background image in a Bootstrap modal

When users visit my website, I want to enhance their experience by using a background image in my bootstrap modal. Despite several attempts, I have been unable to successfully set a background image in the modal. Can anyone provide guidance on this matter? ...

Unable to access the URL slug within the client component in Next.js version 13

In my upcoming project with Next 13, I have a client-side component that is being rendered under the route /journal/[date] Unfortunately, I'm facing an issue trying to extract the date from the URL. I attempted to use: import { useRouter } from &apos ...

What is the solution to eliminating the MultiValueDictKey error when making an AJAX get request?

When handling multiple divs on a web page, each containing a form, I encountered the need to utilize AJAX Get functionality. The goal was to pass the text entered into a form along with the ID of the corresponding div to a Django view for storage in a data ...

Experiencing difficulty in updating GitHub pages with React application

Looking for help updating my deployed active react app on GitHub pages with newer code, such as color changes and text updates. The updated code has been pushed to the main branch of my GitHub repo but the live GitHub page is not reflecting the changes. De ...

Best practice for finding the parent element using Protractor

The recently released Guidelines advise against using the by.xpath() locators. I am making an effort to adhere to this suggestion, but I'm having difficulty locating a parent element. We are currently utilizing the .. XPath expression to access the p ...

Retrieve content from JSON post data

I have been facing an issue where I am trying to send a JSON file from a web page to a nodeJS server. My goal is to assign the JSON file to an object on the server side and print it out in the console. Despite researching extensively online and attempting ...

Connecting an admin dashboard to a MERN e-commerce application: A step-by-step guide

In the process of developing an e-commerce platform, I find myself using React.js for the frontend and Node.js/Express.js for the backend. My current challenge lies in creating a seamless dashboard to manage items within the app. One possible solution wo ...

Double-tap bug with Image Picker in Typescript React Native (non-expo)

Well, here’s the situation - some good news and some bad news. First, the good news is that the code below is functioning smoothly. Now, the not-so-good news is that I find myself having to select the image twice before it actually shows up on the clie ...

Utilizing Jade template helpers in both Node.js and the browser

When working with Jade templates in both an Express app and a browser environment, I find myself needing to format data before inserting it into inputs. Is it recommended to extend locals with similar functions in both Node.js and the browser? { formatDa ...

Developing an interactive website utilizing AngularJS, WCF Service, and SQL Server

Exploring the possibilities of creating a web application, I stumbled upon AngularJS. With plans to incorporate WCF Service and SQL Server into my project, I am intrigued by what these technologies can offer. I want to ensure that AngularJS aligns with my ...

Angular 2: Harnessing the power of dynamic backlinks on landing pages!

I am facing an issue with my Angular 2 item page. When a user lands on the page via a deep link, the Location.back() function does not work as there is no history in the Location object. To address this, I attempted to use a workaround where if the back() ...

How can you typically verify the type of an object variable in TypeScript?

How can I verify if the obj variable contains all the properties defined in the Person interface? interface Person { name: string; age: number; } const jsonObj = `{ name: "John Doe", age: 30, }`; const obj: Person = JSON.parse(jsonObj); ...

Unprepared for handling JSON data with JavaScript and jQuery

{ "Items": [ { "location": "bakery", "item1": "milk", "item2": "bread" } ], } Currently, I am encountering difficulties in parsing a JSON object and receiving the following error: Error: Unca ...

Leverage the generic types of an extended interface to simplify the creation of a shorthand type

Attempting to streamline my action shorthand that interacts with AsyncActionCreators. A function has been crafted to accept a React dispatch: Dispatch<T> parameter: const fetchProfileAction = actionCreator.async<void, Profile, any>('FETC ...

Most effective method for eliminating an item from an array with AngularJs

I have an array of objects that I want to modify by removing multiple objects from it. The following code is currently achieving this successfully, but I'm curious to know if there is a more efficient way to accomplish this task. This process involv ...

`CSS Content Placeholder Issue When Used Alongside JavaScript`

Let me explain a bit, I have a master page named UserProfile.master which has a content placeholder linked to UserProfileWall.aspx. Now, I am trying to incorporate some additional JavaScript and a second CSS file in the userprofilewall page. However, whene ...

What is the best method to evaluate lambda functions in a functional React Component using Jest and Enzyme?

My current challenge involves creating a pulldown tab in a TDD style. I have been struggling to test if the function inside the component triggers on the button's click event. The jest logs keep showing me errors indicating that the object I'm tr ...