[Solved] Telerik Combobox inside a Telerik Grid

[Ramesh kumar Kuppusamy]

Does anyone have some sample code or point me to some documentation on how to use Clienttemplate in a MVC3 application using the Telerik Combobox inside a Telerik Grid, the Razor engine and Visual Basic? I have searched and searched and cannot find anything.

I am using the Telerik Version "ASP.NET MVC Q1 2011 SP1"

[Douglas]

Did you figure this out?

I'm having the same problem, where I have a Telerik Grid that is being ajax bound and I am using a ViewModel for my data source.

Thanks.

Doug

[Ruckumane]

hi,

i ll post my code below. if it works pls mark it as answer.

@model

 

IEnumerable<EditorTemplateSample.Models.GetNLAggrTrades_Result>

 

@

 

using Telerik.Web.Mvc.UI;

 

@

 

using EditorTemplateSample.Models

 

@

 

using System.Collections;

 

　

<

 

 

script type="text/javascript">

 

 

 

var index = 0;

 

 

 

function OnRowDataBound(e) {

 

 

$(e.row).find(

 

'#SellerID').val(e.dataItem['SellerID']);

 

$(e.row).find(

 

'#TrancheType').val(e.dataItem['TrancheType']);

 

$(e.row).find(

 

'#InterestType').val(e.dataItem['InterestType']);

 

$(e.row).find(

 

'#AccrualType').val(e.dataItem['AccrualType']);

 

$(e.row).find(

 

'#Index1Code').val(e.dataItem['Ind1Code']);

 

$(e.row).find(

 

'#Split').val(e.dataItem['Split']);

 

$(e.row).find(

 

'#Index2Code').val(e.dataItem['Ind2Code']);

 

 

}

 

 

function convertToDate(date) {

 

 

 

var varDate = new Date(date);

 

varDate = (varDate.getMonth() + 1) +

 

'/' + (varDate.getDate()) + '/' + varDate.getFullYear();

 

 

 

return varDate;

 

}

　

 

 

function onDataBinding(args) {

 

 

 

var grid = $('#NotelineFeedAggrGrid').data('tGrid')

 

 

 

var fromDate = $('#fromDate').data('tDatePicker');

 

 

 

var toDate = $('#toDate').data('tDatePicker');

 

fromDate = convertToDate(fromDate.value());

toDate = convertToDate(toDate.value());

args.data = $.extend(args.data, { fromDate: fromDate, toDate: toDate });

index = (grid.currentPage - 1) * grid.pageSize;

}

 

 

function onEdit(e) {debugger;

 

$ddl = $(e.form).find(

 

'#Split');

 

 

 

if ($ddl.length > 0) {

 

 

 

var ddl = $ddl.data('tDropDownList');

 

ddl.fill(

 

function () {

 

 

 

if (e.dataItem['Split'] != null) {

 

ddl.value(e.dataItem[

 

'Split']);

 

}

});

}

 

 

var index = $(e.form).find('tr.t-grid-edit-row').index();

 

$(

 

"#rowIndex").val(index+1);

 

 

 

var grid = $(this).data('tGrid');

 

 

 

var rowData = grid.data[index];

 

// var indexCol = $('.t-grid-header').find('th:contains("No.")').index();

// var content = $('.t-grid-edit-row').find('table > tbody').find('td:eq(' + indexCol + ')').find('input').val();

//

// var content = $('.t-grid-edit-row').find('table > tbody').find('td:eq("No.")').find('input').val();

}

　

</

 

 

script>

 

@(Html.Telerik().Grid<EditorTemplateSample.Models.

 

GetNLAggrTrades_Result>()

 

.Name(

 

"NotelineFeedAggrGrid")

 

.DataKeys(dataKeys => dataKeys.Add(p => p.IssueID))

.ClientEvents(events => events.OnRowDataBound(

 

"OnRowDataBound"))

 

.ClientEvents(events => events.OnDataBinding(

 

"onDataBinding"))

 

.ToolBar(commands =>

{

commands.Insert();

commands.SubmitChanges();

})

.Columns(columns =>

{

columns.Bound(o => o.TrancheID).Title(

 

"No.").ClientTemplate("<#= ++index #>").Width(80).ReadOnly(true);

 

 

 

//columns.Bound(o => o.TrancheID).Title("No.").ClientTemplate("<#= getIndexCount(++index) #>").Width(80).ReadOnly(true);

 

columns.Bound(c => c.TrancheID).Width(80);

columns.Bound(c => c.Split).Title(

 

"Split").Width(230);

 

 

 

//columns.Bound(c => c.Split).Title("Split").ClientTemplate(Html.DropDownList("Split", (SelectList)(ViewData["Split"]))

 

 

 

// .ToHtmlString()).Width(180);

 

columns.Bound(c => c.SellerID).Title(

 

"Seller ID").ClientTemplate(Html.DropDownList("SellerID", (SelectList)(ViewData["SellerID"]))

 

.ToHtmlString()).Width(180);

columns.Bound(c => c.IssuanceDate).Width(130);

columns.Bound(c => c.MaturityDate).Width(120);

columns.Bound(c => c.NetProceeds).Width(80);

columns.Bound(c => c.TodaysIssuance).Width(60);

columns.Bound(c => c.TradeType).Title(

 

"Tranche Type").ClientTemplate(Html.DropDownList("TrancheType", (SelectList)(ViewData["TrancheType"]))

 

.ToHtmlString()).Width(180);

columns.Bound(c => c.Dealer).Width(120);

columns.Bound(c => c.IntDiscRate).Width(120);

columns.Bound(c => c.InterestType).Title(

 

"Int Type").ClientTemplate(Html.DropDownList("InterestType", (SelectList)(ViewData["InterestType"]))

 

.ToHtmlString()).Width(180);

columns.Bound(c => c.AccrualType).Title(

 

"Accrual Type").ClientTemplate(Html.DropDownList("AccrualType", (SelectList)(ViewData["AccrualType"]))

 

.ToHtmlString()).Width(180);

columns.Bound(c => c.Ind1Code).Title(

 

"Index 1 Code").ClientTemplate(Html.DropDownList("Index1Code", (SelectList)(ViewData["IndexCode1"]))

 

.ToHtmlString()).Width(180);

columns.Bound(c => c.Ind2Code).Title(

 

"Index 2 Code").ClientTemplate(Html.DropDownList("Index2Code", (SelectList)(ViewData["IndexCode2"]))

 

.ToHtmlString()).Width(180);

columns.Bound(c => c.NLBatchID).Width(130).Visible(

 

false);

 

columns.Bound(c => c.AdjIntFlag).Width(130).Visible(

 

false);

 

columns.Bound(c => c.InsertedFlag).Width(130).Visible(

 

false);

 

columns.Bound(c => c.NumSpilts).Width(130).Visible(

 

false);

 

columns.Command(commands => commands.Edit()).Title(

 

"Edit").Width(200);

 

})

.DataBinding(dataBinding => dataBinding.Ajax()

.Select(

 

"_NotelineAggrTrades", "EditGrid")

 

.Update(

 

"_update", "EditGrid")

 

 

 

//.Insert("_InsertAjaxEditing", "EditGrid")

 

)

.ClientEvents(events => events.OnEdit(

 

"onEdit"))

 

.Editable(editing => editing.Mode(

 

GridEditMode.InCell).DefaultDataItem(new GetNLAggrTrades_Result

 

{

 

 

//LastSupply = DateTime.Today

 

}))

.Pageable()

.Scrollable()

.Sortable()

)

　

　

<

 

 

input type="hidden" id="rowIndex" name="rowindex" />

 

my controller code is as follows,

public

 

 

ActionResult GridNotelineAggrTrades()

 

{

GetSellers();

GetSplit();

GetTrancheTypes(

 

"MONT", "POOL MB");

 

GetInterestType();

GetAccrualType();

GetIndex1Codes();

GetIndex2Codes();

 

 

return PartialView();

 

}

 

 

public void GetSellers()

 

{

 

 

//ViewData["SellerID"] = systemfeedstatusdb1.abcp_sellers.Select(e => new { sellerid = e.seller_id, seller_descr = e.seller_descr });

 

 

 

//{text = s.PaymentMethod, value = PaymentMethodID })

 

 

 

var query = db.abcp_sellers.Select(c => new { c.seller_id, c.seller_descr });

 

ViewData[

 

"SellerID"] = new SelectList(query.AsEnumerable().ToList(), "seller_id", "seller_descr");

 

}

 

 

public void GetAccrualType()

 

{

 

 

List<GetAccrualType_Result> result = new List<GetAccrualType_Result>();

 

 

 

foreach (var i in this.db.GetAccrualType())

 

{

result.Add(i);

}

ViewData[

 

"AccrualType"] = new SelectList(result.AsEnumerable().ToList(), "accrualid", "accrualdescription");

 

}

 

 

public void GetSplit()

 

{

 

 

var list = new SelectList(new[]

 

{

 

 

new {Text="Y",Value="Y"},

 

 

 

new{Text="N",Value="N"}

 

},

 

 

"Text", "Value");

 

ViewData[

 

"Split"] = new SelectList(list, "Text", "Value");

 

}

 

 

public void GetInterestType()

 

{

 

 

var list = new SelectList(new[]

 

{

 

 

new {Text="Interest",Value="Int"},

 

 

 

new{Text="Discount",Value="Dsc"}

 

},

 

 

"Text", "Value");

 

ViewData[

 

"InterestType"] = new SelectList(list, "Text", "Value");

 

}

 

 

public void GetTrancheTypes(string IssueID, string SellerID)

 

{

 

 

var TrancheType = (from x in db.abcp_tranche_types

 

 

 

join y in db.abcp_tranche_setup

 

 

 

on new { x.tranche_type }

 

 

 

equals new { y.tranche_type }

 

 

 

where ((y.issue_id.Equals(IssueID)) && (y.seller_id.Equals(SellerID)))

 

 

 

select x);

 

ViewData[

 

"TrancheType"] = new SelectList(TrancheType.AsEnumerable().ToList(), "tranche_type", "tranche_name");

 

}

 

 

public void GetIndex1Codes()

 

{

 

 

var IndexCode = (from x in db.index_codes select x);

 

ViewData[

 

"IndexCode1"] = new SelectList(IndexCode.AsEnumerable().ToList(), "index_code", "index_descr");

 

}

 

 

public void GetIndex2Codes()

 

{

 

 

var IndexCode = (from x in db.index_codes select x);

 

ViewData[

 

"IndexCode2"] = new SelectList(IndexCode.AsEnumerable().ToList(), "index_code", "index_descr");

 

}

[Douglas]

Ok, so this what I have so far:

.Columns(columns =>
    {
        columns.Bound(o => o.ItemNmbr).Width(65);//.ClientTemplate("<label  name='ProductIdentifier' />");
        columns.Bound(o => o.Description).Hidden(true);
        columns.Bound(o => o.Description).Title("List Values").ClientTemplate(Html.DropDownList("Description", (SelectList)(ViewData["SpecialType"])).ToHtmlString()).Width(100).ReadOnly();
        columns.Bound(o => o.Start_Date).Width(75).Format("{0:d}");
        columns.Bound(o => o.End_Date).Width(75).Format("{0:d}");
        columns.Bound(o => o.PromotionText).Width(75);

        columns.Command(commands => commands.Delete()).Width(125).Title("Delete");
    })

Along with some jQuery to set the dropdownlist:

function OnRowDataBound(e) {
      var value = $(e.row).find("#Description").closest('td').prev('td').html();
      $(e.row).find("#Description option:contains(" + value + ")").attr('selected', 'selected');
  }

A couple of things are askew though:

1. When I click the dropdown box created by the ClientTemplate for Description, the drop down goes away and a text box appears with that row's description value in the text box.
2. How is a changed value posted back to the server to update a record?  IE: say, RED was selected in the dropdownlist and I change it to BLACK. How does the underlying viewmodel know that value has changed?  If i just keep the bound column it seems to know that value has been changed, however with the client template, it doesn't seem to work.

Thanks.

Doug

[Ruckumane]

create a editortemplate and inside that create a new view. in the place the below code

@

 

using Telerik.Web.Mvc.UI

 

<

 

 

script type="text/javascript">

 

 

 

function onSplitChange(e) {

 

// $('#NotelineFeedAggrGrid').data('tGrid').addRow();

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

// var newRow = $("#Grid .t-grid-new-row"); // get the last added row

//

 

 

//// $('#NotelineFeedAggrGrid').data('tGrid').insertRow(newRow);

 

 

 

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

 

$.ajax({

type:

 

"POST",

 

url:

 

"/EditGrid/_InsertAjaxEditing",

 

data:

 

"rowIndex=" + $("#rowIndex").val(),

 

success:

 

function (msg) {

 

 

 

//debugger;

 

// alert("Data Saved: " + msg);

 

 

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

 

grid.rebind();

}

});

}

</

 

 

script>

 

@(Html.Telerik().DropDownList()

.Name(

 

"Split")

 

.BindTo(

 

new SelectList((System.Collections.IEnumerable)ViewData["Split"], "Text", "Value"))

 

.ClientEvents(c => c.OnChange(

 

"onSplitChange"))

 

)


this will show when OnEdit event is triggred as specified in previous sample. From here to we can call our controller method as specified url: "/EditGrid/_InsertAjaxEditing" in this line.

[Douglas]

Your answer doesn't seem to address how the dropdownlist is bound to the grid.

Here's my code altered per your example:

.Columns(columns =>
{
    columns.Bound(o => o.ItemNmbr).Width(65);//.ClientTemplate("<label  name='ProductIdentifier' />");
    columns.Bound(o => o.Description).ClientTemplate(Html.Telerik().DropDownList().Name("Split").BindTo(new SelectList((System.Collections.IEnumerable)ViewData["SpecialType"], "Text", "Value")).ClientEvents(o => o.OnChange("onSplitChange")).ToHtmlString());
    columns.Bound(o => o.Start_Date).Width(75).Format("{0:d}");
    columns.Bound(o => o.End_Date).Width(75).Format("{0:d}");
    columns.Bound(o => o.PromotionText).Width(75);
    columns.Command(commands => commands.Delete()).Width(125).Title("Delete");
})

And Jscript:

function onSplitChange(e) {
    alert();
    var grid = $("#Grid").data("tGrid");
    $.ajax({ type: "POST", url: "/EditGrid/_InsertAjaxEditing", data: "rowIndex=" + $("#rowIndex").val(), success: function (msg) {
        alert("Data Saved: " + msg);
        var grid = $("#Grid").data("tGrid");
        grid.rebind();
    }
    });
}

However, this is not working, in that again, when I click on the dropdown, a textbox appears instead of the drop down scrolling a list of values and the onSplitChange(e) is not getting called.

[Douglas]

Still haven't figured this out...

Anyone?

[Jesus Rossano]

Create an editor template and annotate the viewmodel property with UIHint indicating the name of the editor template.