[Solved] Customize Grid Command

[Navneet]

All:

Is there a way to customize gridCommand so that it sends an additional parameter with very AJAX postback?

I want to add a search id that should be sent along with the page and size with every ajax postback. This search id is going to be unique for each page and will be set when the page is first loaded.

Any alternatives to achieve the same outcome will be appreciated too.

Thanks in advance,
Navneet

[Dadv]

Hi,
2 ways :

- Directly in the databinding :

 .DataBinding(dataBinding =>
        {
dataBinding.Ajax().Select("_Select", "Customer", new
            {
                SearchID = ViewBag.SearchId
            });
  })

- In the custom Command :

columns.Command(a => a.Custom("edit").Action("Details", "Customer", new{ SearchId= ViewBag.SearchId}).ButtonType(GridButtonType.Image).SendDataKeys(true).SendState(true).Text("SeeDetails");



If the searchId is in the Model, you could simply add it in the .DataKeys(a => a.Add(c=>c.SearchId).RouteKey("SearchId"))
then you don't need to add it in the binding nether in the custom command.

Regards,

[Navneet]

Sorry for the late reponse. But I wnt with the option 1.

Thanks,
Navneet

[Dadv]

Sorry didn't understood what do you mean by "option 1"?
did the first way i tell you is the good and work for you ?

[Navneet]

Yes, I went with the databinding option.

 .DataBinding(dataBinding =>
        {
dataBinding.Ajax().Select("_Select", "Customer", new
            {
                SearchID = ViewBag.SearchId
            });
  })


Thanks once again.
navneet

[Navneet]

Dadv:

I am stuck again as I need to pass this session ID to my javascript function and I am not sure how.

FYI. here is my existing code:
<pre>
 columns.Template(@<text></text>)
                .ClientTemplate("<button type='button' class='t-button' onclick='editRow(<#= PKID #>)'>Edit</button>");
</pre>

In this client template, I need to pass my session id SOMEHOW. It's not a part of the model, but I need it to be used for my edit page.

I also tried the  custom Command logic using AJAX postback. I am able to pass session ID as a part of the Action. But then the Ajax call is supposed to return JSON object and not HTML that I want to display in the modal edit window.

Any help will be appreciated.

Thanks in advance,
Navneet

[Dadv]

Ok if have well understood you want to have a button on your grid that when you click on, will call an action that return html.

Then you want that the html return to be display  in a modal window.

Could you explain what the editRow script is for please? Do you have some javascript logic to execute before the return from the ajax send?

Anyway i can give you a first path for your goal

in my projects i use this extender :

public static class TelerikGridExtension
{

   public static GridCustomActionCommandBuilder<TItem> Ajax<TItem>(this GridCustomActionCommandBuilder<TItem> builder, AjaxOptions options)

            where TItem : class

        {

            return builder.HtmlAttributes(options.ToUnobtrusiveHtmlAttributes());

        }

}

    <div id="UpdatePanel"></div>

@(Html.Telerik().Grid<MytModel>()

    .Name("Grid")

    .DataKeys(c => c.Add(d => d.PKID).RouteKey("PKID"))          

    .Columns(columns =>

    {

        columns.Command(c => c.Custom("Edit").ButtonType(GridButtonType.Image)

            .Ajax(new AjaxOptions

            {

                InsertionMode = InsertionMode.Replace,

                HttpMethod = "Get",

                UpdateTargetId = "UpdatePanel",

                OnBegin = "ShowWaitingBox",

                OnSuccess = "HideWaitingBox",

                OnFailure = "ShowErrorBox"

            })

            .Action("_Edit", "Controller", new{ SearchID = ViewBag.SearchId} 
).ImageHtmlAttributes(new { @class = "t-icon t-edit" }).SendDataKeys(true))).IncludeInContextMenu(false).Width(15);

         

      }).DataBinding(dataBinding =>

    {

        dataBinding.Ajax().Select("_Select", "Controller");

    })  

    .EnableCustomBinding(true)

    .Sortable()

    .Filterable()

    .Groupable()

    .ColumnContextMenu()

    .Pageable()

)

    <div id="waitingBox" class="waitingBox"></div>

    <div id="waitingText" class="waitingText">Please Wait</div>

    

The scripts "ShowWaitingBox", "HideWaitingBox", "ShowErrorBox" execute the logic for show the waiting screen,
hide the waiting screen when all is receive, show a dialog box if an error occur.
The "HideWaitingBox" also make the UpdatePanel modal (you could use the window control if you want like this).

I'm not sure it's what you want but this could give you some ideas.

Sorry but i'm french and English is not so natural for me :p

Regards,

[Dadv]

Personalty, i use ClientTemplate in a last resort, often it give you less flexibility.

[Navneet]

Dadv:

Thanks for the prompt response. Truly appreciate it.

I believe you do understand the requirement.  

Could you explain what the editRow script is for please? Do you have some javascript logic to execute before the return from the ajax send?
      edit row: is a javascript function thats calls the controller to get the html that should be displayed in a grid edit window. When the user  save the record, the grid gets refreshed. Basically, all this is being done to have Grid model separate from the model used for editing.      

Looking at the code, how should we implement "HideWaitingBox"? Because, the AJAX call is just supposed to return JSON and not pure HTML.

Thanks once again,
Navneet

[Dadv]

Hi,
in standard ajax call (using unobstructed ajax) you don't return pure Json but a PartialView (it could be a Json but not necessary), look at this for some samples.

Here a timeline of the ajax call :

- Click on the button   [user action]
- Calling the client function ShowWaitingBox    [client side]
  * the div waitingBox  is show
* the div waitingText is show
- Calling the Action in ajax mode   [internal MVC]
* get all the unobstructive command
* send the data to the action
- Get server Html response [internal MVC]
If no error
* Place the html content in the div define in the AjaxOptions (UpdatePanel  in my example)
* Calling the client function HideWaitingBox  [client side]  
- Refresh the grid [custom javascript command]
- Show  UpdatePanel  and make it modal [custom javascript command] 

if error
* Calling the client function ShowErrorBox  [client side] 

- End
* the div waitingBox  is hide
* the div waitingText is hide Has you see, you don't need to do anything your self in the ajax call, you only need to add your "visual" effects or the grid refresh.

Telerik is an external component but you can use internal default MVC 3 function as well.

[Navneet]

Dadv:

Thanks for the detailed steps.

I was able to get it working using the client template and JSON calls.

Thanks for the help. Truly appreciate it.

navneet