Column Templates - JSON mode

[Almond R. M. Monteagudo]

Dear Syncfusion Gurus,

Good evening.

I would just like to ask if anyone can help me on how to create a column template for two (2) columns. For example, I would like to have a column template that will hold a concatenated value of column1 & column2 which are both string.  

I tried to look for some samples, however I wasn't able to find one except the one in your demo which is a column template in  displaying an image.  Hope someone can help me out.

thanks and good day once again.

regards, 

almond

[Ajith R]

Hi Almond,

 

Thanks for using Syncfusion products.

 

Query : How to view the concatenation of two string column in template column?

 

To achieve your requirement we suggest you to set the two string column values in the template column view page. Please refer the below code snippet for further details.

 

[cshtml]

 

@model TemplateTwoColumns.Models.Student

 

${Title1} ${Title2}

 

Please refer the below link to download the sample.

 

Please let us know if you have any concerns.

 

Regards,

 

Ajith R

Sample_ab59642e.zip

[Almond R. M. Monteagudo]

Dear Ajith,

Good pm.

Much thanks for the sample. We'll try and check the sample and update you when i have successfully implemented it in my application.

Thanks again :)

[Almond R. M. Monteagudo]

Good am.

I can't seem to have your code working when I implement it with my codes?

I am actually not using a repository for my grid.  When i implement the code, there are no errors, however, the grid is not being shown.  However, if i remove the column template and return to my original codes for the grid, it is generating and displaying the grid correctly.

Could you please check the below codes:

controller:

....

        private readonly fsdbEntities _db = new fsdbEntities();

        //

        // GET: /Contracts/

        private static bool? _searchServiceIdNo = true;

        public ActionResult Index(bool? serviceIdno)

        {

            _searchServiceIdNo = serviceIdno ?? true;

            ViewData["Searching_ServiceIDNo"] = _searchServiceIdNo;

            var data = new fsdbEntities().tbl_contract.OrderBy(c => c.service_idno).ToList();

            return View(data);

        }

        [AcceptVerbs(HttpVerbs.Post)]

        public ActionResult Index(PagingParams args)

        {

            IEnumerable data = new fsdbEntities().tbl_contract.OrderBy(c => c.service_idno).ToList();

            _db.Configuration.LazyLoadingEnabled = false;

            _db.Configuration.ProxyCreationEnabled = false;

            return data.GridJSONActions<tbl_contract>();

        }

the grid....

....

    @model IEnumerable<tbl_contract>

    @(Html.Syncfusion().Grid<tbl_contract>("EntityGrid")

          .ActionMode(ActionMode.JSON)

          .Datasource(Model)

          .Caption("Service Details")

          .AutoFormat(Skins.Marble)

          .AllowSearching(true)

           .Scrolling(scroll =>

           {

               //scroll.AllowScrolling((bool)ViewData["AllowScrolling"]);

               scroll.AllowScrolling(true);

               //scroll.Width((int)ViewData["Width"]);

           })

          .Column(column =>

                      {

                          column.Add(p => p.service_idno).Visible(false).AllowSearching((bool)ViewData["Searching_ServiceIDNo"]);

                          column.Add(p => p.service_date).HeaderText("DATE").TextAlign(TextAlignment.Right).Format("{0:dd.MMM.yyyy}").Width(50);

                          column.Add(p => p.branch_code).HeaderText("CODE").TextAlign(TextAlignment.Right).Width(40);

                          column.Add(p => p.service_crcno).HeaderText("CRC NO.").TextAlign(TextAlignment.Right).Width(50);                          column.Add("tbl_contract").HeaderText("DECEASED").TemplateColumn(true).TemplateName("JsonCompleteNameTemplate").TextAlign(TextAlignment.Right).Width(130);

                          //column.Add(p => p.service_dec_lname).HeaderText("LAST NAME").Width(65);

                          //column.Add(p => p.service_dec_fname).HeaderText("FIRST NAME").Width(65);

                          //column.Add(p => p.service_dec_mname).HeaderText("MIDDLE NAME").Width(70);

                          column.Add(p => p.service_dec_bday).HeaderText("B-DAY").TextAlign(TextAlignment.Right).Format("{0:dd.MMM.yyyy}").Width(50);

                          column.Add(p => p.service_type).HeaderText("SERVICE").TextAlign(TextAlignment.Right).Width(70);

                          column.Add(p => p.service_interment).HeaderText("INTERMENT").TextAlign(TextAlignment.Right).Format("{0:dd.MMM.yyyy}").Width(60);

                          //column.Add(p => p.service_brgy).HeaderText("BARANGAY").TextAlign(TextAlignment.Right).Width(100);

                      })

          .EnablePaging()

          .EnableSorting()

          .EnableFiltering()

          .Mappers(mapper => mapper.InsertAction("AddService")

                                   .SaveAction("SaveService")

                                   .DeleteAction("DeleteService"))

          .Editing(edit =>

                       {

                           edit.PrimaryKey(key => key.Add(p => p.service_idno));

                           edit.AllowEdit(true);

                           edit.AddNewRowPosition(RowPosition.Top);

                           edit.AllowNew(true);

                           edit.AllowDelete(true);

                       })

                                  .ClientSideEvents(events => { events.OnLoad("load").OnActionBegin("Begin").OnActionSuccess("Success"); })

                          .ToolBar(tool => tool.Add(GridToolBarItems.Search)

                               .Add(GridToolBarItems.AddNew)

                               .Add(GridToolBarItems.Edit)

                               .Add(GridToolBarItems.Delete)

                               .Add(GridToolBarItems.Update)

                               .Add(GridToolBarItems.Cancel))

          )

as you can see in above code i want to combine three (3) columns, the service_dec_lname, service_dec_fname & service_dec_mname respectively.  I would like to do a SUBSTRING command if possible for the service_dec_mname if it has value. I want only to get the 1st letter of the service_dec_mname and have a result of the column template something like Doe, John M.

here is the code for my JsonCompleteNameTemplate.cshtml

@*@using fsdbMvcApps.Models;*@

@model IEnumerable<fsdbMvcApps.Models.tbl_contract>

@*${service_dec_lname}, ${service_dec_fname} SUBSTRING(${service_dec_mname},1,1)*@

@*${service_dec_lname} ${service_dec_fname}*@

${service_dec_lname}

as you can see i have tried some codes as well and still i cant seem to use the column template successfully.  Am I missing something here? Do I really need to have a repository in my model to implement the column template?

Thanks again in advance for the help Syncfusion Gurus.

regards,

almond

[Almond R. M. Monteagudo]

Dear Syncfusion Gurus,

Good afternoon.

Already found where I made a mistake.  I just removed the part of the grid seen below and I already have it working. 

.Add("tbl_contract").

I'll now work on the Substring issue which I want to implement 

Thanks again :)

regards,

almond

[Ajith R]

Hi Almond,

 

Thanks for your update.

 

Query : I want only to get the 1st letter of the service_dec_mname and have a result of the column template something like Doe, John M

 

We suggest you to set the column value by indexing to achieve your requirement of getting the first letter of column value. Please refer the below code snippet for further details.

 

[cshtml]

 

${Title1} ${Title2[0]}

 

Please refer the below link to download the sample.

 

Sample.zip

 

Please let us know if you have any concerns.

 

Regards,

 

Ajith R

[Almond R. M. Monteagudo]

Good AM Ajith,

I cant seem to have the indexing working. When i used the code you posted.  The application will run, however the grid is empty. I tried removing the [0] inside the mname field and it works?  I am still using the code that i posted.  Am I missing something?  Do I still need to do something for the indexing as you have mentioned.  Also, I just found out that I am not able to search using the column template that I had successfully display.  I will also try and look for some codes, for sure there is already an inquiry for this one :D

Thanks in advance again for the help :D

best regards,

almond

[Ajith R]

Hi Almond,

 

Thanks for your update.

 

We have analyzed your code snippet and we have found that the grid have editing functionality. We would like to let you know that currently we do not support this feature “Template column editing and searching” in the grid.

 

We have created a new incident (112749) on behalf of you. We suggest you to follow up the incident for further reference using your direct trac account.

 

Please let us know if you need any further assistance.

 

Regards,

 

Ajith R

[Almond R. M. Monteagudo]

Much thanks Ajith R.

Did the indexing work on your file? What version of Syncfusion are you using? This might be the reason why its not working on my side?

Thanks again.

regards,

almond

[Ajith R]

Hi Almond,

 

Thanks for your update.

 

Query 1 : Did the indexing work on your file?

 

Yes, we would like to let you know that the indexing in template column is worked when editing is not enabled.

 

Query 2 : What version of Syncfusion are you using? This might be the reason why its not working on my side?

 

We would like to let you know that we have used 11.2.0.25 of Essential Studio. The indexing will work on the template column when editing is not enabled in the grid.

 

Please let us know if you need any further assistance.

 

Regards,

 

Ajith R