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.
Unfortunately, activation email could not send to your email. Please try again.

How to add link in Grid cell?

Thread ID:

Created:

Updated:

Platform:

Replies:

116244 May 2,2014 11:54 AM May 12,2014 07:06 AM JavaScript 7
loading
Tags: ejmGrid
Boriphuth Saensukphattraka
Asked On May 2, 2014 11:54 AM

Hello

Please find the detail picture in the attached file.

Attachment: Grid_34f451dc.zip

Ragavee U S [Syncfusion]
Replied On May 5, 2014 09:20 AM

Hi Boriphuth

 

Thanks for using Syncfusion products.

 

We are unable to reproduce the issue that you have mentioned. We have created a simple sample to add links in a grid cell and the sample can be downloaded from the attachment.

 

In our sample, we have added link in the grid cell using the columnTemplate and rendered a dialog on clicking the link.

 

Please refer the below code snippet

 

[In Controller]

 

namespace Links.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            . . .

GridProperties<object> gridmodel = new GridProperties<object>();

            List<Column<object>> colList = new List<Column<object>>();

            . . .

           colList.Add(new Column<object>() { HeaderText = "Links", TextAlign = Syncfusion.JavaScript.TextAlign.Center, ColumnTemplate = true, TemplateId = "#temp" });

            . . .

        

            return View();

        }

 

[In View]

 

<script type="text/x-jsrender" id="temp">

    <a id="{{:No}}" rel='nofollow' href="Click{{:No}}">Click{{:No}}</a>

</script>

<script type="text/x-jsrender" id="dtemp">

    <tr><td>{{:No}}</td></tr>

    <tr><td>{{:Name}}</td></tr>

</script>

. . .

<script>

    function create() {

        $(".e-grid a").click(function (e) {

            e.preventDefault();

            var id = e.target.id;

            var temp = $.templates(dtemp);

            var gridobj = $("#Grid").data("ejGrid");

           var data= ej.DataManager(gridobj._dataSource()).executeLocal(ej.Query().where("No", ej.FilterOperators.equal, id, false));

           

           $("#dialog").html("<table>" + temp.render(data) + "<tr><td><input id='btn' type='button' value='Ok'/></td></table>");

           $("#btn").ejButton({ size: "mini", click: "close"});

            $("#dialog").ejDialog("open");

        });

    }

 

Please try this sample and get back to us if we have misunderstood your requirement or else reproduce the issue in the above sample or provide more information about the issue, the provided information will be helpful for us to solve the as early as possible.

 

Regards

Ragavee U S



Attachment: Links_39fe6572.zip

Boriphuth Saensukphattraka
Replied On May 5, 2014 10:58 PM

Hi Ragavee,
Thank you for your support.Sorry I think I post in wrong section I use ES javascript.By the way I have another question about Ej Grid please take a look on my attached picture.

Attachment: CheckAll_a2c1c18c.zip

Ragavee U S [Syncfusion]
Replied On May 6, 2014 06:33 AM

Hi Boriphuth

 

Sorry for the inconvenience caused.

 

Based on your request we have modified the previously updated sample by rendering the Grid in Essential Studio JavaScript and the same can be downloaded from the attachment.

 

In the sample attached, we have used the HeaderTemplate to insert a checkbox in the header and ColumnTemplate to add checkbox in the rows.  Please refer the below code snippet.

 

<script type="text/javascript">

. . .

$("#Grid").ejGrid({

. . .

columns: [  { headerTemplateId: "#head", columnTemplate: true, templateId: "#check", textAlign: "center", width: 90 },

. . .

</script>

 

 

In the click event of the headercheckbox, the value of the content checkboxes are toggled. Please see the below code snippet.

 

<script type="text/javascript">

    $(function(){

        $("#headchk").click(function(){

            if($("#headchk").is(':checked'))

            {

                $(".rowCheckbox").prop('checked',true)

            }

            else

            {

                $(".rowCheckbox").prop('checked',false)

            }

        });

    });   

</script>

 

For your convenience we have included the above functionality also in the attached sample.

 

Please let us know if you need any further assistance.

 

Regards

Ragavee U S



Attachment: Links_1a072501.zip

Boriphuth Saensukphattraka
Replied On May 6, 2014 07:06 AM

Hi Ragavee,
Thank you for your support.This code is I looking for.

Ragavee U S [Syncfusion]
Replied On May 7, 2014 12:35 AM

Hi Boriphuth,

 

Thanks for your valuable update.

 

If you have any issues in the future, please get back to us we will be happy to assist you.

 

Please let us know if you would require any further assistance.

 

Regards

Ragavee U S


Boriphuth Saensukphattraka
Replied On May 9, 2014 12:52 PM

Hi Ragavee
Base on your sample code after I click on checkbox how can it's select datagrid row(single and multiple select).Can you update code for support this.
Best regard
Boriphuth

Ragavee U S [Syncfusion]
Replied On May 12, 2014 07:06 AM

Hi Boriphuth

 

Based on your request, we have modified the previous updated sample and the same can be downloaded from the attachment.

 

In the sample attached, we have set the selectionType property to multiple and in the change event of the column checkbox, have set the gridObj._multiSelectCtrlRequest = true;

 

Please refer the below code snippet:

 

<script>

    $(function () {

. . .

$("#Grid").ejGrid({

. . .

selectionType: "multiple",

});

var gridObj = $("#Grid").data("ejGrid");

gridObj._multiSelectCtrlRequest = true;

 

$("#Grid .rowCheckbox").change(function (e) {

   

    if (this.checked == false) {

        $("#headchk").prop('checked', false);

    }

   

    gridObj._multiSelectCtrlRequest = true;

   

    if ($('#Grid .rowCheckbox:checked').length == $('.rowCheckbox').length) {

        $('#headchk').prop('checked', true);

    }   

});

</script>

 

Please let us know if you need any further assistance

 

Regards

 

Ragavee U S



Attachment: Links_b6bb4370.zip

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.

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.

;