custom helper to create the kendo grid

[Daniel]

Hello,
can i make a custom razor helper that builds a kendo grid?
For example if i have
@(Html.Kendo().Grid<Namespace.ViewModels.TesttViewModel>()
.Name("Grid")

.Columns(columns =>
{
columns.Template(x => { }).ClientTemplate(
@"<a class='k-button' href='javascript: void(0)' onclick='doLoading(this)' style='min-width:32px!important'><span class='k-icon k-edit'></span></a>
<a class='k-button' href='javascript: void(0)' onclick='deleteRow(this);return false;' style='min-width:32px!important'><span class='k-icon k-delete'></span></a>"
).Width(100);

columns.Bound(p => p.Code).Title(Namespace.Resources.Resources.FieldText_TM_Code);
columns.Bound(p => p.Name).Title(UCMSPayroll.Resources.Resources.FieldText_TM_Name);
columns.Bound(p => p.MaxLength).Title(UCMSPayroll.Resources.Resources.FieldText_TM_MaxLength).Width(130);
columns.Bound(p => p.IsActive).ClientTemplate("<input type='checkbox' disabled='true' name='IsActive' #= IsActive ? checked='checked' : '' # />").Title(UCMSPayroll.Resources.Resources.FieldText_TM_IsActive);
columns.Bound(p => p.IsHour).ClientTemplate("<input type='checkbox' disabled='true' name='IsHour' #= IsHour ? checked='checked' : '' # />").Title(UCMSPayroll.Resources.Resources.FieldText_TM_IsHour);
columns.Bound(p => p.Precision).Title(UCMSPayroll.Resources.Resources.FieldText_TM_Precision);
columns.Bound(p => p.Priority).Title(UCMSPayroll.Resources.Resources.FieldText_TM_Priority);
columns.Bound(p => p.Formula).Title(UCMSPayroll.Resources.Resources.FieldText_TM_Formula);


})

.ToolBar(toolBar => toolBar.Template(@"<a id='addSome' class='k-button k-button-icontext k-grid-add' onclick='createRow()' href='javascript: void(0)'><span class='k-icon k-add'></span>add</a>
<span id='spanAdd' style='display:none;font-size:150%;margin-top:25px'><b>Add</b></span>
<span id='spanEdit' style='display:none;font-size:150%'><b>Edit</b></span>
<div style='float:right;color:black;font-size:150%'><b>measure</b></div>
"

))
.Pageable()
.Sortable()
.Scrollable()

.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.PkTallyMeasurement))
.Create(update => update.Action("EditingInline_Create", "Home"))
.Read(read => read.Action("EditingInline_Read", "Home"))
.Update(update => update.Action("EditingInline_Update", "Home"))
.Destroy(update => update.Action("EditingInline_Destroy", "Home"))
.PageSize(5)

)
)

so there is a lot of code,and i would like to use something like in the razor view:
@NameSpace.MyGrid(model)
and this should create all the above code that at least the portions that ar not changing such as the templates,the Pageable,Sortable,Datasource and so on.

Regards,
Daniel

[Dimo]

Hello Daniel,

 
Please refer to the forllowing forum thread, which covers the same topic:

http://www.kendoui.com/forums/mvc/grid/define-a-custom-html-kendo-extension-helper.aspx

All the best,
Dimo
the Telerik team

[Daniel]

Thank you,i will look over.

[Daniel]

I tried the first variant
@helper MyGridShortcut(string name)
{
Html.Kendo().Grid<UCMSPayroll.ViewModels.TallyMeasurementViewModel>()
.Name(name)

.Columns(columns =>
{
columns.Template(x => { }).ClientTemplate("").Width(100);

columns.Bound(p => p.Code).Title(MyNamespace.Resources.Resources.FieldText_TM_Code);



})

.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext k-grid-add' onclick='' href='javascript: void(0)'><span class='k-icon k-add'></span>adauga</a>"))
.Pageable()
.Sortable()
.Scrollable()

.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.PkTallyMeasurement))
.Create(create => create.Action("EditingInline_Create", "Home"))
.Read(read => read.Action("EditingInline_Read", "Home"))
.Update(update => update.Action("EditingInline_Update", "Home"))
.Destroy(destroy => destroy.Action("EditingInline_Destroy", "Home"))
.PageSize(6)

);

}

@MyGridShortcut("grey")

and doesn't appear anything on the screen.could you tell me why?

Regards,
Daniel

[Dimo]

Hello Daniel,

You are using curly brackets without .Render();

Regards,
Dimo
the Telerik team

[Daniel]

so it's necesary to use always .Render()?

also i tried meanwhile the variant 2 and it stops in the kendo.all.min.js because he doesn't know sortable,
the declaration is
public static class MyHtmlHelperExtensions
{

public static Kendo.Mvc.UI.Fluent.GridBuilder<T> MyGrid<T>(this HtmlHelper helper, string name)

where T : class
{

return helper.Kendo().Grid<T>()

.Name(name)
 .Sortable()

.Scrollable()

.Filterable()

.Pageable();

}

}
and the call in view is like this
@(Html.MyGrid<MyNamespace.ViewModels.TallyMeasurementViewModel>("Grid1")
 
.Columns(columns =>
  {
  columns.Bound(p => p.MeasurementID).Groupable(false);
  columns.Bound(p => p.Code);
  columns.Bound(p => p.Name);
  columns.Bound(p => p.Formula);
  })
  .DataSource(dataSource => dataSource
  .Ajax()
 .Read(read => read.Action("EditingInline_Read", "Home"))
  )
 )
What could be the problem?

Regards,
Daniel

[Dimo]

Hello Daniel,

Yes, .Render() is required when using the first approach.

Your code for the second approach works on my side. Please make sure you have all required scripts on the page and there is only one jQuery instance, which is compatible with the Kendo UI version.

http://docs.kendoui.com/getting-started/javascript-dependencies

Regards,
Dimo
the Telerik team

[Daniel]

i do not understand,i only added that class of c# code and after that call that function in the razor view,what jquery are we talking about?
the rest of the project is working fine(many other razor pages with kendo ui controls) ,it's not just that page in my project.
Also i have to mention that this error occured in IE9.

[Daniel]

solve it.
i had in the page another grid,without using the extension method,and the name was the same "Grid1".very strange errors appear just because of that naming mistake?!

[Dimo]

Hi Daniel,

The Grid .Name() is used as its client ID. The Grid client object is attached to the element with this ID. Having duplicate IDs on a web page is invalid and if Javascript is involved in such a scenario, all sorts of errors may occur.

Dimo
the Telerik team

[Daniel]

one more question:
Can i pass to that extension method some html or javascript code for example

i have on toolbar of the grid some long template but it will be the same for every grid
@(Html.Kendo().Grid<Payroll.ViewModels.MeasurementViewModel>()
.Name("Grid")
.......

.ToolBar(toolBar => toolBar.Template(@"<a id='addSome' class='k-button k-button-icontext k-grid-add' onclick='createRow()' href='javascript: void(0)'><span class='k-icon k-add'></span>adding</a>
<span id='spanAdd' style='display:none;font-size:150%;margin-top:25px'><b>Add</b></span>
<span id='spanEdit' style='display:none;font-size:150%'><b>Edit</b></span>
<div style='float:right;color:black;font-size:150%'><b>units</b></div>
"

))

I would like to be able to include this long code into the method,so when i will use
@Html.MyGrid
it will create the toolbar as i need it.

Regards,
Daniel

[Dimo]

Hi Daniel,

Yes, you can. Did you try it? Basically, you can move anything to the external GridBuilder.

Regards,
Dimo
the Telerik team

[Daniel]

basically it's working,but in the html code,i have javascript function names,which may differ from one template to another,so i have to give it as a helper parameter,and that parameter also contain a javascript function and this has also its own parameters,kind of tricky
.for example i have in that last code example createRow(),or createRow('text')

The other problem that i see maybe you can help me with that too,the scope is the same,making the code reusable:
if i use in a grid,some html code,that has a actual field from datasource,like this
columns.Bound(p => p.IsActive).ClientTemplate("<input type='checkbox' disabled='true' name='IsActive' #= IsActive ? checked='checked' : '' # />").Title(Namespace.Resources.Resources.FieldText_TM_IsActive);

it's working but if i want also this to make it reusable something like this

columns.Bound(p => p.IsActive).ClientTemplate("#= addCustomCheckBoxIsActive() #").Title(Namespace.Resources.Resources.FieldText_TM_IsActive);

where addCustomCheckBoxIsActive is a javascript that returns all that template like this
function addCustomCheckBoxIsActive() {
return "<input type='checkbox' disabled='true' name='IsActive' #= IsActive ? checked='checked' : '' # />";
}
is not working anymore,at least even if i have a false value,the checkbox is still checked and it shouldn't be.

Is there a difference how is interpreted,or why is not working?

Best Regards,
Daniel

[Dimo]

Hi Daniel,

The addCustomCheckBoxIsActive() function does not have the data fields in its scope to be used like this. However, you can pass the data field value (IsActive) as parameter when calling it from inside the client template.

More information about executing code inside client templates is available at:

http://demos.kendoui.com/web/templates/expressions.html

If you want to have a reusable Grid including its datasource, probably it is worth considering using it as a partial view, not as a custom HtmlHelper. This discussion, however, is related to personal preferences, general programming techniques and best practices, and has entered the scope of our premium support services.

Regards,
Dimo
the Telerik team

[Daniel]

Indeed it wasn't in his scope,i passed the IsActive as a parameter and i made a discution based on that,to return checked or unchecked checkboxes.

ok,thank you for the ideas.

No,i want to stick with the extension method,because i want a grid helper that will be getting its model,and other parameters,and show the same kind of grid but with its model and maybe some custom parameters expecially functions on delete/add/edit operations in a view like this:

@MyGrid(myModel,otherparameterS)
especially the design and methods are the same.

Regards,
Daniel