The .NET MAUI Popup control offers way to customize is the overlay background. This article will guide you through the process of removing the overlay or changing its color. Removing the Overlay To remove the overlay background, set the ShowOverlayAlways property to False . By default, this property is set to True, making the overlay visible whenever the popup is active. XAML <sfpopup:SfPopup x:Name="popup" ShowOverlayAlways="False"> With this setting, the popup will appear without the dimmed overlay background. Output Changing Overlay Color To change the overlay color, use the OverlayColor property within PopupStyle. XAML <sfpopup:SfPopup x:Name="popup"> <sfpopup:SfPopup.PopupStyle> <sfpopup:PopupStyle OverlayColor="LightPink"> </sfpopup:PopupStyle> </sfpopup:SfPopup.PopupStyle> </sfpopup:SfPopup> This changes the overlay background to light pink when the popup is displayed. Output Download the complete sample on GitHub Conclusion I hope you enjoyed learning how to customize overlay background in .NET MAUI Popup. You can refer to our .NET MAUI Popup feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In .NET MAUI Popup, you can display transient content flexibly. This includes incorporating buttons or complex views. This article will guide you on customizing the content of a .NET MAUI Popup using the ContentTemplate property. For example, you can display a login page inside the .NET MAUI Popup as shown below. XAML <StackLayout x:Name="mainLayout"> <Button x:Name="clickToShowPopup" Text="Click to Show Popup" VerticalOptions="Start" HorizontalOptions="FillAndExpand" /> <sfpopup:SfPopup x:Name="popup" AppearanceMode="TwoButton" AcceptButtonText="Login" DeclineButtonText="Cancel" ShowHeader="False" ShowFooter="True"> <sfpopup:SfPopup.ContentTemplate> <DataTemplate> <StackLayout Padding="15"> <Entry Placeholder="UserName" /> <Entry Placeholder="Password" IsPassword="True" /> </StackLayout> </DataTemplate> </sfpopup:SfPopup.ContentTemplate> </sfpopup:SfPopup> </StackLayout> Output Download the complete sample on GitHub Conclusion I hope you enjoyed learning how to customize the message view in .NET MAUI SfPopup. You can refer to our .NET MAUI Popup feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
ASP.NET MVC Chart can bind with DataTable, List and any implementation of IList, IEnumerable, etc. We can use DataTable to connect and retrieve the data from SQL Database and then bind the DataTable with chart. The following code snippet illustrates retrieving data from database DataTable table = new DataTable(); SqlDataAdapter adapter = new SqlDataAdapter(); //Create a connection to SQL DataBase SqlConnection con = new SqlConnection(connectionString); con.Open(); //Select all the records in database string command = "select * from simple_Data"; SqlCommand cmd = new SqlCommand(command, con); adapter.SelectCommand = cmd; //Retrieve the records from databas adapter.Fill(table); Copy After retrieving the data from database, we can bind it with chart using the DataSource property and DataBind method of Chart. A field in data table that corresponds to the X values (values along x-axis) of chart should be mapped with the property XName of the series. Similarly, field corresponding to the Y values should be mapped with the YName property of series. For the OHLC type series, you have to map four fields High, Low, Open and Close to bind the data source and for the bubble series you have to map the Size field along with the XName and YName properties. The following code snippet illustrates binding the retrieved data with Chart //Set DataTable as data source to Chart this.Chart1.DataSource = table; //Mapping a field with x-value of chart this.Chart1.Series[0].XName = "xName"; //Mapping a field with y-value of Chart this.Chart1.Series[0].YName = "yName"; //Bind the DataTable with Chart this.Chart1.DataBind(); Copy The following screenshot displays a simple chart bounded to data from SQL Database Sample link: SQLDataBinding ConclusionI hope you enjoyed learning about how to bind .NET MVC Chart with data from SQL DatabaseYou can refer to our ASP.NET MVC Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Chart example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Description There is no need to refer ej.unobtrusive.min.js file in every partial view page to render Syncfusion components while UnobtrusiveJavaScriptEnabled set as true in ASP.NET MVC. Solution When the UnobtrusiveJavaScriptEnabled is set as true in the web.config page then the control must be initialized by using the “ej.widget.init” method in the AJAX success function instead by referring “ej.unobtrusive.min.js” script file on every partial view page. Please refer to the below code: JavaScript function click() { $.ajax({ url: '/Home/ToolsPartial', success: onSuccess }); } function onSuccess(result) { $("#updatePartialview").html(result); ej.widget.init($("#updatePartialview")); } Please find the sample from the following location: Sample ConclusionI hope you enjoyed learning on how to render the partial view content while unobtrusive mode is enabled.You can refer to our ASP.NET MVC feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Problem When you run the application, runtime error is thrown as “Syncfusion is undefined” or “Object doesn’t support property or method ej”. Reason The above mentioned exception occurs, when the Syncfusion component script files are not referred properly. Solution The following Scripts and theme files are necessary for your components. HTML <head> <!--Contains the necessary theme for our componets--> <link href="default-theme/ej.web.all.min.css" rel="stylesheet" /> <!--dependency script files--> <script src="scripts/jquery-1.10.2.min.js"></script> <script src="scripts/jsrender.min.js"></script> <!--contains the necessary scripts to render all the web components--> <script src="scripts/ej.web.all.min.js"></script> </head> In the above code example, the scripts referred to the folder in which the script files are stored. Make sure that the above mentioned script files are loaded properly. You need to load ej.web.all.min.js file even when you use mobile components. Refer to the following link to know more about the scripts files and dependencies. https://help.syncfusion.com/js/dependencies?_ga=2.216000023.1886322782.1658118340-779596233.1646205657 Make sure that all the necessary dependency script files are included. When you refer individual script files of the components instead of using the ej.web.all.min.js file, make sure all the dependency script files of the component are included. For example, to use the Treeview component alone in your application and when you want to use only the script files needed by the Treeview component instead of using the entire ej.web.all.min.js file, refer to the following code example for the script files that are necessary for the Treeview component. HTML <head> <!--Contains the core CSS required for our components--> <link href="themes/ej.widgets.all.min.css" rel="stylesheet" /> <!--necessary dependency script files--> <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="scripts/jsrender.min.js" type="text/javascript"></script> <!--scripts neccessary for autocomplete component--> <script src="scripts/ej.core.min.js" type="text/javascript"></script> <script src="scripts/ej.data.min.js" type="text/javascript"></script> <script src=" scripts/ej.draggable.js"></script> <script src=" scripts/ej.checkbox.js"></script> <script src=" scripts/ej.treeview.js"></script> <script src=" scripts/ej.waitingpopup.js"></script> </head> If you fail to load any dependency script file that are necessary for the Treeview component, then the error “object doesn’t support ej” occurs. For example, if you fail to include the “ej.checkbox.min.js” file, then on rendering the page, “Object doesn't support property or method 'ejCheckBox’” error is thrown. How to identify the necessary scripts and dependencies of a particular component. Refer to the following class reference link for JavaScript and click on the required component name. You can find the required script files for each component under the heading Requires. https://help.syncfusion.com/api/js/global As an alternate solution to load the components, you can use the CDN links as follows. HTML <head> <!--Contains the necessary theme for our componets--> <link href="http://cdn.syncfusion.com/15.2.0.40/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" /> <!--dependency script files--> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script> <!--contains the necessary scripts to render all the web components--> <script src="http://cdn.syncfusion.com/15.2.0.40/js/web/ej.web.all.min.js"></script> </head> In the CDN link “http://cdn.syncfusion.com/15.2.0.40/js/web/flat-azure/ej.web.all.min.css”, “15.2.0.40” refers to the release version. You can find the CDN links for External dependencies and Syncfusion dependencies in the link below. https://help.syncfusion.com/js/cdn ConclusionI hope you enjoyed about How to avoid "Object doesn't support property ej" error.You can refer to our Asp.NET Core feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET Core example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The jQuery validate plugin makes simple clientside form validation easy while still offering plenty of customization options. The plugin comes with a useful set of validation methods including URL and email validation, while providing an API to write your own methods to validate the form element. Use JQuery validation The jQuery validate plugin rules and custom methods can be used in the editor type control with the help of two properties, the validationRules and the validationMessage. The validationRules property is used to define the jQuery validate rules for the control and validationMessage is used to define the respective error message for the rules that are specified in the validationRules property. When error message is not specified to the validation rules, it takes the default validation error message. The validationRules and validationMessage properties work within a form element, otherwise it does not work. Before using those properties, you need to add the jQuery validate plugin to your application. Syncfusion has provided the following properties to the list of control. Date Picker. DateTimePicker. Numeric, Currency and Percentage textbox. Mask Edit Textbox. Autocomplete and Dropdown. Checkbox and Radio button. You can define the validationRules and the validationMessage properties to the control as shown in the following code: JavaScript <input id="date" name="datepick" type="text" /> <script type="text/javascript"> $(function () { $("#date").ejDatePicker({ validationRules: { required: true }, validationMessage: { required: "Required Date value" } }) }); </script> CSHTML @Html.EJ().DatePicker("date").ValidationRules(e=>e.AddRule("required",true)).ValidationMessage(m=>m.AddMessage("required","Required Date Value")) You can also define the validationRules and validationMessage properties to other list of controls. A sample jQuery validation is available in the following location: Sample locationConclusionI hope you enjoyed learning about how to use the jQuery Validation in the Editor Type control in ASP.NET MVCYou can refer to our ASP.NET MVC feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Description You can invoke the controller action by Button using click event to your Syncfusion Button control. In the click event, you can use Url.Action method to invoke the particular action. Solution You can invoke the controller method by button click using the following code example. To include the Syncfusion components, add the necessary script and theme files in the <head> section as illustrated in the following code example. HTML <!--latest CDN for theme file--> <link href="http://cdn.syncfusion.com/js/web/flat-azure/ej.web.all-latest.min.css" rel="stylesheet" type="text/css" /> <!--CDN for JQuery script file--> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/globalize/0.1.1/globalize.min.js"></script> <!--latest cdn for script file--> <script src="http://cdn.syncfusion.com/js/web/ej.web.all-latest.min.js"></script> <!--latest CDN for Unobtrusive JS file--> <script src="http://cdn.syncfusion.com/js/web/ej.unobtrusive-latest.min.js"></script> You can create Button in CSHTML page as follows. CSHTML @Html.EJ().Button("Login").Text("Log in").Type(ButtonType.Button).ClientSideEvents(e=>e.Click("onclick")) You can write the Url.Action for the Button click event in the script section as follows. JavaScript function onclick() { location.href = '@Url.Action("Index","Home")'; } In the Url.Action you can specify the Controller name and the Action name. Finally, when you click on the Button, the click event is triggered and redirected to the corresponding method in a specified controller. Here, when you click on the Button it is redirected to the “Index” method in the “Home” controller. ConclusionI hope you enjoyed learning about how to invoke action by button click.You can refer to our ASP.NET MVC Button feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Button example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
How to resolve the warning message in Catalina OS or later? While running Syncfusion Mac Installers on Catalina MacOS or later, the below alert will be displayed. If you receive this alert, follow the below steps for the easiest solution. Right-click the downloaded pkg file. Select the “Open With” option and choose “Installer (Default)”.
We would like to suggest you to set the below property to improve the performance of WPF Pivot Grid. 1)Set AutoSizeOption of the pivotgrid to None. C# this.pivotGrid1.AutoSizeOption = Syncfusion.Windows.Controls.PivotGrid.GridAutoSizeOption.None; 2)Set EnableOnDemandCalculations property of the PivotEngine to true. C# this.pivotGrid1.PivotEngine.EnableOnDemandCalculations = true;
Using JavaScript Navigation closeOnDocumentClick property will close the Sidebar element whenever a click is made on the document (outside the Sidebar element). For example, while rendering the DropDownList within Sidebar, the DropDownList popup element will be appended outside the Sidebar element in DOM (within body tag instead of Sidebar element). So, with the popup element interactions (click, mouse down) the closeOnDocumentClick will trigger and close the sidebar. Sidebar close action can be prevented by setting the args.cancel property as true in close event. In the following sample, the closing action for the Dropdown Tree popup is prevented based on the target class. <ejs-sidebar id="default-sidebar" #sidebar [closeOnDocumentClick]="true" (close)="onClose($event)" > <div class="title-header"> <div style="display:inline-block">Sidebar</div> <span id="close" class="e-icons" (click)="closeClick()"></span> </div> <div class="sub-title"> Place your primary content here. <ejs-dropdownlist id="games" #sample [dataSource]="sportsData" [fields]="fields" ></ejs-dropdownlist> </div> </ejs-sidebar> public cssClass: string = "custom_class"; onClose(args) { if (args.event.target.classList.contains(‘e-list-item’)){ args.cancel = true; } } Refer to the sample link: Sample Refer to the API link: https://ej2.syncfusion.com/angular/documentation/api/sidebar/#close Conclusion I hope you enjoyed learning about how to prevent Sidebar closing when closeOnDocumentClick is true in JavaScript SideBar.You can refer to our JavaScript Navigation feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Navigation example to understand how to create and manipulate data.For current customers, you can check out our Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-trac, or feedback portal. We are always happy to assist you!
The single selection on TreeView nodes along with the checkbox can be achieved by unchecking the previously checked nodes using uncheckAll methods during the nodeChecking event. Refer to the following code snippet. var treeObj = new ej.navigations.TreeView({ nodeChecking: function(args) { if (args.action === 'check' && args.isInteracted) { treeObj.uncheckAll(treeObj.checkedNodes); } }}); treeObj.appendTo('#tree'); Refer to the sample link: Sample
Overview This article is about writing Jest unit test cases for Syncfusion Vue components. Prerequisite Node NPM Vue CLI 2 Installing Node & NPM For installing Node.js in your machine, download the LTS (Long Time Support) version of windows setup from the following link. https://nodejs.org/en NPM (Node Package Manager) will be installed automatically along with Node.js setup. Installing Vue CLI To install Vue CLI and to know about other features of it, you can refer the following documentation. https://cli.vuejs.org npm install -g @vue/cli Creating Vue Application with Unit Test You can create Vue application with Unit testing template by Vue CLI using the following configurations. vue create ej2-vue-jest The above command will prompt you two options and select “Manual Select Feature” as follows. Then, you must select “Unit Testing” as shown in the following image. The command window prompt you to choose the Vue.js version and select Vue 2 version. Now, select “ESLint with error prevention only” as shown in the following image. Then, select “Lint and Fix on commit” based on your requirement. You must select “Jest” as unit testing framework. Now, select “In package.json” option for storing the configuration. Integrating Syncfusion Vue Components You can refer Syncfusion online documentation and demo site for including Syncfusion Vue components in the Vue application. https://ej2.syncfusion.com/vue/documentation/introduction https://ej2.syncfusion.com/vue/demos/#/bootstrap5/grid/default.html HelloWorld.vue <template> <div class="hello"> <h1>{{ msg }}</h1> <ejs-button class="test-btn" :content="btnContent"></ejs-button> </div> </template> <script> import Vue from 'vue'; import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons'; Vue.use(ButtonPlugin); export default { name: 'HelloWorld', props: { msg: String, btnContent: String } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> @import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; </style> App.vue <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App" btnContent="Test Button"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> <style> </style> Unit Test import { mount } from '@vue/test-utils' import HelloWorld from '@/components/HelloWorld.vue' describe('HelloWorld.vue', () => { it('renders props.msg when passed', () => { //Jest uses "jsdom" which do not have all functions/APIs of browser window object window.crypto = jest.fn(); window.crypto.getRandomValues = jest.fn(); const msg = 'new message'; const btnContent = 'Jest Button'; const wrapper = mount(HelloWorld, { propsData: { msg, btnContent } }) const btn = wrapper.find('.test-btn'); console.log(btn.vm.content); expect(btn.vm.content).toMatch(btnContent) }) }) Conclusion Now run “npm run test:unit” command for testing the application. npm run test:unit Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-vue-jest-846701347 ConclusionI hope you enjoyed learning about how to do Jest Unit testing for Syncfusion Vue Components.You can refer to our Vue feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
What is JavaScript? JavaScript is a client-side scripting language mainly used for web development to create interactive and dynamic web pages with the help of HTML and CSS. Also, it can be used on the server-side by using runtime environments like Node.js. What are the system requirements to run Syncfusion JavaScript UI controls? Software Requirements: The Syncfusion JavaScript controls are supported in modern browsers. This includes the following versions. Chrome Firefox Opera Edge IE Safari IOS Android Windows Mobile 63 + 58 + 50 + 13 + 11 + 9 + 9 + 4.4 + IE 11 + Hardware Requirements:Processor: x86 or x64 RAM: 512 MB (minimum), 1 GB (recommended) Hard disk: up to 4 GB of available space may be required. However, 350 MB free space is required in boot drive even if you are installing in other drive. What are all the UI controls available in Syncfusion JavaScript Library? Category JavaScript UI Controls Grids DataGrid Pivot Table Tree Grid Spreadsheet Calendar Scheduler Gantt Chart Calendar DatePicker DateRangePicker DateTime Picker TimePicker Buttons Button Button Group Dropdown Menu Progress Button Split Button Chips Reports Report Viewer Editors Rich Text Editor Word Processor Data Visualization Charts Stock Chart Circular Gauge Linear Gauge Diagram HeatMap Chart Maps Range Selector Smith Chart Sparkline Charts Barcode Generator TreeMap Bullet Chart Kanban Forms In-place Editor Query Builder UI Dropdowns AutoComplete ListBox ComboBox Dropdown List MultiSelect Dropdown Dropdown Tree Navigation Accordion Context Menu Menu Bar Sidebar Tabs Toolbar TreeView File Manager Notifications Badge Toast Progress Bar Inputs Form Validation TextBox Input Mask Numeric Textbox Radio Button Checkbox Color Picker File Upload Range Slider Toggle Switch Button Layout Avatar Card Dialog ListView Tooltip Splitter Dashboard Layout Viewer PDF Viewer
Overview This article is about using SCSS files in React application, created by using the “create-react-app” utility. Prerequisite Node NPM Create React App Node SASS Installing Node & NPM For installing Node.js in your machine, download the LTS (Long Time Support) version of windows setup from the following link. https://nodejs.org/en/ NPM (Node Package Manager) will be installed automatically along with Node.js setup. Installing Create React App Install the “create-react-app” utility package using the following NPM Command. npm install -g create-react-app Creating React Application Use the following command to create react application. Create-react-app ej2-react Installing Node Sass Package You can install the “node-sass” package using the following command. npm install node-sass --save Create .env file Create .env file in the root directory of the React application for setting SASS include path variables. Rename the “.css” to “.scss” Rename all the CSS file extension with SCSS file extension. Customizing Syncfusion Theme using the SCSS Variables Now, you can customize the Syncfusion theme using the SCSS variables as follows. $accent: blue; @import "../node_modules/@syncfusion/ej2-react-buttons/styles/material.scss"; You can refer the Syncfusion documentation to integrate Syncfusion React components into React application. Conclusion Now, run the application using “npm run start”. npm run start Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-react-154008663 Conclusion I hope you enjoyed learning about how to use SCSS in Syncfusion React Component.You can refer to our React feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can scroll to the particular ListViewItem and set the focus for the Entry control loaded inside the SfListView.ItemTemplate in Xamarin.Forms ListView.XAMLSetting Behavior to ContentPage and add Button to scroll to the particular item. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ListViewXamarin" xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" x:Class="ListViewXamarin.MainPage"> <ContentPage.BindingContext> <local:ContactsViewModel/> </ContentPage.BindingContext> <ContentPage.Behaviors> <local:Behavior/> </ContentPage.Behaviors> <ContentPage.Content> <Grid RowSpacing="0"> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Button x:Name="scrollButton" Text="Scroll to the last item"/> <Grid x:Name="mainGrid" Grid.Row="1" Padding="10,25,10,10"> <syncfusion:SfListView ItemsSource="{Binding ContactsInfo}" x:Name="listView"> <syncfusion:SfListView.ItemTemplate> <DataTemplate> <Entry x:Name="entry" BackgroundColor="DarkBlue" PlaceholderColor="LightBlue" Placeholder="{Binding ContactName}"/> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </Grid> </Grid> </ContentPage.Content> </ContentPage> C# The scrolling of particular index using the ScrollToRowIndex method was handled in the Button.Clicked event. You can get the VisualContainer using the GetVisualContainer method and get the element loaded inside the ListViewItem to set Focus to the Entry control. using Syncfusion.ListView.XForms.Control.Helpers; namespace ListViewXamarin { public class Behavior : Behavior<ContentPage> { SfListView ListView; Button Button; VisualContainer Container; protected override void OnAttachedTo(ContentPage bindable) { ListView = bindable.FindByName<SfListView>("listView"); Button = bindable.FindByName<Button>("scrollButton"); Container = ListView.GetVisualContainer(); Button.Clicked += Button_Clicked; base.OnAttachedTo(bindable); } private async void Button_Clicked(object sender, EventArgs e) { var index = ListView.DataSource.DisplayItems.Count() - 1; var item = ListView.DataSource.DisplayItems[index]; ListView.LayoutManager.ScrollToRowIndex(index, Syncfusion.ListView.XForms.ScrollToPosition.End, false); await Task.Delay(1000); for (int i = 0; i < Container.Children.Count; i++) { if (Container.Children[i].BindingContext == item) { var entry = (Container.Children[i] as ListViewItem).Content as Entry; entry.Focus(); } } } } } Output View sample in GitHub Conclusion I hope you enjoyed learning about how to scroll and focus on ListView item in Xamarin.Forms (SfListView).You can refer to our Xamarin.Forms ListView feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms ListView documentation to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The Xamarin.Forms SfListView allows you to change the stack height based on scroll using SfListView.ExtendedScrollView scrolled event. Based on the minimum and maximum value of the scroll offset, you can change the height for the StackLayout. XAML StackLayout is used as a header of the ListView. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ListViewXamarin" xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" x:Class="ListViewXamarin.MainPage" Padding="{OnPlatform iOS='0,40,0,0'}"> <ContentPage.BindingContext> <local:ContactsViewModel/> </ContentPage.BindingContext> <ContentPage.Behaviors> <local:Behavior/> </ContentPage.Behaviors> <ContentPage.Content> <StackLayout > <StackLayout x:Name="headerStack" BackgroundColor="Teal" HeightRequest="100"> <Label Text="Header" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/> </StackLayout> <syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}"> <syncfusion:SfListView.ItemTemplate > <DataTemplate> <Grid x:Name="grid"> <Grid.ColumnDefinitions> <ColumnDefinition Width="70" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/> <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center"> <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/> <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/> </Grid> </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </StackLayout> </ContentPage.Content> </ContentPage> C# You can get the ExtendedScrollView by using the SfListView.GetScrollView method and trigger the Scrolled event. using Syncfusion.ListView.XForms.Control.Helpers; namespace ListViewXamarin { public class Behavior : Behavior<ContentPage> { SfListView ListView; StackLayout Header; double minHeight = 50; double maxHeight = 100; protected override void OnAttachedTo(ContentPage bindable) { ListView = bindable.FindByName<SfListView>("listView"); Header = bindable.FindByName<StackLayout>("headerStack"); var scrollView = ListView.GetScrollView(); scrollView.Scrolled += ScrollView_Scrolled; base.OnAttachedTo(bindable); } private void ScrollView_Scrolled(object sender, ScrolledEventArgs e) { if (e.ScrollY > 10 && Header.HeightRequest > minHeight) { Header.HeightRequest = minHeight; } else if (e.ScrollY < 10 && Header.HeightRequest < maxHeight) { Header.HeightRequest = maxHeight; } } } } Output View sample in GitHub ConclusionI hope you enjoyed learning how to update header height on scrolling in Xamarin.Forms ListView.You can refer to our Xamarin ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Xamarin ListView example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Render the Syncfusion ASP.NET controls from server-side (code behind). Solution We can render the Syncfusion control in server side. For example, we have created and appended the ProgressBar control to the div element. Please refer the below code block. [Default.aspx] <div id="ControlDiv" runat="server"></div> [Default.aspx.cs] protected void Page_Load(object sender, EventArgs e) { Syncfusion.JavaScript.Web.ProgressBar Progress = new Syncfusion.JavaScript.Web.ProgressBar(); Progress.Percentage = 70; Progress.Text = "70 %"; Progress.MaxValue = 100; Progress.Height = "25px"; Progress.Width = "500px"; ControlDiv.Controls.Add(Progress); } Please refer to the below link for the sample. https://www.syncfusion.com/downloads/support/directtrac/general/ze/ProgressBar1551235508 Please refer to the below link for manual integration of Syncfusion ASP.NET controls. https://help.syncfusion.com/aspnet/getting-started/manual-integration-of-syncfusion-aspnet-controls ProgressBar getting started: https://help.syncfusion.com/aspnet/progressbar/getting-started Server side event: https://help.syncfusion.com/aspnet/progressbar/server-side-events API reference: https://help.syncfusion.com/api/js/ejprogressbar Live demo: https://asp.syncfusion.com/demos/web/progressbar/defaultfunctionalities.aspx
In this documentation we’ll explain the step by step process to add Syncfusion controls in ASP.NET Web Forms VB.Net application. Section 1: Creating ASP.NET Web Forms Application. Step 1: Open the Visual studio. Step 2: Click File->New->Project. Step 3: After clicking the project it will show project template. Then we need to select the type as Visual Basic and project template as a ASP.NET Web Application. Refer the below screen shot. Step 4: After clicking ok button it will show another popup to select the web application template then we need to select webforms template. Refer the below screenshot. Step 5: After clicking the ok button ASP.NET Web Form Application will be created successfully. Section 2: Adding Syncfusion controls in ASP.NET Web Forms Application. Step 1: Right click the project it will show popup like below, then we need to select Manage NuGet packages to open the NuGet package manager. Refer the below screens shot. Step 2: search the Syncfusion.AspNet NuGet package in the browse tab. Refer the below screen shot. Step 3: Syncfusion.AspNet NuGet package will be appear on top. Then install the Nuget packages. Step 4: After successful installation of NuGet packages then it will automatically add the required assembly reference in the Web.config file. Refer the below screen shot. Step 5: NuGet package also it will add the styles and script files inside the Content and Scripts folder of your project. refer the below screen shot. Step 6: Include the reference “ej.web.all.min.css” file in the Site.Master page, within the head section. <link href="Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" /> Step 7: Add the required JavaScript files into your application. It requires the following mandatory common script files. jQuery (version supported from 1.7.1.min.js to latest jQuery version).jsrender.min.js Step 8: Apart from the above common scripts, it is also necessary to refer to the ej.web.all.min.js file in the application that plays a major role in control creation. It also requires reference to the ej.webform.min.js file in your application, as it is responsible for the server-side event functionalities of the ASP.NET controls. Step 9: The Script Manager is mandatory in order to place our control initialization script in the page. Ensure whether the ScriptManager is added in the Site.Mater or else add the ScriptManager to your web page. <asp:ScriptManager runat="server"> </asp:ScriptManager> Step 10: After referring the required scripts and styles, the Site.Master page look like below. <%@ Master Language="VB" AutoEventWireup="true" CodeBehind="Site.master.vb" Inherits="WebApplication1VB.SiteMaster" %> <!DOCTYPE html> <html lang="en"> <head runat="server"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title><%: Page.Title %> - My ASP.NET Application</title> <asp:PlaceHolder runat="server"> <%: Scripts.Render("~/bundles/modernizr") %> </asp:PlaceHolder> <webopt:bundlereference runat="server" path="~/Content/css" /> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link href="Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" /> <script src="Scripts/jquery-3.3.1.min.js"></script> <script src="Scripts/jsrender.min.js"></script> <script src="Scripts/ej/web/ej.web.all.min.js"></script> <script src="Scripts/ej/common/ej.webform.min.js"></script> </head> <body> <form runat="server"> <asp:ScriptManager runat="server"> </asp:ScriptManager> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> … .. </div> </div> <div class="container body-content"> <asp:ContentPlaceHolder ID="MainContent" runat="server"> </asp:ContentPlaceHolder> <hr /> <footer> <p>© <%: DateTime.Now.Year %> - My ASP.NET Application</p> </footer> </div> </form> </body> </html> Step 11: Add the following DatePicker code within the Default.aspx file. <ej:DatePicker ID="DatePicker" runat="server"></ej:DatePicker> Step 12: To run the application, press F5. Output be like below. Thus, the DatePicker control is rendered successfully with its default appearance. You can then use its various properties to set its value and make use of its available events to trigger when necessary. Please refer the sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1VB394207481Note:A new version of Essential Studio for ASP.NET is available. Versions prior to the release of Essential Studio 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy.The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio for ASP.NET. Although Syncfusion will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below.You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can search the text programmatically in WPF EditControl by using FindText property and highlight the searched text by using SelectLines() method. XAML <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <syncfusion:EditControl Name="Edit1" Background="White" Margin="0" Foreground="Black" ShowLineNumber="True" EnableIntellisense="False" /> <Button Content="Get position of the highlighted text" Grid.Row="1" Click="Button_Click" Height="40" Width="200" /> </Grid> C# public MainWindow() { InitializeComponent(); Edit1.DocumentLanguage = Languages.CSharp; Edit1.DocumentSource = "../../Source.cs"; } private void Button_Click(object sender, RoutedEventArgs e) { //Getting the string to find the text Edit1.FindOptions.FindText = "BusinessObject"; for (int i = 0; i < Edit1.Lines.Count; i++) { //Check whether Lines collection contains the required string if (Edit1.Lines[i].Text.Contains(Edit1.FindOptions.FindText)) { string pat = @"" + Edit1.FindOptions.FindText; Regex r = new Regex(pat, RegexOptions.IgnoreCase); Match m = r.Match(Edit1.Lines[i].Text); //Get the string index and length Edit1.SelectLines(i, i, m.Index, m.Index + m.Length); MessageBox.Show("current position\n" + "Linenumber=" + Edit1.LineNumber + "\n cursorindex=" + m.Index); } } } C#: View sample in GitHub
In this article, you can see how to resolve the "System.Reflection.MemberInfo.Invoke" using the "Link All Assemblies" in Xamarin.Android. While setting the Link SDK Assembly only and Link All options in Android and iOS platforms, your code may also be removed if there is no static references. The linker will sometimes remove your code as per the following category. You might have coded that you call dynamically via System.Reflection.MemberInfo.Invoke. If you instantiate types dynamically, you may want to preserve the default constructor of your types. If you use XML serialization, you may want to preserve the properties of your types. If you have used custom classes in your application, you need to add the following attribute to preserve the class members from linking. [Preserve(AllMembers = true)] Example code [Preserve(AllMembers = true)] Public class Model { //do stuffs } [Preserve(AllMembers = true)] Public class ViewModel { //do stuffs } Refer the following links to know more details about the usage of preserve attribute: https://docs.microsoft.com/en-gb/xamarin/ios/deploy-test/linker?tabs=macos#link-all-assemblies https://docs.microsoft.com/en-gb/xamarin/android/deploy-test/linker#linker-behavior ConclusionI hope you enjoyed learning about how to resolve app crash when you set the "LinkAll" in the Linker Behavior in Xamarin.Android.You can refer to our Xamarin Android feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Xamarin Android example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In this article, you can see how to resolve the "System.Reflection.MemberInfo.Invoke" using the "Link All Assemblies". While setting the Link SDK Assembly only and Link All options in Android and iOS platforms, your code may also be removed if there is no static references. The linker will sometimes remove your code as per the following category. You might have coded that you call dynamically via System.Reflection.MemberInfo.Invoke. If you instantiate types dynamically, you may want to preserve the default constructor of your types. If you use XML serialization, you may want to preserve the properties of your types. If you have used custom classes in your application, you need to add the following attribute to preserve the class members from linking. [Preserve(AllMembers = true)] Example code [Preserve(AllMembers = true)] Public class Model { //do stuffs } [Preserve(AllMembers = true)] Public class ViewModel { //do stuffs } Refer the following links to know more details about the usage of preserve attribute: https://docs.microsoft.com/en-gb/xamarin/ios/deploy-test/linker?tabs=macos#link-all-assemblies https://docs.microsoft.com/en-gb/xamarin/android/deploy-test/linker#linker-behavior ConclusionI hope you enjoyed learning about how to resolve app crash when you set the "LinkAll" in the Linker Behavior in Xamarin.iOS.You can refer to our Xamarin iOS feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Xamarin iOS example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In this article, you can see how to resolve the "System.Reflection.MemberInfo.Invoke" using the "Link All Assemblies". While setting the Link SDK Assembly only and Link All options in Android and iOS platforms, your code may also be removed if there is no static references. The linker will sometimes remove your code as per the following category. You might have coded that you call dynamically via System.Reflection.MemberInfo.Invoke. If you instantiate types dynamically, you may want to preserve the default constructor of your types. If you use XML serialization, you may want to preserve the properties of your types. If you have used custom classes in your application, you need to add the following attribute to preserve the class members from linking. [Preserve(AllMembers = true)] Example code [Preserve(AllMembers = true)] Public class Model { //do stuffs } [Preserve(AllMembers = true)] Public class ViewModel { //do stuffs } Refer the following links to know more details about the usage of preserve attribute: https://docs.microsoft.com/en-gb/xamarin/ios/deploy-test/linker?tabs=macos#link-all-assemblies https://docs.microsoft.com/en-gb/xamarin/android/deploy-test/linker#linker-behavior ConclusionI hope you enjoyed learning about how to resolve app crash when you set the "LinkAll" in the Linker Behavior in Xamarin.Forms.You can refer to our Xamarin Forms feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Xamarin Forms example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Install Syncfusion patch NuGet packages First remove already installed Syncfusion NuGet packages in the NuGet cache for the specified version from the below location. C:\Users\{User Name}\.nuget\packagesFor example, if got the Syncfusion patch NuGet package with the version 18.1.0.52, remove the 18.1.0.52 folder.C:\Users\{User Name}\.nuget\packages\syncfusion.xamarin.sfchart\18.1.0.52 Download the patch NuGet packages that are shared through the support and place it on any location in Windows machine Open your application in Visual Studio. Right click on the Solution and select the “Manage NuGet Packages for Solution...” Then, uninstall already installed Syncfusion NuGet packages from the solution. For example, if got the Syncfusion patch NuGet package with the name Syncfusion.Xamarin.SfChart, uninstall this NuGet package from the solution. After that, click on the settings icon to configure the new NuGet package source. Then, click on the Add icon, Enter a friendly name and choose the patch NuGet Packages downloaded location using browse button. Finally click on the Update and then OK button. Select newly added package source in NuGet Package Manager as shown in the following screenshot. The packages are listed that is present in selected NuGet package source and choose the required NuGet package and then click Install button. The package will be installed to the application as shown in the following screenshot.
Xamarin does not load the renderer assemblies, by default, in iOS and UWP projects. Hence, to solve this, you need to manually load it by calling the Init method of SfAccordionRenderer class in the respective projects as mentioned below. iOS Project Call the SfAccordionRenderer.Init() in the FinishedLaunching overridden method of the AppDelegate class after the Xamarin.Forms Framework initialization, and before the LoadApplication is called as demonstrated in the following code example: public override bool FinishedLaunching(UIApplication app, NSDictionary options) { … global::Xamarin.Forms.Forms.Init(); Syncfusion.XForms.iOS.Accordion.SfAccordionRenderer.Init(); LoadApplication(new App()); … } ReleaseMode Issue in UWP Platform The known Framework issue in UWP platform is the custom controls will not render when deployed the application in Release Mode. The above problem can be resolved by initializing the Accordion assemblies in App.xaml.cs in UWP project as in the following code snippet: // In App.xaml.cs protected override void OnLaunched(LaunchActivatedEventArgs e) { … rootFrame.NavigationFailed += OnNavigationFailed; // you'll need to add ‘using System.Reflection;’ List<Assembly> assembliesToInclude = new List<Assembly>(); //Now, add all the assemblies your app uses assembliesToInclude.Add(typeof(Syncfusion.XForms.iOS.Accordion.SfAccordionRenderer).GetTypeInfo().Assembly); // replaces Xamarin.Forms.Forms.Init(e); Xamarin.Forms.Forms.Init(e, assembliesToInclude); … }
Xamarin does not load the renderer assemblies, by default, in iOS and UWP projects. Hence, to solve this, you need to manually load it by calling the Init method of SfExpanderRenderer class in the respective projects as mentioned below. iOS Project Call the SfExpanderRenderer.Init() in the FinishedLaunching overridden method of the AppDelegate class after the Xamarin.Forms Framework initialization, and before the LoadApplication is called as demonstrated in the following code example: public override bool FinishedLaunching(UIApplication app, NSDictionary options) { … global::Xamarin.Forms.Forms.Init(); Syncfusion.XForms.iOS.Expander.SfExpanderRenderer.Init(); LoadApplication(new App()); … } ReleaseMode Issue in UWP Platform The known Framework issue in UWP platform is the custom controls will not render when deployed the application in Release Mode. The above problem can be resolved by initializing the ExpanderRenderer assemblies in App.xaml.cs in UWP project as in the following code snippet: // In App.xaml.cs protected override void OnLaunched(LaunchActivatedEventArgs e) { … rootFrame.NavigationFailed += OnNavigationFailed; // you'll need to add ‘using System.Reflection;’ List<Assembly> assembliesToInclude = new List<Assembly>(); //Now, add all the assemblies your app uses assembliesToInclude.Add(typeof(Syncfusion.XForms.iOS.Expander.SfExpanderRenderer).GetTypeInfo().Assembly); // replaces Xamarin.Forms.Forms.Init(e); Xamarin.Forms.Forms.Init(e, assembliesToInclude); … }
