Create components,attributes and events in controller

[Humanjo Daro]

Hello everyone,,

I tried to create treegrid's toolbar item in controller:

Syncfusion.JavaScript.Models.TreeGridToolBarOptions o = new Syncfusion.JavaScript.Models.TreeGridToolBarOptions();

o.ShowToolbar = true;

o.ToolbarItems = new List<String>() { "add", "edit", "delete", "update", "cancel", "expandAll", "collapseAll" };

List<Syncfusion.JavaScript.Models.TreeGridCustomToolbarItem> cusI = new List<Syncfusion.JavaScript.Models.TreeGridCustomToolbarItem>();

Syncfusion.JavaScript.Models.TreeGridCustomToolbarItem a = new Syncfusion.JavaScript.Models.TreeGridCustomToolbarItem();

a.Text = "Refresh";

a.TemplateID = "ValidateTemplate";

a.TooltipText = "refresh";

cusI.Add(a);

o.CustomToolbarItems = cusI;

ViewBag.toolbarSettings = o;

Also added  in view cshtml file:

*toolbar-settings="ViewBag.toolbarSettings" in <ej-tree-grid ...

*<script id="ValidateTemplate" type="text/x-jsrender"

        <a class="e-toolbaricons e-icon refrech" /

    </script

And it actually worked, but still have few question:

*I did find "Syncfusion.JavaScript.TreeGrid", I guess I can even create my treegrid in controller but didn't find Syncfusion.JavaScript.Grid or Syncfusion.JavaScript.TextBox

*refrech icon is not visible, I copied "class="e-toolbaricons e-icon refrech" from help.sync 

*Is it possible to, when I click on that CustomToolbarItem named refrech, one of my treegrid  column become hidden (event coded in controller)

*Is there any documentations on how to create components in controller ?

Regards,

Humanjo.

[Padmavathy Kamalanathan]

Hi Humanjo, 

Thanks for contacting Syncfusion Forums. 

QUERY1: I did find “Syncfusion.Javascript.TreeGrid”, I guess I can even create my treegrid in controller but didn’t find Syncfusion.Javacript.Grid or Syncfusion.JavaScript.Textbox 

 

From your query we can understand that you are  trying to render grid in the controller page. We have created sample for your reference. Please check the below sample, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/MVCSample-15055723399033.zip 

In the above sample we have initiated Grid in view page and set grid properties in the controller page. 

And regarding textbox query, currently we don’t have textbox component separately. Please let us explain your requirement in detail so that we could try to achieve it. 

               

QUERY2: Hide column on clicking custom toolbar item 

We have already discussed this in the forum 136077. Please check that link for the sample. 

QUERY3: Documentation for creating component in controller 

 

For grid component we have documentation for creating component in controller. 

Please check the below help documentation, 

https://help.syncfusion.com/aspnetmvc/grid/how-to?cs-save-lang=1&cs-lang=csharp#configure-grid-through-the-grid-model-properties 

If you have issues regarding above queries, please share us below details, so that we could proceed further. 

1. Complete grid/treegrid rendering code
2. Version details
3. Screenshot of error if any

If you have further queries, please get back to us. 

Regards, 

Padmavathy Kamalanathan 

[Humanjo Daro]

Hello everyone,,

I tried to create treegrid's toolbar item in controller:

Syncfusion.JavaScript.Models.TreeGridToolBarOptions o = new Syncfusion.JavaScript.Models.TreeGridToolBarOptions();

o.ShowToolbar = true;

o.ToolbarItems = new List<String>() { "add", "edit", "delete", "update", "cancel", "expandAll", "collapseAll" };

List<Syncfusion.JavaScript.Models.TreeGridCustomToolbarItem> cusI = new List<Syncfusion.JavaScript.Models.TreeGridCustomToolbarItem>();

Syncfusion.JavaScript.Models.TreeGridCustomToolbarItem a = new Syncfusion.JavaScript.Models.TreeGridCustomToolbarItem();

a.Text = "Refresh";

a.TemplateID = "ValidateTemplate";

a.TooltipText = "refresh";

cusI.Add(a);

o.CustomToolbarItems = cusI;

ViewBag.toolbarSettings = o;

https://pcbuilder.onl/pcpartpicker/

Also added  in view cshtml file:

*toolbar-settings="ViewBag.toolbarSettings" in <ej-tree-grid ...

*<script id="ValidateTemplate" type="text/x-jsrender"

        <a class="e-toolbaricons e-icon refrech" /

    </script

And it actually worked, but still have few question:

https://curated.onl/nba-reddit/

*I did find "Syncfusion.JavaScript.TreeGrid", I guess I can even create my treegrid in controller but didn't find Syncfusion.JavaScript.Grid or Syncfusion.JavaScript.TextBox

*refrech icon is not visible, I copied "class="e-toolbaricons e-icon refrech" from help.sync 

https://reversephonelookup.onl/

*Is it possible to, when I click on that CustomToolbarItem named refrech, one of my treegrid  column become hidden (event coded in controller)

*Is there any documentations on how to create components in controller ?

Regards,

Humanjo.

Thank you my issue has been solved,...

[Farveen Sulthana Thameeztheen Basha]

Hi Humanjo, 

 

Thanks for your update.  

 

Query 1: refrech icon is not visible, I copied "class="e-toolbaricons e-icon refrech" from help.sync   

Please refer the below code example to render icon for custom toolbar item.  

  

<style type="text/css" class="cssStyles">  

   .Refresh:before {  

       content: "\e677";  

   }  

</style>  

  

Query 2: Is it possible to, when I click on that CustomToolbarItem named refrech, one of my treegrid  column become hidden (event coded in controller)  

Yes, it is possible to hide column, by using the method hideColumn in toolbarClick event. Please find the below code example.  

[cs]  

public ActionResult Index()  

{  

//...  

   treegrid.ToolbarClick = "toolbarClick";  

   ViewBag.TreeGridModel = treegrid;  

   return View();  

}  

[cshtml]  

@(Html.EJ().TreeGrid("TreeGridControl", ViewBag.TreeGridModel))  

<script>  

  function toolbarClick(args) {  

    if (args.itemName == "refresh") {  

         var treeObj = $("#TreeGridControl").data("ejTreeGrid");  

         treeObj.hideColumn("ID"); //Passing the header text to hide the column   

     }   

  }  

</script>  

  

Sample – https://www.syncfusion.com/downloads/support/directtrac/general/ze/TestSample289750459  

Note: For security purposes we have removed bin and obj folder.  

Query 3: Is there any documentations on how to create components in controller   

Please refer the below documentation link to render TreeGrid control from server side.  

https://help.syncfusion.com/aspnetmvc/treegrid/how-to/render-treegrid-server-side  

  

Regards,  

Farveen sulthana T