We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Item configuration in toolbar

Thread ID:

Created:

Updated:

Platform:

Replies:

141209 Nov 29,2018 04:29 PM UTC Dec 4,2018 07:23 AM UTC ASP.NET MVC - EJ 2 5
loading
Tags: Grid
Tomislav Tustonic
Asked On November 29, 2018 04:29 PM UTC

Hello

I'm looking for an example similar to the last example on this page
https://ej2.syncfusion.com/javascript/documentation/toolbar/item-configuration/
but there's none for the ASP.NET MVC.

How do I do this using ASp.NET MVC ?

Thanks, Tom

Deepa Loganathan [Syncfusion]
Replied On November 30, 2018 12:38 PM UTC

Hi Tom,  
 
Thanks for contacting Syncfusion support. 
 
We understood your requirement to add input controls as a Toolbar item and it can be achieved by using the Template API of Toolbar Helper as given in the below code. 
 
 
 
@Html.EJS().Toolbar("defaultToolbar").Created("created").Items(new List<ToolbarItem> { 
… 
new ToolbarItem { Text = "Input", Template= "<input id='numeric' type='text'/>" }, // Element 
       }).Render() 
 
<script> 
    function created() { 
     var numeric = new ej.inputs.NumericTextBox({ 
            format: 'c2', 
            value: 1, 
            width: 150 
        }); 
        numeric.appendTo('#numeric');  // Render numeric text box  
    } 
</script> 
 
 
We have attached the view page of our sample to achieve your requirement.  
 
 
Also, we have considered to add this information to the How-To section of our help pages.  
 
Regards, 
Deepa L. 


Tomislav Tustonic
Replied On November 30, 2018 02:32 PM UTC

Thanks for the reply

How do I do this for a toolbar in a Grid?

Thavasianand Sankaranarayanan [Syncfusion]
Replied On December 3, 2018 09:30 AM UTC

Hi Tomislav, 

Query : How do I do this for a toolbar in a Grid? 
 
As per your requirement we have created Grid sample with custom toolbar. Please find the below code example and sample for more information. 

@{ 
 
    List<object> toolbarItems = new List<object>(); 
    toolbarItems.Add(new 
    { 
        id = "template", 
        text = "Input", 
        template = "<input id='numeric' type='text'/>" 
    }); 
} 
 
@Html.EJS().Grid("Grid").Created("created").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 
{ 
    col.Type("checkbox").Width("50").Add(); 
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
    . . . .  
    col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); 
 
}).AllowResizing().ToolbarClick("toolbarClick").Toolbar(toolbarItems).AllowPaging().PageSettings(page => page.PageCount(5)).EditSettings(edit => {edit.AllowEditing(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }). 
Render() 
 
 
<script> 
    function toolbarClick(args) { 
        if (args.item.id === 'template') { 
            alert("template"); 
        } 
    } 
</script> 
 
<script> 
    function created() { 
        var numeric = new ej.inputs.NumericTextBox({ 
            format: 'c2', 
            value: 1, 
            width: 150 
        }); 
        numeric.appendTo('#numeric');  // Render numeric text box 
    } 
 
</script> 
  


Please get back to us if you need further assistance from this. 

Regards, 
Thavasianand S. 


Tomislav Tustonic
Replied On December 3, 2018 09:29 PM UTC

This works fine,
Thanks,
Tom

Madhu Sudhanan P [Syncfusion]
Replied On December 4, 2018 07:23 AM UTC

Hi Tomislav, 
Please get back to us if you require further assistance. 
Regards, 
Madhu 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;