[Solved] How to Get Grid Clientside Object Using jQuery or Javascript

[Uzair]

Hi
I am Trying to Bind Grid Using jQuery. When I am Using This Code:

var grid =  $("#TestGrid").data("tGrid");

I did not Get anything.

The 'grid' Object is Undefined. I could not Understand How to Bind Data  Using Javascript. Here is the Complete Code.

//View Code

  <a href="#" id='bidn'> Click To Bind Data</a>

Html.Telerik().Grid<Sample_Project.Models.Items>().BindTo(Model)
         .Name("TestGrid")
         .Columns(cols =>
                     {
                          cols.Bound(col => col.ID).Title("ID");
                          cols.Bound(col => col.Name).Title("Item Name");
                          cols.Bound(col => col.Rate).Title("Rates");
                          cols.Bound(col => col.Description).Title("Description");
                          cols.Bound(col => col.Status).Title("Status");

                     }).Render();


 }

//Java Script

var bindGridData = function () {

    var TestData = [

    { ID: 1, Name: "Item Name 1", Rate: 34, Description: "The Description", Status: "Active" },

    { ID: 2, Name: "Item Name 2", Rate: 43, Description: "No Description Avilable", Status: "In Active" },

    { ID: 3, Name: "Item Name 3", Rate: 54, Description: "Unrated", Status: "Active" }

    ];

    var grid = $("#TestGrid");

    var gridData = grid.data('tGrid');//ERROR: The 'gridData' is Undefined.

    grid.dataBind(TestData); //No dataBind Method is Exist.


 

 

};

Thank You

[A]

Hi,
I have also been facing the same issue.  I am trying to the post the data back to the server after the changes using form submit.  for this, i am trying to get the grid data and stringify the grid data and sending it to the controller.  When I tried to the get the grid data, I am getting as "Undefined"

Can anyone assist on this.  Thanks in advance.

Below is my grid:

Html.Telerik() .Grid<CPE.HIS.Services.Spec.DiagnosisService.DiagnosisSpecialityDto>(Model.Specialities)
                       .Name("ParentSpecialities")
                       .Columns(columns =>
                        {
                        columns.Bound(o => o.ServiceName).Title("Specialty").Width(200);
                        columns.Bound(o => o.IsCommonDiagnosis).Title("Common Problem")
                            .HtmlAttributes(new { style = "text-align:center;" })
                            .ClientTemplate("<input type='checkbox' name='checkedRecords' value='<#= SpecialityID #>'/>");
                        })
                        .Render();

Below is my jQuery:

            var grid = $("#ParentSpecialities").data("tGrid");
            var data = grid.data;  -- Here, I am getting grid.data as undefined
            var associatedSpecialities = JSON.stringify(data);

[A]

Hi All,

I have solved this issue by taking:
1.  The innerhtml of the grid.
2.  Converting that into json string format.
3.  Assign that to the property.
4.  Use that property value from the model in the controller when we submit the form.

The above steps solved our issue.

If anyone has any better solution than this when using client side binding, then do post it.

Thanks

[Praveen]

please send the code.i have the same issue.