How to add link in Grid cell?

[Boriphuth Saensukphattraka]

Hello

Please find the detail picture in the attached file.

Attachment: Grid_34f451dc.zip

[Ragavee U S]

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]

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]

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]

Hi Ragavee,

Thank you for your support.This code is I looking for.

[Ragavee U S]

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]

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]

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