[Solved] Q1 2010.1.222 - Problems with Grid Row client side selection ..

[IQworks]

  Hi, 
    I am trying to pattern my grid after this demo ..... http://demos.telerik.com/aspnet-mvc-beta/grid/selectionclientside 

    My Grid looks like this ... 

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<BCAnalytics.Models.CompanyVM>>" %>
<%--fx 20100304 - Added datepicker and calendar min js files to keep grid row height correct for
version 2010.1.222 * ALSO, COMMENT OUT THESE JS FILES TO USE JQUERY INTELLISENCE --%>
 <script src="../../Scripts/2010.1.222/telerik.datepicker.min.js" type="text/javascript"></script>
 <script src="../../Scripts/2010.1.222/telerik.calendar.min.js" type="text/javascript"></script>
  <%if (false)
  {%>
  <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 <% }%>
   <h3><%= Html.ActionLink((String)Resources.BCAResources.stdClose, "Index", "Work", new { workindex = 0 }, null)%>
   <br />
   <i style="color:Red;"><%=Session["iqResult"]%> </i> </h3>

        <%= Html.Telerik().Grid(Model)
              .Name("CompanyGrid")
              .Columns(columns =>
                {

                    columns.Add(o => o.cCompanyName).Width(185).Title((string)Resources.BCAResources.coxCompany);
                    columns.Add(o => o.cPhone).Title((string)Resources.BCAResources.stdPhone).Width(75);
                    columns.Add(o => o.cGroupCode).Title((string)Resources.BCAResources.coxGroupCode).Width(100);
                    columns.Add(o => o.cEmail).Format(Html.Mailto("{0}", "{0}")).Encoded(false).Width(150);
                    columns.Add(o => o.cDateUpdated).Format("{0:MM/dd/yyyy}").Width(85).Title((string)Resources.BCAResources.stdUpdated);
                    columns.Add(o => o.cCompanyNo).Format(Html.ActionLink((String)Resources.BCAResources.stdEdit, "Index", "Work", new { workindex = 2, OtherParms = "{0}" }, null).ToString()).Encoded(false).Title("").Width(32).Filterable(false);
                    columns.Add(o => o.cCompanyNo).Format(Html.ActionLink((String)Resources.BCAResources.stdDelete, "CompanyDelete", new { Id = "{0}" }, null).ToString()).Encoded(false).Title("").Width(50).Filterable(false);

                })
               .Selectable()
               .ClientEvents(events => events.OnRowSelected("onRowSelected"))
               .DataBinding(dataBinding => dataBinding.
                    Ajax().Select("_AjaxBindingCompany", "Company"))
               .RowAction(row =>
               {
                   rowrow.Selected = row.DataItem.cCompanyName.Length>0;
               })
               .Pageable()
               .Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
               .Scrollable(scrolling => scrolling.Height(253))
               .Filterable()%>

       <p><%= Html.ActionLink((String)Resources.BCAResources.coxCreateNewCompany, "Index", "Work", new { workindex = 2, OtherParms = "Create" }, null)%></p>
<script type="text/javascript">
   function onRowSelected(e) {
        var customerN = e.row.cells[0].innerHTML;
        alert("rowSelected e " +  customerN);
    }

</script>

    Basically I am trying to get the alert to who my selected company name ?  With this code, three things happen ...
1 - I cannot even page forward using my action.
2 - My grid has a green background.
3 - My next page number shows up in grey and when I click on it, the next screen is a full page with no formatting.

This is my action ...

  // do the ajax binding
        [GridAction]
        public ActionResult _AjaxBindingCompany()
            {
            IEnumerable<CompanyVM> model = GetCompanies();
            return View(new GridModel
            {
                Data = model
            });

            }

    Thanks for any advice

[Atanas Korchev]

Hello IQworks,

As I said in another forum thread the JavaScript files should be included elsewhere. Please follow the instructions and we shall see how it goes. I think there is now a JavaScript error which breaks the whole page.

Also the RowAction method is executed on the server side so the changes you are making will have no effect for client-side (ajax) bound rows. For that you need to use the OnRowDataBound client-side event.

Kind regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[IQworks]

Hi Atanas,
    Thank you for the instructions, they were in another email i also recieved this A.M.. My telerik.js files are now in ScriptRegistrar.
    After debugging, the RowAction does work here. It is executed when the grid gets populated from the server as you said. It works when the page is loaded so you can do things with the row. In my example, i am setting the row as selected. The way this test worked, every row was set to "row.selected", thats was why my MVC Grid was turning green (hay.css), every row was being selected. 
       Also, this is how I coded clientside OnRowSelected and OnRowDataBound to work client side.
       When you click on a row, OnRowSelected shows its alert. When you click page forward, each record returned shows up in the OnRowDataBound alert.  I thought I would post my testing code in case it could help someone.      

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<BCAnalytics.Models.CompanyVM>>" %>

  <%if (false)
  {%>
  <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 <% }%>
 <script type="text/javascript">

 /* This runs when a row is selected */
     function OnRowSelected(e) {
     var customerN = e.row.cells[0].innerHTML;
     alert("rowSelected e " + customerN);
 }

 /* This runs when data is being returned, like if you click page forward. */
 function OnRowDataBound(e) {
     var customerN = e.row.cells[0].innerHTML;
     alert("Row is DataBound e " + customerN);
 }

</script>
   <h3><%= Html.ActionLink((String)Resources.BCAResources.stdClose, "Index", "Work", new { workindex = 0 }, null)%>
   <br />
   <i style="color:Red;"><%=Session["iqResult"]%> </i> </h3>

        <%= Html.Telerik().Grid(Model)
              .Name("CompanyGrid")
              .Columns(columns =>
                {

                    columns.Add(o => o.cCompanyName).Width(185).Title((string)Resources.BCAResources.coxCompany);
                    columns.Add(o => o.cPhone).Title((string)Resources.BCAResources.stdPhone).Width(75);
                    columns.Add(o => o.cGroupCode).Title((string)Resources.BCAResources.coxGroupCode).Width(100);
                    columns.Add(o => o.cEmail).Format(Html.Mailto("{0}", "{0}")).Encoded(false).Width(150);
                    columns.Add(o => o.cDateUpdated).Format("{0:MM/dd/yyyy}").Width(85).Title((string)Resources.BCAResources.stdUpdated);
                    columns.Add(o => o.cCompanyNo).Format(Html.ActionLink((String)Resources.BCAResources.stdEdit, "Index", "Work", new { workindex = 2, OtherParms = "{0}" }, null).ToString()).Encoded(false).Title("").Width(32).Filterable(false);
                    columns.Add(o => o.cCompanyNo).Format(Html.ActionLink((String)Resources.BCAResources.stdDelete, "CompanyDelete", new { Id = "{0}" }, null).ToString()).Encoded(false).Title("").Width(50).Filterable(false);

                })
               .Selectable()
               .ClientEvents(events => events.OnRowSelected("OnRowSelected"))
               .ClientEvents(events => events.OnRowDataBound("OnRowDataBound"))
               .DataBinding(dataBinding => dataBinding.
                    Ajax().Select("_AjaxBindingCompany", "Company"))
                /* After the data is bound to the Grid control, then it appears here.
                 * This happens also when page is loaded & after a click.
                 * .RowAction(row =>
                 {  // If the companyname.length>0, set row as selected.
                     rowrow.Selected = row.DataItem.cCompanyName.Length>0;
                 })  */
               .Pageable()
               .Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
               .Scrollable(scrolling => scrolling.Height(253))
               .Filterable()%>


       <p><%= Html.ActionLink((String)Resources.BCAResources.coxCreateNewCompany, "Index", "Work", new { workindex = 2, OtherParms = "Create" }, null)%></p>

    I hope I described things correctly and its not confusing. 
   On to my next task, using hover on a row to display all of its data in a tooltip. Now that I can get a row into a javascript function, i can try to use one of the many jQuery tooltip functions I have seen.  

   Thanks as always for your advice