[Solved] inline editing using checkbox on ajax binding

[Marco]

hello.

i'm trying to use client template with checkbox to show my database bit values. but i'm not getting the expected behavior.

i have my client template like this 

columns.Bound(o => o.pao).ClientTemplate("<input type='checkbox' name='checkedPao' checked='<#= pao #>' value='<#= pao #>' DISABLED />").HtmlAttributes(new { style = "text-align:center" });

but this way as it will be always checked as i expect.

if i remove the checked property none of the checkbox will be checked... as i expect also.

as display  template does't work in ajax binding and i can't use <%= html.CheckBox(...) %> on client template how can i get this working.

and on edit mode i allways get my check box uncheked?

someone already try this? how can i make it work?

best regards

Marco

[Atanas Korchev]

Hi Marco,

Use the OnRowDataBound event to set the checked property based on the value from your datasource:

function onRowDataBound(e) {
      var dataItem = e.dataItem;
      var $checkbox = $(e.row).find(':checkbox');
      $checkbox.val(dataItem.pao);
      if (dataItem.pao) {
        $checkbox.attr('checked',true);
      }
}

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.

[Marco]

hello Atanas.


thank you for your reply.

this works for client templete but how can i preserve the state of the check box from view mode to edit mode?

when i pass to edit mode my check box pass to unchecked.

how can i preserve the state?

i have more then one check box and i want to check it related to its speficic property. can i make a loop from alll checkbox validate its property and aply related value?

best regards.
Marco 

[Atanas Korchev]

Hi Marco,

You have discovered a bug with boolean editing in ajax binding mode. The grid should have correctly populated the checkbox. I managed to fix the bug. To apply the fix open grid.editing.js for editing and locate the following code:

if (this.editor)
     cells.eq(i).find(':input[name="' + this.member + '"]')
          .val(this.edit(dataItem) + "");

and replace it with:

if (this.editor)
 cells.eq(i).find(':input[name="' + this.member + '"]')
    .val(this.edit(dataItem) + "")
    .end()
    .find(':checkbox[name="' + this.member + '"]')
    .attr('checked', this.edit(dataItem) == true);

Also find this:

var values = {};
$tr.find(':input').each(function() {
     values[this.name] = $(this).val();
});

and add the following lines after that block of code

$tr.find(':checkbox').each(function() {
     values[this.name] = $(this).attr('checked');
});

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.

[Marco]

hello Atanas.

i have changed the code like you told me to do, but now all check boxes stay checked.

another issue: i'm using onRowDataBound event, witch means that i only get the checkbox checked on the initial binding after that when i update, insert or make other grid function all checkboxes stay unchecked.

and on edit mode all of then stay checked.

see the attached images please.

Can you send-me a sample please.

Best Regards 

[Atanas Korchev]

Hi Marco,

I am sending a working sample. Use the teleri.grid.editing.js file from the Scripts folder. It contains the aforementioned fixes.

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.

[Marco]

hello Atanas.

Almost there, only one important thing.  did you try to update one row that have the check box unchecked?

you will get a validation error saying that the active field is required...

do you know how to avoid this issue?

best regards

Marco

[Atanas Korchev]

Hi Marco,

This was due to a problem with validation of boolean fields. ASP.NET MVC always emits required validation rules for booleans. The microsoft validation library is skipping those. However the jquery.validate plugin which the MVC grid is using does not. I patched our code to skip boolean fields as well. Find attached the modified project and use telerik.grid.editing.min.js from it.

Sincerely yours,
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.

[Jack Ma]

Yeah, this is exactly the problem what I encountered. 

[Jack Ma]

Hi Marco,

    Have you solved the checkbox state problem? Would you please share your solution on this matter? I have encountered the same problem as you described. 

   Actually my scenario is very simple, a grid with 3 columns, two string column and the other is bool column. I'm using Ajax binding. 

   The behavior is, initial loading is good, can show the state base on the bool value. but once shift into edit mode, the original state will be lose, default as unchecked. this is not user friendly, means force user to check the checkbox again.  and after post the saving, refresh the grid, the grid seems missing somethings, it should be caused by the clienttemplate, but i'm not sure where is wrong.  and actually i have another problem is, I don't know how to capture the checkbox's state while saving the data, by default, the grid is binding to my model, and the value of the model will be automatically update once user input or update something in the grid, but the checkbox does no have such behavior, means even the checkbox is checked, the model's binding column to the checkbox will keep unchanged. How do you solve this? I attached my view code as below, please help to check. thanks in advance.

<%= Html.Telerik().Grid((IEnumerable<OrganizationCategory>)Model.OrganizationCategory)
        .Name("OrganizationCategory")
        .ToolBar(commands => commands.Insert())
        .DataKeys(keys => keys.Add(c => c.ID))
        .Columns(columns =>
        {
            columns.Bound(c => c.Name).Width("20%");
            columns.Bound(c => c.Description).Width("50%");
            columns.Bound(c => c.Isvalid)
                .Width("8%")
                .ClientTemplate("<input type='checkbox' disabled='disabled' name='itemIsvalid' value=<#= Isvalid? \"checked='checked'\" : \"\" #>' />")
                .HtmlAttributes(new { style = "text-align:center" });
            columns.Command(commands =>
            {
                commands.Edit();
                commands.Delete();
            }).Width("20%").Title("Commands");
        })
        .DataBinding(dataBinding =>
        {
            dataBinding.Ajax()
            .Select("DefineOrganizationCategory", "PlatformAdministration", new { ActionName = "Select" })
            .Insert("DefineOrganizationCategory", "PlatformAdministration", new { ActionName = "Insert" })
            .Update("DefineOrganizationCategory", "PlatformAdministration", new { ActionName = "Update" })
            .Delete("DefineOrganizationCategory", "PlatformAdministration", new { ActionName = "Delete" });
        })
        .Pageable()
        .Selectable()
        .ClientEvents(events => events.OnRowSelected("onRowSelected"))
        .Sortable()



%>

and also i attached the snapshot which show the initial loading and the afterposting 

[Adam Al-Ahmary]

I would like to request that this be in the next release please.

Thanks

[Bruce]

Has this fix made it into later versions?

I am using 2010.3.1110.235 of the tools and have the same issue with the checkbox always being required. I have verified that my scripts are all from the correct version.

Any suggestions?

[Atanas Korchev]

Hi Bruce,

 This problem should be fixed. At least I cannot reproduce it in our online demo.

Regards,
Atanas Korchev
the Telerik team

[Bruce]

I have discovered the issue with this.

I am using a tabstrip  and inside of each tab I have a grid. If the grid with the checkbox is the last tab, then it works just fine. However, if the grid is not in the last tab, the validation is executed. I spent quite a few hours identifying the issue and can reproduce exactly the behavior. If you take the sample application that works, place the working grid inside of a tabstrip (in the first tab), create a second tab and place another grid inside of it (with no check boxes), edit the grid with the checkbox it will fail, comment out the second tab, run again, it works fine.

Thanks for your attention with this.

Html.Telerik().TabStrip()

                .Name("AdminTabStrip")

                .Items(tabstrip =>

                {

                    tabstrip.Add()

                        .Text("Task Manager Groups")

                        .Content(() =>

                            {

                                Html.RenderPartial("TaskManagerGroupGrid");

                            });

                    tabstrip.Add()

                        .Text("Service Type Groups")

                        .Content(() =>

                            {

                                Html.RenderPartial("ServiceTypeGroupGrid");

                            });

                    tabstrip.Add()

                        .Text("Task Managers")

                        .Content(() =>

                        {

                            Html.RenderPartial("TaskManagerGrid");

                        });

                    tabstrip.Add()

                        .Text("Service Types")

                        .Content(() =>

                            {

                                Html.RenderPartial("ServiceTypeGrid");

                            });

                })

                .SelectedIndex(0)

                .Render();

Html.Telerik().TabStrip()

                .Name("AdminTabStrip")

                .Items(tabstrip =>

                {

                    tabstrip.Add()

                        .Text("Task Manager Groups")

                        .Content(() =>

                            {

                                Html.RenderPartial("TaskManagerGroupGrid");

                            });

                    tabstrip.Add()

                        .Text("Service Type Groups")

                        .Content(() =>

                            {

                                Html.RenderPartial("ServiceTypeGroupGrid");

                            });

                    tabstrip.Add()

                        .Text("Task Managers")

                        .Content(() =>

                        {

                            Html.RenderPartial("TaskManagerGrid");

                        });

                    tabstrip.Add()

                        .Text("Service Types")

                        .Content(() =>

                            {

                                Html.RenderPartial("ServiceTypeGrid");

  

Html.Telerik().TabStrip()
    .Name("AdminTabStrip")
    .Items(tabstrip =>
    {
        tabstrip.Add()
            .Text("Task Manager Groups")
            .Content(() =>
                {
                    Html.RenderPartial("TaskManagerGroupGrid");
                });
        tabstrip.Add()
            .Text("Service Type Groups")
            .Content(() =>
                {
                    Html.RenderPartial("ServiceTypeGroupGrid");
                });
        tabstrip.Add()
            .Text("Task Managers")
            .Content(() =>
            {
                Html.RenderPartial("TaskManagerGrid");
            });
        tabstrip.Add()
            .Text("Service Types")
            .Content(() =>
                {
                    Html.RenderPartial("ServiceTypeGrid");
                });
    })
    .SelectedIndex(0)
    .Render();

                         });

                })

                .SelectedIndex(0)

                .Render();

[Atanas Korchev]

Hello Bruce,

 I couldn't reproduce this problem. You can check the following:

1. The grids must have unique Name()
2. There should not be any JavaScript errors
3. All required JavaScript files must be loaded if the tabs a populated via ajax

Please attach a running sample if the problem persists.

Regards,
Atanas Korchev
the Telerik team

[Bruce]

I checked the application for uniqueness of names and javascript errors, everything checked out fine.

I have created an application that is functional that demonstrates this behavior and have attached the file.

I have documented how to duplicate the error in the code. Please let me know if you have any questions.

[Atanas Korchev]

Hi Bruce,

 The grid is using ModelMetadata.FromStringExpression("Col3", ViewContext.ViewData) behind the scenes which returns wrong results hence the validation problem.

You can try this:

<% Html.RenderPartial("Table1GridControl");

   Html.RenderPartial("Table2GridControl");
%>

<%: ModelMetadata.FromStringExpression("Col3", ViewContext.ViewData).ContainerType %>

It will display different results when one or two partial views are displayed. It seems the same property name (Col3) is what gets the ModelMetadata confused.

All the best,
Atanas Korchev
the Telerik team

[Bruce]

Hi Atanas,

My original project did not have column names that were the same. In the sample project I changed the column names in the first table to be different than the second one. When I did that the code that displays the ContanerType showed correctly if I was only displaying one grid. When I added the second grid, it didn't show anything. This indicates to me it is not the column name that is confusing it, but the fact that it can't find the column name at all, because it is only looking in the last grid for the column. Therefore the script that reads the metadata obviously doesn't find the required column and doesn't change the validation script from the default mvc validation scripts.

Does this mean that I can't:
1 Use more than one grid on a page,
2. use more than one partial view on a page,
3. if I can use grids defined in the same page (no partial views) that I can't have duplicate column names between the two tables represented by the grids?

Thanks.

[Atanas Korchev]

Hi Bruce,

The problem is that ModelMetadata.FromStringExpression fails to identify the right model type because the partial view is not strongly typed. Please note that this class (ModelMetadata) is built-in and we do not have control over it.

The simplest workaround which would fix the problem is to make your partial views strongly typed. I updated your project and now it works as expected.

Regards,

Atanas Korchev
the Telerik team

[Bruce]

Hi Atanas,

That worked perfectly. Thank you for your help.

Bruce