Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions aspnetmvc/Combobox/how-to.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
layout: post
title: How to ComboBox control for Syncfusion ASP.NET MVC
description: How to
description: Learn here about How to section in Syncfusion Essential ASP.NET MVC ComboBox Control, its elements, and more.
platform: ejmvc
control: ComboBox
documentation: ug
keywords: dataBind, ComboBox, cascading, autofill, icons
---

# How To
# How To section in ASP.NET MVC ComboBox

## Configure the Cascading ComboBox

Expand Down Expand Up @@ -87,7 +87,7 @@ to the ComboBox.
Output for ComboBox control is as follows.


![](Combobox_howto_images/howto_cascading.png)
![ASP.NET MVC ComboBox Show the list items with icons](Combobox_howto_images/howto_cascading.png)


## Show the list items with icons
Expand Down Expand Up @@ -191,7 +191,7 @@ In the following sample, icon classes are mapped with `IconCss` field.
Output for ComboBox control is as follows.


![](Combobox_howto_images/howto_icon.png)
![ASP.NET MVC ComboBox AutoFill supported with ComboBox](Combobox_howto_images/howto_icon.png)

## AutoFill supported with ComboBox

Expand Down Expand Up @@ -247,7 +247,7 @@ In the following sample, showcase that how to work autofill with ComboBox.
Output for grouping ComboBox control is as follows.


![](Combobox_howto_images/autofill.png)
![ASP.NET MVC ComboBox Validation](Combobox_howto_images/autofill.png)


## Validation of ComboBox using jQuery Validator
Expand Down
6 changes: 3 additions & 3 deletions aspnetmvc/TimePicker/Localization.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Localization | TimePicker | ASP.NET MVC | Syncfusion
description: localization
description: Learn here about localization support in Syncfusion Essential ASP.NET MVC TimePicker Control, its elements, and more.
platform: ejmvc
control: TimePicker
documentation: ug
---

# Localization
# Localization in ASP.NET MVC TimePicker

You can globalize the TimePicker, so that users of different cultures can make use of it and post their content. For your convenience, you can format the TimePicker control to your culture. When your blog is in your culture, the viewers of your culture can understand about your company and its products. You can achieve localization using the “Locale” property.

Expand Down Expand Up @@ -48,7 +48,7 @@ The following steps explains you on how to enable Locale property for TimePicker

Execute the above code to render the following output.

![](Localization_images/Localization_img1.png)
![ASP.NET MVC TimePicker Localization](Localization_images/Localization_img1.png)

TimePicker with es-ES Localization
{:.caption}
Expand Down
6 changes: 3 additions & 3 deletions aspnetmvc/TimePicker/TimePicker-Customization.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: TimePicker Customization | TimePicker | ASP.NET MVC | Syncfusion
description: timepicker customization
description: Learn here about customization support in Syncfusion Essential ASP.NET MVC TimePicker Control, its elements, and more.
platform: ejmvc
control: TimePicker
documentation: ug
---

# TimePicker Customization
# Customization in ASP.NET MVC TimePicker

The TimePicker provides support to display a TimePicker in your web page and allows you to pick a time from it.

Expand All @@ -27,7 +27,7 @@ The following steps explains you to create a TimePicker widget.


2. The following screenshot illustrates you a default TimePicker.
![](TimePicker-Customization_images/TimePicker-Customization_img1.png)
![ASP.NET MVC TimePicker customization](TimePicker-Customization_images/TimePicker-Customization_img1.png)

TimePicker Control
{:.caption}
14 changes: 7 additions & 7 deletions aspnetmvc/TreeGrid/Data-Binding.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Data Binding | TreeGrid | ASP.NET MVC | Syncfusion
description: data binding
description: Learn here about data binding support in Syncfusion Essential ASP.NET MVC TreeGrid Control, its elements, and more.
platform: ejmvc
control: TreeGrid
documentation: ug
---

# Data Binding
# Data Binding in ASP.NET MVC TreeGrid

Data Binding is the process that establishes a connection between the application and different kinds of datasources such as business objects.

Expand Down Expand Up @@ -181,7 +181,7 @@ public class TreeGridController : Controller

The output of the above steps is as follows:

![](Data-Binding_images/Data-Binding_img1.png)
![ASP.NET MVC TreeGrid Self Referential Data Binding](Data-Binding_images/Data-Binding_img1.png)

[Click](https://mvc.syncfusion.com/demos/web/treegrid/treegridlocalbinding) here to view the online demo sample for hierarchical databinding.

Expand Down Expand Up @@ -370,7 +370,7 @@ TreeGrid is rendered from Self-Referential data structures by providing two fiel

The following screenshot shows the output of the above steps,

![](Data-Binding_images/Data-Binding_img2.png)
![ASP.NET MVC TreeGrid Remote data binding](Data-Binding_images/Data-Binding_img2.png)

[Click](https://mvc.syncfusion.com/demos/web/treegrid/treegridselfreference) here to view the online demo sample for self-referential databinding.

Expand Down Expand Up @@ -422,12 +422,12 @@ The following code explains how to use Load on Demand in TreeGrid Control,

The output for load on demand support in TreeGrid:

![](Data-Binding_images/Data-Binding_img3.png)
![](Data-Binding_images/Data-Binding_img4.png)
![ASP.NET MVC TreeGrid Data Binding](Data-Binding_images/Data-Binding_img3.png)
![ASP.NET MVC TreeGrid load on demand](Data-Binding_images/Data-Binding_img4.png)

The following output shows how load on demand works for expanding action

![](Data-Binding_images/Data-Binding_img5.png)
![ASP.NET MVC TreeGrid Load at once](Data-Binding_images/Data-Binding_img5.png)

[Click](https://mvc.syncfusion.com/demos/web/treegrid/treegridloadondemand) here to view the online demo sample for Load on demand.

Expand Down
28 changes: 14 additions & 14 deletions aspnetmvc/TreeGrid/Rows.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Rows | TreeGrid | ASP.NET MVC | Syncfusion
description: rows
description: Learn here about rows support in Syncfusion Essential ASP.NET MVC TreeGrid Control, its elements, and more.
platform: ejmvc
control: TreeGrid
documentation: ug
---

# Rows
# Rows in ASP.NET MVC TreeGrid

The TreeGrid rows displays the information of each row from the bounded data source.

Expand Down Expand Up @@ -176,7 +176,7 @@ Row template is used to customize the TreeGrid rows based on requirements. In Tr

The output of TreeGrid with Row Template is as follows.

![](Rows_images/Rows_img1.png)
![ASP.NET MVC TreeGrid Row Height](Rows_images/Rows_img1.png)

[Click](http://mvc.syncfusion.com/demos/web/treegrid/treegridrowtemplate) here to view online sample for TreeGrid Row Template

Expand All @@ -197,7 +197,7 @@ The following code example explains how to change the row height in TreeGrid

{% endhighlight %}

![](Rows_images/Rows_img5.png)
![ASP.NET MVC TreeGrid Alternate row styling](Rows_images/Rows_img5.png)

The above screenshot shows TreeGrid render with row height of 50.
{:.caption}
Expand All @@ -218,7 +218,7 @@ The following code explains about enabling the alternate row style in TreeGrid

{% endhighlight %}

![](Rows_images/Rows_img4.png)
![ASP.NET MVC TreeGrid Row Drag and Drop](Rows_images/Rows_img4.png)

The above screenshot shows TreeGrid with alternate row style.
{:.caption}
Expand Down Expand Up @@ -249,7 +249,7 @@ The following code explains about enabling the row drag and drop with the defaul

The following screenshot depicts a row drag and drop in the TreeGrid.

![](Rows_images/Rows_img2.png)
![ASP.NET MVC TreeGrid Customizing Drag tooltip](Rows_images/Rows_img2.png)

## Customizing Drag tooltip

Expand Down Expand Up @@ -281,7 +281,7 @@ The following code shows how to render row drag tooltip with JsRender template.
@(Html.EJ().ScriptManager())
{% endhighlight %}

![](Rows_images/Rows_img3.png)
![ASP.NET MVC TreeGrid Multiple row drag and drop](Rows_images/Rows_img3.png)

## Multiple row drag and drop

Expand All @@ -304,7 +304,7 @@ We can also customize row drag and drop actions by using below properties

* canDrop – It is used to enable/disable the row drop action for draggedRecords collection in `RowDropActionBegin` client side event.

![](Rows_images/Rows_img13.png)
![ASP.NET MVC TreeGrid Details row](Rows_images/Rows_img13.png)

[Click](http://mvc.syncfusion.com/demos/web/treegrid/treegridrowdraganddrop) here to view the demo sample for multiple drag and drop action.

Expand Down Expand Up @@ -336,7 +336,7 @@ The following code example shows how to enable details tow in TreeGrid.

{% endhighlight %}

![](Rows_images/Rows_img8.png)
![ASP.NET MVC TreeGrid Disable details row info column](Rows_images/Rows_img8.png)

The above screenshot shows details row in TreeGrid.
{:.caption}
Expand All @@ -363,7 +363,7 @@ The following code example shows how to hide detail info column in TreeGrid.

{% endhighlight %}

![](Rows_images/Rows_img9.png)
![ASP.NET MVC TreeGrid Defining row height for detail template](Rows_images/Rows_img9.png)

The above screenshot shows details row rendered next to the respective row.
{:.caption}
Expand All @@ -384,7 +384,7 @@ The following code example shows how to set details row height in TreeGrid.

{% endhighlight %}

![](Rows_images/Rows_img10.png)
![ASP.NET MVC TreeGrid Customize detail row](Rows_images/Rows_img10.png)

The above screenshot shows details row rendered with height of `150px`.
{:.caption}
Expand Down Expand Up @@ -416,7 +416,7 @@ function detailsDataBound(args) {

{% endhighlight %}

![](Rows_images/Rows_img12.png)
![ASP.NET MVC TreeGrid rows](Rows_images/Rows_img12.png)

The above screenshot shows details row customization for specific row.
{:.caption}
Expand Down Expand Up @@ -466,7 +466,7 @@ The following code example shows how to use this property.

{% endhighlight %}

![](Rows_images/Rows_img6.png)
![ASP.NET MVC TreeGrid Define expand collapse state of every record](Rows_images/Rows_img6.png)

The above screenshot shows TreeGrid render with collapsed state.
{:.caption}
Expand Down Expand Up @@ -533,7 +533,7 @@ public class TreeGridController : Controller

The below screenshot shows the output of above code example..

![](Rows_images/Rows_img7.png)
![ASP.NET MVC TreeGrid Expand and Collapse](Rows_images/Rows_img7.png)

### Expand/Collapse all the rows dynamically

Expand Down