Kendo-UI MVC Error Attaching Events to Grid - kendo-ui

In an Asp.Net MVC Razor view, I'm trying to catch error events on my Kendo grid but it can't find the function 'onError' that I define below the grid, I've seen several examples of this working but can't get it to work in my application.
<div>
<div class="row">
<div class="col-xs-12">
#(Html.Kendo().Grid<OMG.StatisticsTool.Presentation.Web.Models.ManualStats.ManualStatsViewModel>()
.Name("manualStatsGrid")
.Columns(columns =>
{
columns.Bound(stat => stat.Statistic).Width(250);
columns.Bound(stat => stat.Description);
columns.Bound(stat => stat.Instructions).Width(250);
columns.Command(commands =>
{
commands.Edit();
commands.Destroy();
}).Title("Commands").Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource =>
dataSource.Ajax()
.Events(events => events.Error("onError"))
.Model(model =>
{
model.Id(p => p.Statistic);
model.Field(stat => stat.Description).Editable(false);
})
.Create(create => create.Action("Index_Create", "ManualStats"))
.Read(read => read.Action("Index_Read", "ManualStats"))
.Update(update => update.Action("Index_Update", "ManualStats"))
.Destroy(destroy => destroy.Action("Index_Destroy", "ManualStats"))
)
.Sortable()
.Scrollable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
)
</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-1">
<button class="btn btn-primary" type="submit" id="save">Save</button>
</div>
<div class="col-xs-4 col-md-1">
<button class="btn btn-primary" id="cancel">Cancel</button>
</div>
</div>
<script type="text/javascript">
function onError() {
console.log('had error');
}
</script>

The Grid initialization statement is wrapped in a document.ready handler, but if the Grid is loaded via Ajax from a partial view, it will be initialized immediately. If the onError function is defined afrer the Grid, its reference may not be available during Grid initialization. Try moving the function definition before the Grid.

Related

Kendo grid is too slow without paging. How can I faster kendo grid grouping on big data?

Kendo grid is too slow when grouping. My first grouping took one minute approximately and second grouping not working. when I made second grouping,I got maxjsonlength error. How can I faster kendo grid grouping on big data? My grid is clasic grid code without paging and virtual paging in mvc. and my data is select * from mytable. Data count is 2800. here is the code;
#(Html.Kendo().Grid<DoktorModel>()
.Name("DoktorGrid")
//.HtmlAttributes(new { style = "height: 600px;" })
.Columns(columns =>
{
columns.Bound(p => p.Fotograf).ClientTemplate(#"<img class='doktor_photo' src='" + Url.Content("~/Photo/#:data.Fotograf#") + "'/>").Width(100).Title("Fotoğraf").Filterable(false).IncludeInMenu(false);
columns.Bound(p => p.Ad).Width(200).ClientGroupHeaderTemplate("Ad: #= value # (Sayı: #= count#)");
columns.Bound(p => p.Soyad).Width(200);
columns.Bound(p => p.DogumTarihi).Format("{0:dd/MM/yyyy}").Width(150);
...
})
.ToolBar(X => X.Template(#<text>
<div class="toolbar">
<div>
<a class="k-button k-button-icontext k-grid-excel" href="\#"><span class="k-icon k-i-excel"></span>Export to Excel</a>
<a class="k-button" id="GrupAc"><span class="k-icon k-i-close"></span>Grupları Aç</a>
<a class="k-button" id="GrupKapat"><span class="k-icon k-i-close"></span>Grupları Kapat</a>
<div id="menu"></div>
</div>
</div>
</text>))
.Resizable(x => x.Columns(true))
.Selectable()
.Sortable()
.Scrollable(scrollable => scrollable.Virtual(true))
.Excel(excel => excel
.FileName("Kendo UI Grid Export.xlsx")
.AllPages(true)
.ProxyURL(Url.Action("Doktor_Excel_Export_Save", "Doktor"))
)
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("İçerir")
)).Mode(GridFilterMode.Menu))
.Groupable()
.Events(events => events.DataBound("datachange")
)
.DataSource(dataSource => dataSource
.Ajax()
//.Batch(false)
.Events(e => e.Error("error_handler"))
.Read(read => read.Action("Doktor_Read", "Doktor").Type(HttpVerbs.Post))
.Aggregates(aggregates =>
{
aggregates.Add(p => p.AkademikUnvanKodId).Count();
...
})
.Model(m =>
{
m.Id(p => p.DoktorId);
m.Field(p => p.TCKimlikNo);
...
})))
And my controller code;
[HttpPost]
public JsonResult Doktor_Read([DataSourceRequest] DataSourceRequest request)
{
var result = Business.Doktor.GetDoktorList().ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);
}
}
AND ERROR İS;
Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.

In Kendo UI MVC, how do I put a tabstrip in a window using javascript?

In my view page, I have a button. When I click the button, I want to make the window open. The window has some tabstrips, and in the tabstrip I want to show a grid. Does kendo UI allow me to do this?
#(Html.Kendo().Window()
.Name("window")
.Title("About Alvar Aalto")
.Content(#<text>
#(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Paris")
.Selected(true)
.Content(#<text>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
<span class="rainy"> </span>
</text>);
tabstrip.Add().Text("New York")
.Content(#<text>
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.ContactName).Width(140);
columns.Bound(c => c.ContactTitle).Width(190);
columns.Bound(c => c.CompanyName);
columns.Bound(c => c.Country).Width(110);
})
.HtmlAttributes(new { style = "height: 380px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Customers_Read", "Grid"))
)
)
</text>);
})
)
</text>)
.Draggable()
.Resizable()
.Width(600)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
.Events(ev => ev.Close("onClose"))
)
Best thing for you to do is to split this into some Partial Views to make your life a little less complicated.
Kendo Window
#(Html.Kendo().Window()
.Name("window")
.Title("About Alvar Aalto")
.Content(#Html.Partial("_TabStrip").ToHtmlString())
.Draggable()
.Resizable()
.Width(600)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
.Events(ev => ev.Close("onClose"))
)
_TabStrip (Partial View)
#(Html.Kendo().TabStrip()
.Name("tabstrip")
.SelectedIndex(0)
.Items(items =>
{
items.Add()
.Text("Paris")
.Content(#Html.Partial("_Weather").ToHtmlString());
items.Add()
.Text("New York")
.Content(#Html.Partial("_Grid").ToHtmlString());
})
)
_Weather (Partial View)
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
<span class="rainy"> </span>
_Grid (Partial View)
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.ContactName).Width(140);
columns.Bound(c => c.ContactTitle).Width(190);
columns.Bound(c => c.CompanyName);
columns.Bound(c => c.Country).Width(110);
})
.HtmlAttributes(new { style = "height: 380px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Customers_Read", "Grid"))
)
)
Separating out the content by using Partial Views will allow you greater flexibility with pulling the content with Kendo controls within each other and not have to worry about getting the <text> blocks correct.
The grid events and such are localized to their respective partial view much like it was a full view. Partial views can take their own model separate from the parent view which allows greater flexibility in an mvc app.

Kendo UI PopUp not passing values to controller

The grid and popup work fine except the values I enter in create mode do not get passed back to my controller. Looking at the JS Console shows no errors. Monitoring the create process in Fiddler also shows no values being passed, although my form elements do show.
While debugging, the model in my controller is empty.
Here's the grid definition:
#(Html.Kendo().Grid<MyApp.Domain.Entities.TaktInterruptionViewModel>()
.Name("Interruptions")
.Columns(columns =>
{
columns.Bound(i => i.TaktInterruptionId).Hidden().IncludeInMenu(false);
columns.Bound(i => i.DateCreated).Title("Date").Width(75).Format("{0:d}");
columns.Bound(i => i.ActionCount).Title("Actions").Width(50).Hidden(true);
columns.Bound(i => i.MeetingType).Title("Meeting Type").Width(100).Hidden(true);
columns.Bound(i => i.AreaName);
columns.Bound(i => i.TypeName);
columns.Bound(i => i.Responsible);
columns.Bound(i => i.Description).Width(300);
columns.Bound(i => i.Interruption).Width(75).Hidden(true);
columns.Bound(i => i.TaktMissed).Title("Missed").Width(75);
})
.ClientDetailTemplateId("ActionsTemplate")
.ToolBar(toolbar => toolbar.Create().Text("Add Interruption"))
.Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("Create").Window(w => w.Title("Interruption").Name("addInterruption").Modal(true)))
.DataSource(datasource => datasource.Ajax()
.Model(model => model.Id(p => p.TaktInterruptionId))
.ServerOperation(false)
.PageSize(5)
.Create(create => create.Action("Create", "Home"))
.Read(read => read.Action("GetInterruptions", "Home")))
.Groupable()
.Pageable()
.Sortable()
.Filterable()
.ColumnMenu()
.Selectable(s => s.Mode(GridSelectionMode.Multiple))
.Reorderable(reorder => reorder.Columns(true))
.Resizable(resize => resize.Columns(true))
.Events(events => events.Change("displayChart"))
)
My create editor template is as follows:
#model MyApp.Domain.Entities.TaktInterruptionViewModel
#{
ViewBag.Title = "Index";
}
<div class="span-14" style="padding: 10px;">
#Html.ValidationSummary(true)
<hr class="space" />
<div>
#Html.LabelFor(model => model.DateCreated)<br />
#(Html.Kendo().DatePicker().Name("DateCreated").Value(DateTime.Today))
<br />
#Html.ValidationMessageFor(model => model.DateCreated, null, new { style = "color:red;" })
</div>
<hr class="space" />
<div class="span-7">
#Html.LabelFor(model => model.AreaId)<br />
#(Html.Kendo().DropDownListFor(model => model.AreaId)
.Name("AreaId")
.HtmlAttributes(new { style = "width:200px" })
.OptionLabel("Select Area...")
.DataTextField("AreaName")
.DataValueField("AreaId")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAreas", "Area");
});
})
)
<br />
#Html.ValidationMessageFor(model => model.AreaId)
</div>
<div class="span-6">
#Html.LabelFor(model => model.TaktInterruptionTypeId)<br />
#(Html.Kendo().DropDownListFor(model => model.TaktInterruptionTypeId)
.Name("TaktInterruptionTypeId")
.HtmlAttributes(new { style = "width: 200px" })
.OptionLabel("Select Type...")
.DataTextField("TypeName")
.DataValueField("TaktInterruptionTypeId")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetTypes", "Area").Data("filterTypes");
}).ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("AreaId")
)
<br />
#Html.ValidationMessageFor(model => model.TaktInterruptionTypeId, null, new { style = "color:red;" })
</div>
<hr class="space" />
<div class="span-11">
#Html.LabelFor(model => model.Description)<br />
#Html.TextAreaFor(model => model.Description, new { #class = "multi-line" })
<br />
#Html.ValidationMessageFor(model => model.Description, null, new { style = "color:red;" })
</div>
<hr class="space" />
<div class="span-5">
#Html.LabelFor(model => model.Interruption)<br />
#(Html.Kendo().NumericTextBox().Name("Interruption").Format("#.0").Value(0))
<br />
#Html.ValidationMessageFor(model => model.Interruption)
</div>
<div class="span-6">
#Html.LabelFor(model => model.TaktMissed)<br />
#(Html.Kendo().NumericTextBox().Name("TaktMissed").Format("#.0").Value(0))
<br />
#Html.ValidationMessageFor(model => model.TaktMissed)
</div>
<hr class="space" />
<div>
#Html.LabelFor(model => model.Responsible)<br />
#Html.EditorFor(model => model.Responsible, new { #class = "k-input k-textbox" })
<br />
#Html.ValidationMessageFor(model => model.Responsible, null, new { style = "color:red;" })
</div>
<hr class="space" />
<hr class="space" />
</div>
<script type="text/javascript">
function filterTypes() {
return {
AreaID: $("#AreaId").val()
};
}
</script>
And my controller create method is:
[HttpPost]
public ActionResult Create([DataSourceRequest] DataSourceRequest request, MyApp.Domain.Entities.TaktInterruptionViewModel taktInterruption)
{
try
{
if (ModelState.IsValid)
{
// code removed for brevity
}
return Json(ModelState.ToDataSourceResult());
}
catch(Exception ex)
{
TempData["message"] = "There was a problem saving the takt interruption.\n" + ex.Message;
return View();
}
}
If I remove my editor template from the equation and allow kendo to do the popup, the information is passed to my controller; however, I want to control the layout of the popup and I also have cascading drop-downs (that work), thus the editor template.
My question is why aren't my values that I enter in the popup being passed to my controller?
I don't know if this is a bug or limitation to using the custom editor template, however, to get around this I subscribed to the JavaScript Edit event and set the drop down list value.
function reassignVacancy_Editing(e)
{
e.preventDefault();
var reassignUserList = $("#reassignUserList").data("kendoComboBox");
reassignUserList.value(e.model.UserId);
}
I also needed to handle the save event and update the model:
function reassignVacancy_Saving(e)
{
// Update the ViewModel
var reassignUserList = $("#reassignUserList").data("kendoComboBox");
e.model.UserName = reassignUserList.dataItem().FullName; // For the benefit of the grid
e.model.UserId = reassignUserList.dataItem().Id;
}
Hope this helps!
kendo pop up edit, take values from grid not template, when you enter a value, template modifies the cell of new row.
For example;
#(Html.Kendo().DatePicker().Name("DateCreated").Value(DateTime.Today))
#(Html.Kendo().NumericTextBox().Name("TaktMissed").Format("#.0").Value(0))
These have a default value. If you don't change their values, they won't be posted to controller. For posting you have to write values to grid cell.
var firstItem = $('#GridName').data().kendoGrid.dataSource.data()[0];
firstItem.set('ColumnName', DefaultValue);

Grid Custom Filter for Columns Not In Grid

I have a grid which is filtered by another area on the page. I've already figured out how to pass the filter arguments to filter grid columns via javascript/ajax. However, I want to pass custom filter arguments (that don't have a column) to do additional filtering server-side.
In my case, a user can have 0:M roles. I'm not showing the roles in the KendoUI Grid, however I want to select 0:M roles in a multiselct box and pass the selections to the grid's filter call so that I can use the values server side in my stored proc. Anyone know how to do this? This is my current setup.
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Account Filter</legend>
<table>
<tr>
<td style="vertical-align: top;">
<div class="editor-label">
<label>User Name:</label>
</div>
<div class="editor-field">
#Html.EditorFor(model => model.UserName)
#Html.ValidationMessageFor(model => model.UserName)
</div>
<div class="editor-label">
<label>Email:</label>
</div>
<div class="editor-field">
#Html.EditorFor(model => model.PrimaryEmailAddress)
#Html.ValidationMessageFor(model => model.PrimaryEmailAddress)
</div>
<p>
<input type="button" id="btnFilter" value="Filter" />
</p>
</td>
<td> </td>
<td style="vertical-align: top;">
<div class="editor-label">
<label>Role(s):</label>
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.RolesList, Model.RolesList, null, htmlAttributes: new { id="ddlTimeZones", multiple="multiple" })
#Html.ValidationMessageFor(model => model.RolesList)
</div>
</td>
</tr>
</table>
</fieldset>
}
<div style="margin-top: 10px;">
#(Html.Kendo().Grid<AccountGridModel>()
.Name("grdAccounts")
.Columns(columns =>
{
columns.Bound(m => m.UserId);
columns.Bound(m => m.UserName);
columns.Bound(m => m.FirstName);
columns.Bound(m => m.LastName);
columns.Bound(m => m.PrimaryEmailAddress);
})
.Groupable(grouping => grouping
.Enabled(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(m => m.UserId))
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("Index", "Accounts"))
.Sort(sort => sort.Add(m => m.UserName).Ascending())
.PageSize(20))
.Filterable(filtering => filtering
.Enabled(false))
.Pageable(paging => paging
.Enabled(true)
.Info(true)
.PageSizes(false)
.Refresh(true))
.Scrollable(scrolling => scrolling
.Enabled(false)
.Height(400)
.Virtual(false))
.Sortable(sorting => sorting
.Enabled(true)
.AllowUnsort(false)
.SortMode(GridSortMode.SingleColumn)))
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$("#btnFilter").click(function () {
//var dateFrom = $("#dpDateFrom").data("kendoDatePicker").value();
var userName = $("#UserName").val();
var primaryEmail = $("#PrimaryEmailAddress").val();
var grid = $("#grdAccounts").data("kendoGrid");
grid.dataSource.filter({
logic: "and",
filters: [
{ field: 'UserName', operator: 'contains', value: userName },
{ field: 'PrimaryEmailAddress', operator: 'contains', value: primaryEmail },
{ field: 'RoleIdList', operator: 'contains', value: '1,2,3,4' } //this errors... no column
]
});
});
</script>
}
You should use the function called data on the dataSource.read configuration.
Thanks to Pechka for starting me in the right direction. You can pass additional values to your controller via the Read.Data javascript function shown below.
<div style="margin-top: 10px;">
#(Html.Kendo().Grid<AccountGridModel>()
.Name("grdAccounts")
.Columns(columns =>
{
columns.Bound(m => m.UserId);
columns.Bound(m => m.UserName).Filterable(false);
columns.Bound(m => m.FirstName);
columns.Bound(m => m.LastName);
columns.Bound(m => m.PrimaryEmailAddress).Filterable(false);
})
.Groupable(grouping => grouping
.Enabled(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(m => m.UserId))
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("Index", "Accounts").Data("additionalData"))
.Sort(sort => sort.Add(m => m.UserName).Ascending())
.PageSize(20))
.Filterable(filtering => filtering
.Enabled(true))
.Pageable(paging => paging
.Enabled(true)
.Info(true)
.PageSizes(false)
.Refresh(true))
.Scrollable(scrolling => scrolling
.Enabled(false)
.Height(400)
.Virtual(false))
.Sortable(sorting => sorting
.Enabled(true)
.AllowUnsort(false)
.SortMode(GridSortMode.SingleColumn)))
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
function additionalData() {
var userName = $("#UserName").val();
var primaryEmailAddress = $("#PrimaryEmailAddress").val();
var roleIdList = "";
var selMulti = $.map($("#RolesList option:selected"), function (el, i) {
return $(el).val();
});
roleIdList = selMulti.join(",");
return {
userName: userName,
primaryEmailAddress: primaryEmailAddress,
roleIdList: roleIdList
};
}
$("#btnFilter").click(function () {
var grid = $("#grdAccounts").data("kendoGrid");
grid.dataSource.read();
});
</script>
}
Then, in your controller, add variables to your POST function like so:
//
// POST: /Admin/Accounts/
[HttpPost]
public ActionResult Index([DataSourceRequest] DataSourceRequest request, string userName, string primaryEmailAddress, string roleIdList)
{
}

how can we get telerik drop down selection change event in grid view

I am using telerik controls in my project, any body tell how to get selection change event in telerik grid view that can fill multiple column text boxes in insert, edit. that is in mvc3+razor(cshtml).
editor template code
#model string
<table>
<tr>
<td>
#(Html.Telerik().ComboBoxFor(e => e)
.BindTo(ViewBag.pro as SelectList)
.ClientEvents(events => events.OnChange("getproductdesc")) )
</td>
<td>
</td>
<td>
#Html.TextBoxFor((model => model), new { id = "textbox" })
</td>
</tr>
</table>
<script type="text/javascript">
function getproductdesc(e) {
var idmodel = $(this).val();
alert(idmodel);
$('#textbox').val($(this).val());
}
</script>
grid view code
#(Html.Telerik().Grid(Model)
.Name("gdProductDetails")
.ToolBar(commands => commands.Insert())
.DataKeys(keys => keys.Add(c => c.Product_cd))
.Pageable(paging =>
paging.PageSize(5)
.Style(GridPagerStyles.NextPreviousAndNumeric)
.Position(GridPagerPosition.Bottom))
.Sortable(sorting => sorting
.SortMode(GridSortMode.MultipleColumn))
.DataBinding(databing => databing.Server()
// .Select("DCProductDetails", "DeliveryChallan")
.Insert("Addproduct", "DeliveryChallan")
.Update("Editproduct", "DeliveryChallan")
.Delete("Delete", "Home"))
.Columns(columns =>
{
columns.Bound(c => c.Sl_no);/*EditorTemplateName("Product")*/
columns.Bound(c => c.Product_cd).EditorTemplateName("product").Width(350);
columns.Bound(c => c.Prouduc_desc).ClientTemplate("<input type='text' id='textbox'/>");
columns.Bound(c => c.Prod_rt);
columns.Command(commands =>
{
commands.Edit();
commands.Delete();
});
})
)
</table>
</fieldset>
controller code
var listproduct = (from i in db.MSM_PRODUCT select i);
ViewBag.pro = new SelectList(listproduct, "PRODUCT_DESC", "PRODUCT_CD");
#model string
<table>
<tr>
<td>
#(Html.Telerik().ComboBoxFor(e => e)
.BindTo(ViewBag.pro as SelectList)
.ClientEvents(events => events.OnChange("getproductdesc")) )
</td>
<td>
</td>
<td>
#Html.TextBoxFor((model => model), new { id = "textbox" })
</td>
</tr>
</table>
<script type="text/javascript">
function getproductdesc(e) {
var idmodel = $(this).val();
alert(idmodel);
$('#textbox').val($(this).val());
}
</script>
grid view code
#(Html.Telerik().Grid(Model)
.Name("gdProductDetails")
.ToolBar(commands => commands.Insert())
.DataKeys(keys => keys.Add(c => c.Product_cd))
.Pageable(paging =>
paging.PageSize(5)
.Style(GridPagerStyles.NextPreviousAndNumeric)
.Position(GridPagerPosition.Bottom))
.Sortable(sorting => sorting
.SortMode(GridSortMode.MultipleColumn))
.DataBinding(databing => databing.Server()
// .Select("DCProductDetails", "DeliveryChallan")
.Insert("Addproduct", "DeliveryChallan")
.Update("Editproduct", "DeliveryChallan")
.Delete("Delete", "Home"))
.Columns(columns =>
{
columns.Bound(c => c.Sl_no);/*EditorTemplateName("Product")*/
columns.Bound(c => c.Product_cd).EditorTemplateName("product").Width(350);
columns.Bound(c => c.Prouduc_desc).EditorTemplateName("Product");
columns.Bound(c => c.Prod_rt);
columns.Command(commands =>
{
commands.Edit();
commands.Delete();
});
})
)
</table>
</fieldset>
function getproductdesc(e) {
var idmodel = $(this).val();
alert(idmodel);
$('#textbox').val($(this).val());
}
create a editor template with a text box and id assign the editor template to appreciative column with view name, write jquery below grid view, and assign the value like below $('#textboxid').val($(this).val());

Resources