custom helper to create the kendo grid

15 posts, 0 answers
  1. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 19 Apr 2013 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8446 posts

    Posted 19 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 22 Apr 2013 Link to this post

    Thank you,i will look over.
  4. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 23 Apr 2013 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8446 posts

    Posted 23 Apr 2013 Link to this post

    Hello Daniel,


    You are using curly brackets without .Render();


    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 23 Apr 2013 Link to this post

    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
  7. Dimo
    Admin
    Dimo avatar
    8446 posts

    Posted 25 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 25 Apr 2013 Link to this post

    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.
  9. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 25 Apr 2013 Link to this post

    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?!
  10. Dimo
    Admin
    Dimo avatar
    8446 posts

    Posted 25 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 25 Apr 2013 Link to this post

    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
  12. Dimo
    Admin
    Dimo avatar
    8446 posts

    Posted 26 Apr 2013 Link to this post

    Hi Daniel,

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

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 26 Apr 2013 Link to this post

    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
  14. Dimo
    Admin
    Dimo avatar
    8446 posts

    Posted 29 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  15. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 29 Apr 2013 Link to this post

    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
Back to Top