Simple problem with clienttemplate and checkbox

[Fred]

Hi.  I am having the hardest time binding a checkbox properly with the grid.

When i first launch the view, i get the proper info in the checkbox column.

However as soon as i do a client side operation ( suck a paging) i lose my values and formatting (checkbox becomes writable, not readonly)

Anyone can help ?

Thanks

 

Html.Telerik.Grid(Model).Name("Grid") _

.ColumnContextMenu() _

.DataKeys(


Sub(keys)

keys.Add(


"Id")




End Sub) _

.ToolBar(


Sub(commandes)

commandes.Insert.ButtonType(type).ImageHtmlAttributes(


New With {.style = "margin-left:0"})




End Sub) _

.DataBinding(


Sub(databinding)

databinding.Ajax() _

.Select(


"_AjaxIndex", "CommandesProgres") _

.Insert(


"_InsertAjaxEditing", "CommandesProgres") _

.Update(


"_AjaxEdit", "CommandesProgres") _

.Delete(


"_DeleteAjaxEditing", "CommandesProgres")




End Sub) _

.Columns(


Sub(column)

column.Bound(


"Code").Width(50)

column.Bound(


"Description").Width(100)

column.Bound(


Function(col) col.ParDefaut).Width(50).HtmlAttributes(New With {.style = "text-align: center;"}).ClientTemplate("<input type='checkbox' disabled='disabled' name='checkbox' value=<#= ParDefaut #> />")

column.ForeignKey(


Function(col) col.TpId, ViewBag.typeProgress, "Id", "Description").Width(100)

column.ForeignKey(


Function(col) col.CtId, ViewBag.commandesTypes, "Id", "Description").Width(100)

column.Command(


Sub(commandes)

commandes.Edit.ButtonType(type)

commandes.Delete.ButtonType(type)




End Sub).Width(30).Title("Commands")




End Sub) _

.Editable(


Function(ee) ee.Mode(mode)) _

.Pageable _

.Scrollable _

.Sortable() _

.Filterable _

.ClientEvents(


Function(events) events.OnRowDataBound("onRowDataBound")).Render()







End Code



<



script type="text/javascript">




function onRowDataBound(e) {




var dataItem = e.dataItem;




var $checkbox = $(e.row).find(':checkbox');

$checkbox.val(dataItem.ParDefault);




if (dataItem.ParDefault) {

$checkbox.attr(


'checked', true);

}

}

</script>

 

[Petur Subev]

Hello Fred,

When you are passing a collection to the constructor of the Grid it seems the initial binding is done correctly.
I assume that the behavior you described is caused by the JavaScript function handling the OnDataBoundEvent and the client template using the client expression. A common problem is that the type of the Boolean property is considered as String. You can try to check the value like this:
 

if (dataItem.ParDefault=='true') {
//...

I hope this helps.

All the best,
Petur Subev
the Telerik team

[Fred]

thanks for the suggestion.

I tried what you suggested and i still get the same problem.

First load... i get the value et state of checkbox as i want it, i.e with value and disabled.

after paging, checkbox has no values in it.  All is false



<script type="text/javascript">
    function onRowDataBound(e) {

        var dataItem = e.dataItem;

        var $checkbox = $(e.row).find(':checkbox');

        $checkbox.val(dataItem.ParDefault);

        if (dataItem.ParDefault=='true') {

            $checkbox.attr('checked', true);

        }

    }
</script>

my binding code is:

    column.Bound(Function(col) col.ParDefaut).Width(50).HtmlAttributes(New With {.style = "text-align: center;"}).ClientTemplate("<input type='checkbox' disabled='disabled' name='checkbox' value=<#= ParDefaut #> />")
                

[Petur Subev]

Hello Fred,

In order to assist you I will need a sample isolated project showing your current logic and setup, so I can check what causes this behavior.
Thank you for the understanding and cooperation.

Regards,
Petur Subev
the Telerik team

[Fred]

the entire zipped project is 10 megs.. without my database....

i will refactor try to make a small project without dataaccess that has the same problem and post it here a little bit later

[Fred]

OK   i removed all database access and only left the important stuff

http://localhost:38525/CommandesProgres# is the problem page

project is there

http://dl.dropbox.com/u/50972513/TelerikTest.rar

thanks

[Petur Subev]

Hi Fred,

The problem is caused by a typo in your statement:

• ParDefaut  is used into your model
• ParDefault is used in the JavaScript function

Also you can use the our Ticketing system once you have logged in.

All the best,
Petur Subev
the Telerik team

[Fred]

Thanks for your quick reply.
I changed from

ParDefault to 
ParDefaut

but it still doesnt work on my end.

Does it work on your side... 

however, when i changed

if (dataItem.ParDefaut == 'true')

to

if (dataItem.ParDefaut)

it started working :)

i guess when you have never done something right one time, its hard to know how close you are

Thanks a lot

last thing i need to figure out is if i have more than one checkbox, how i repeat the javascript logic to treat all of them... my javascript knowledge being what it is, i should find it before 2013 ;)

[Fred]

yeah.. this doesnt work

 

　

<

 

 

script type="text/javascript">

 

function onRowDataBound(e) {

 

var dataItem = e.dataItem;

 

var $checkbox = $(e.row).find(':checkbox');

$checkbox.val(dataItem.ParDefaut);

 

if (dataItem.ParDefaut) {

$checkbox.attr(

 

'checked', true);

}

 

var $checkbox2 = $(e.row).find(':checkbox');

$checkbox2.val(dataItem.PourProducteur);

 

if (dataItem.PourProducteur) {

$checkbox2.attr(

 

'checked', true);

}

　

}

</

 

 

script>

i am still pretty green in javascript, sadly...

[Fred]

THIS WORKS!!!

<

 

 

script type="text/javascript">

 

function onRowDataBound(e) {

 

var dataItem = e.dataItem;

 

// var $checkbox = $(e.row).find(':checkbox');

 

var $chkParDefaut = $(e.row).find('#chkParDefaut');

 

var $chkPourProducteur = $(e.row).find('#chkPourProducteur');

 

var $chkPourDistributeur = $(e.row).find('#chkPourDistributeur');

 

var $chkFermeLaCommande = $(e.row).find('#chkFermeLaCommande');

　

　

　

　

　

 

if (dataItem.ParDefaut) {

$chkParDefaut.attr(

 

'checked', true);

}

 

if (dataItem.PourProducteur) {

$chkPourProducteur.attr(

 

'checked', true);

}

 

if (dataItem.PourDistributeur) {

$chkPourDistributeur.attr(

 

'checked', true);

}

 

if (dataItem.FermeLaCommande) {

$chkFermeLaCommande.attr(

 

'checked', true);

}

　

　

　

}

</

 

 

script>

[Christoph Weber]

Congratulation to your solution, but...

i don't think this is a good one. In my opinion it should be able to bind checkboxes directly.

@(
 Html.Telerik().Grid(Model.AngebotStichtage)
 .Name("gridAngebotStichtag")
 
 .Columns(columns =>
 {
       columns.Bound(x => x.SomeDateTimeValue).Title("This one works great!").Format("{0:d}");
       columns.Bound(x => x.SomeBooleanGuy).Title("This one doesnt...");  
 })

 .DataBinding(dataBinding => dataBinding.Ajax().Select("TGridGetFu", "ControllerName"))
 .Pageable(paging => paging.PageSize(10))
 .PrefixUrlParameters(true)
 .Localizable("de-DE")
)

Problem here is that i need to sort the grid. I found examples with working checkboxes, but the examples sorted via postback and thats no possible way because our grid is inside a modal dialogue. The behaviour is the following:
First load shows the checkboxes just fine, but after any client-side action (paging etc...) we get a "true" or "false" instead of a checkbox.

So please Telerik provide a solution WITHOUT workaround (we already did a workaround by encapsulating the bool with a string that returns bool ? "yes" : "no"...) or add this feature into your product.

kind regards,