1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Item configuration in toolbar

Item configuration in toolbar

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

5 Replies
DL Deepa Loganathan Syncfusion Team 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. 


TT Tomislav Tustonic November 30, 2018 02:32 PM UTC

Thanks for the reply

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

TS Thavasianand Sankaranarayanan Syncfusion Team 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. 


TT Tomislav Tustonic December 3, 2018 09:29 PM UTC

This works fine,
Thanks,
Tom

MS Madhu Sudhanan P Syncfusion Team December 4, 2018 07:23 AM UTC

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


Loader.
Up arrow icon