1. Home
  2. Forum
  3. ASP.NET MVC
  4. TreeGrid and a URL with parameters.

TreeGrid and a URL with parameters.

Hello,

I have a doubt about how to pass url parameters to treegrid.

I have a constructed link that generetes the following url:    https://www.example.com/Checklist/ChecklistData/{IdNumber}

Replace de {IdNumber} for an integer number.

My problem, I'm pretty sure is on the controller function parameteres, but I have already checked the following:

- public ActionResult DataSourceCLID(int id, DataManager dm)
- public ActionResult DataSourceCLID(DataManager dm, int id)
- public ActionResult DataSourceCLID(string id, DataManager dm)
- public ActionResult DataSourceCLID(DataManager dm, string id)

I have this code:
---- Controller code: -----
private int idCheckListData = 0;

public ActionResult ChecklistData (int id)
{
idCheckListData = id;
return View () ;
}

public ActionResult DataSourceCLID(DataManager dm)
        {
            var DataList = DBqms.Checklist_Item_Data.Where(x => x.IdChecklistData == idCheckListData);
            var count = DataList.Count();
            return Json(new { result = DataList, count = count }, JsonRequestBehavior.AllowGet);
        }


---- Cshtml code: ----

<div>
    <h4>@ViewBag.Title</h4>
    <hr />
    <div>
        <p style="text-align:right;">
            @Html.ActionLink("Back to Checklist", "ChecklistIndex", "CheckList", null, new { @class = "btn btn-default" })
        </p>
    </div>

    @(Html.EJ().TreeGrid("TreeGridContainer")
                    .IdMapping("IdChecklistItem")
                    .ParentIdMapping("IdChecklistSeccion")
                    .TreeColumnIndex(1)
                    .IsResponsive(true)
                    .Columns(co =>
                        {
                            co.Field("IdChecklistSeccion").HeaderText("Task Id").EditType(TreeGridEditingType.Numeric).Width(45).ValidationRules(v => v.AddRule("required", true)).Add();
                            co.Field("Nombre").HeaderText("Task Name").ValidationRules(v => v.AddRule("required", true)).Add();
                            co.Field("Valor").HeaderText("Start Date").EditType(TreeGridEditingType.String).Add();
                            co.Field("Comentario").HeaderText("End Date").EditType(TreeGridEditingType.Numeric).ValidationRules(v => v.AddRule("required", true)).Add();
                        })
                    .EditSettings(edit =>
                     {
                         edit.AllowEditing(true);
                         edit.AllowAdding(true);
                         edit.AllowDeleting(true);
                         edit.ShowDeleteConfirmDialog(true);
                         edit.EditMode(TreeGridEditMode.CellEditing);
                         edit.RowPosition(TreeGridRowPosition.Top);
                     })
                    .SizeSettings(ss => ss.Width("100%").Height("350px"))
                    .ToolbarSettings(tool =>
                    {
                        tool.ShowToolbar(true);
                        tool.ToolbarItems(new List<TreeGridToolBarItems>
    ()
    {
    TreeGridToolBarItems.Add,
    TreeGridToolBarItems.Edit,
    TreeGridToolBarItems.Delete,
    TreeGridToolBarItems.Update,
    TreeGridToolBarItems.Cancel,
    TreeGridToolBarItems.ExpandAll,
    TreeGridToolBarItems.CollapseAll,
    });
    })
    .Datasource(ds => ds.URL("DataSourceCLID").UpdateURL("UpdateCLID").BatchURL("BatchUpdateCLID").Adaptor(AdaptorType.UrlAdaptor))
    )



</div>

----------


Thank you for your help.

5 Replies
PE Punniyamoorthi Elangovan Syncfusion Team July 17, 2018 04:46 PM UTC

Hi Guillermo, 
We have analyzed your requirement and we need some clarification on this. Can you please let us know whether you need to fetch the remote data from the server side call or client side, it will be helpful for us to provide you a better solution. 
Regards, 
Punniyamoorthi 


GG Guillermo Goberna July 17, 2018 10:20 PM UTC

Hello Punniyamoorthi,

I explain a little bit more the current situation. We have created a checklist template, and from this template we are creating checklists to be completed by te user each week, this weekly checklist has an ID https://www.example.com/Checklist/ChecklistData/{IdNumber}, so when the user click on the link, it opens a new web with the weekly checklist to be filled. So it is a server side call as it has to recover the weekly checklist data from the server when the web is opened.

Hope this helps.

Kind regards

PE Punniyamoorthi Elangovan Syncfusion Team July 18, 2018 01:18 PM UTC

Hi Guillermo,  
We have analyzed your requirement 
In TreeGrid we can pass custom parameters to the server side by using addParams property. Please refer the below code snippet. 
 
@(Html.EJ().TreeGrid("TreeGridContainer") 
                    .IdMapping("taskID") 
                    .ParentIdMapping("parentID") 
                    .Query("new ej.Query().take(29).addParams('id', 10)") 
                     .TreeColumnIndex(1) 
                    //.. 
                     .Datasource(ds => ds.URL("UrlDataSource").UpdateURL("UrlUpdate").InsertURL("UrlInsert").RemoveURL("UrlDelete").Adaptor(AdaptorType.UrlAdaptor)) 
) 
@(Html.EJ().ScriptManager()) 
 
[CS] 
public ActionResult UrlDataSource(DataManager dm, int id) 
        {   
           IEnumerable<TreeGridProjectData> projectDataList = db.TreeGridProjectDatas.ToList(); 
            DataOperations ds = new DataOperations(); 
            var count = projectDataList.Count(); 
            projectDataList = ds.PerformTake(projectDataList, dm.Take); 
            return Json(new { result = projectDataList, count = count }, JsonRequestBehavior.AllowGet); 
        } 
We have prepared the sample, in this sample we had pass the id value(10) to the server side. Please refer the below screenshot 
 
Can you please let us know the above solution will satisfying your requirement or not, it will be helpful for us to provide you a better solution. 
We have attached sample for your reference, please find the sample link below 
Regards, 
Punniyamoorthi 
 


GG Guillermo Goberna August 8, 2018 12:36 AM UTC

Dear Punniyamoorthi,

I have been trying to adapt your solution to my webapp, unsuscesfully.

I going to copy the code so we can check if I'm doing something wrong.

this is the "primary" web site with the list of checklists to be fullfilled:



public ActionResult ChecklistIndex()
        {
            var lista = DBqms.Checklist_Data.ToList();
            ViewBag.datasource = lista;
            return View();
        }
 @(Html.EJ().Grid<blendhub.libreria.Checklist_Data>("FlatGrid")
                .Datasource(datasource => datasource.Json((IEnumerable<blendhub.libreria.Checklist_Data>
            )ViewBag.datasource)
            .Adaptor(AdaptorType.RemoteSaveAdaptor))
/* Code removed to make it sorter in this post */
.Columns(col =>
            {
                col.Field(s => s.IdChecklist)
                    .Format("<a rel='nofollow' href=\"/Checklist/ChecklistData/{IdChecklistData}\">Answer</a>")
                    .IsPrimaryKey(true).AllowEditing(false).Visible(true).HeaderText("Checklist ID").Width(100).Add();
                col.Field(s => s.Nombre).HeaderText("Name").Width(150).Add();
                col.Field(s => s.FechaRegistro).HeaderText("Record date").Width(150).Add();
                col.Field(s => s.Usuario).HeaderText("User").Width(150).Add();
            })
    )


/* In red and green the code where I create the link to be click on the website and open the new view with parameters */


And now, where I have the problem, loading the detail website.

@using Syncfusion.JavaScript
@using Syncfusion.JavaScript.Models
@using Syncfusion.MVC.EJ
<div>
    <h4>@ViewBag.Title</h4>
    <hr />
    <div>
        <p style="text-align:right;">
            @Html.ActionLink("Back to Checklist", "ChecklistIndex", "CheckList", null, new { @class = "btn btn-default" })
        </p>
    </div>

    @(Html.EJ().TreeGrid("TreeGridContainer")
                                    .IdMapping("IdChecklistItem")
                                    .ParentIdMapping("IdChecklistSeccion")
                                    .Query("new ej.Query().take(29).addParams('id', 8)") /* The id number has to be replaced by the url parameter */
                                    .TreeColumnIndex(1)
                                    .IsResponsive(true)
                                    .Columns(co =>
                                    {
                                        co.Field("IdChecklistSeccion").HeaderText("Task Id").EditType(TreeGridEditingType.Numeric).Width(45).ValidationRules(v => v.AddRule("required", true)).Add();
                                        co.Field("Nombre").HeaderText("Task Name").ValidationRules(v => v.AddRule("required", true)).Add();
                                        co.Field("Valor").HeaderText("Start Date").EditType(TreeGridEditingType.String).Add();
                                        co.Field("Comentario").HeaderText("End Date").EditType(TreeGridEditingType.Numeric).ValidationRules(v => v.AddRule("required", true)).Add();
                                    })
                                    .EditSettings(edit =>
                                    {
                                        edit.AllowEditing(true);
                                        edit.AllowAdding(true);
                                        edit.AllowDeleting(true);
                                        edit.ShowDeleteConfirmDialog(true);
                                        edit.EditMode(TreeGridEditMode.CellEditing);
                                        edit.RowPosition(TreeGridRowPosition.Top);
                                    })
                                    .SizeSettings(ss => ss.Width("100%").Height("350px"))
                                    .ToolbarSettings(tool =>
                                    {
                                        tool.ShowToolbar(true);
                                        tool.ToolbarItems(new List<TreeGridToolBarItems>()
                                            {
                                                TreeGridToolBarItems.Add,
                                                TreeGridToolBarItems.Edit,
                                                TreeGridToolBarItems.Delete,
                                                TreeGridToolBarItems.Update,
                                                TreeGridToolBarItems.Cancel,
                                                TreeGridToolBarItems.ExpandAll,
                                                TreeGridToolBarItems.CollapseAll
                                            });
                                    })
                    .Datasource(ds => ds.URL("DataSourceCLID").UpdateURL("UpdateCLID").BatchURL("BatchUpdateCLID").Adaptor(AdaptorType.UrlAdaptor))
    )

</div>
<style>
    .e-grid td {
        font-family: Calibri !important;
        font-size: 12px !important;
    }

    .e-grid .e-headercelldiv {
        font-size: 12px;
        color: red;
    }

    .e-hover {
        color: brown !important;
        background-color: red !important;
    }

    .e-grid-icon.e-groupheadercell {
        font-size: 10px;
        color: red;
    }
</style>


and the c# code:

      private int idCheckListData = 0;

//This function works.
        public ActionResult ChecklistData (int id)
        {
            idCheckListData = id;
            return View();
        }

//Never loads...?
        public ActionResult DataSourceCLID(DataManager dm, int id)
        {
            ViewBag.datasourceCL = DBqms.Checklists;
            ViewBag.datasourceCLS = DBqms.Checklist_Seccion;
            ViewBag.datasourceCLI = DBqms.Checklist_Item;
            ViewBag.Title = DBqms.Checklist_Data.FirstOrDefault(x => x.IdChecklistData == id).Nombre;

            var lista = DBqms.Checklist_Item_Data.Where(x => x.IdChecklistData == id);
            var count = lista.Count();
            return Json(new { result = lista, count = count }, JsonRequestBehavior.AllowGet);
        }



PE Punniyamoorthi Elangovan Syncfusion Team August 8, 2018 11:17 AM UTC

Hi Guillermo, 
We have analyzed your reported issue and code snippet, but we are unable to reproduce the reported issue in our end. so we have created an incident under your account to schedule a call to resolve the reported issue. 
Please log on to our support website to check for further updates. 
Regards, 
Punniyamoorthi 


Loader.
Up arrow icon